Skip to main content

When designing a custom sign up form, is the form ever able to exist with multiple states/screens and still be able to pass data back to the associated customer profile using Klaviyo’s API? For example: 

 

SCENARIO 1

Box 1: 

Enter email, submit

 

Box 2: 

“Would you also like to learn about X,Y,Z?” (Checkboxes that we would use to further segment) 

 

SCENARIO 2

Box 1: 

Enter email, submit

 

Box 2: 

“Would you also like to receive text messages?” Enter SMS info, submit 

@blh95 Klaviyo Signup Forms don’t have multi-stage input forms capabilities yet, but one way to work around this is to have the submission redirect to another URL where you can embed another Klaviyo Signup Form to ask secondary (and other) input fields.

In Klaviyo Signup Form, you can have a submission go to another URL upon submit like this:

 


Hey @retention

 

Thanks for the answer – I’m asking specifically for custom coded sign up forms, not sign up forms built with Klaviyo’s native form builder tool. 

 

Would you happen to know if this is possible from a development standpoint?


@blh95 Ah gotcha, the custom coded signup forms, aka “Legacy Forms” have an extra parameter called success_url you can specify to redirect URL:

<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_signup', {
hide_form_on_success: true,
success_url: "https://www.example.com/thank-you"
});
</script>

You can read more about it here:
Redirect Subscribers to a New Page After Submit

 

Hope this helps!


@retention What if we don’t want to redirect users off-site? We intend to have the sign up form direct to a second page - or state. 


@blh95 - Hmmm. The redirect URL can be any page or URL on your site - it doesn’t have to be off-site.  I’m not quite sure if I understand the question?


@blh95 Like @retention mentions, it is possible to do this via legacy forms, but if you’re looking for something more custom coded, I wonder if this article might be helpful? https://www.w3schools.com/howto/howto_js_form_steps.asp

This shows you how to customize the multisteps in js 


Reply