How do you connect a WebFlow signup form to a Klaviyo list?

Hi there attempting to have webflow sign up people without leaving the site:

I have tried setting up similarly to mailchimp but it doesnt seem to work, it re-directs to another sign up page where it requests the email again. Does anyone have a fix for this?

Here are the settings:

 

 

best

ob

 

 

Same problem here!

Hey @itsob and @JulsGra,

What is the source of this form? Is it a third party form you are using? 

If so you may want to reach out to this third part form provider to see if they have any instructions on their end to redirect these signups to a Klaviyo list. Alternatively, Klaviyo also has instructions on how to set up a redirect to be adding users to a Klaviyo list from the How to Redirect Existing Signup Forms to Klaviyo through adjusting the form’s code. 

-David

@itsob@JulsGra 

add an EMBED block from the components tab and place it in the canvas. get an embedded form code from klaviyo and paste it in HTML Embedded Code Editor
<div class="klaviyo-form-xxxxxx"></div>

then add the code snippet from the Signup Forms tab in Klaviyo as directed, before the body tag on every page you want to display the forms.
<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=xxxxxx"></script>

the con is that you can’t style the form in webflow, that has to be done in klaviyo’s form builder.

you can’t use webflow’s forms and get them to POST to Klaviyo. not with out a third party and even then the options and functionality are extremely limited.

Hi there attempting to have webflow sign up people without leaving the site:

I have tried setting up similarly to mailchimp but it doesnt seem to work, it re-directs to another sign up page where it requests the email again. Does anyone have a fix for this?

Here are the settings:

 

 

best

ob

 

 

The article “ How to Redirect Existing Signup Forms to Klaviyo” redirect to an page error after clicking on this article. So, Can anyone provide this article? I need it

Hey @Riz,

Our documentation team are working on revamping a number of those articles since the update to our Help Center. 

In the interim, you can use the information below to redirect existing signup forms to Klaviyo which are taken from our the “How to Redirect Existing Signup Forms to Klaviyo” article.

Redirecting a custom form to Klaviyo:

1. Navigate to the Lists & Segments tab.
2. Choose which list you want subscribers to be added to.
3. In the menu bar, select Sign-up forms.
4. Here, you'll see all of your sign-up forms that are tied to that list. Scroll past these to find the list's subscribe page.
5. Hover over the page name and click Copy URL.
6. Go to your custom form.
7. Change the Form Action URL to the subscribe page URL you copied.
8. Save your changes.  

Generally speaking, the form should have the following properties:
 

<form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST">
  <input type="hidden" name="g" value="LIST_ID_HERE">
  <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
  OTHER_FORM_CONTENT_HERE
  <button type="submit">Subscribe</button>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> 

Using a Klaviyo subscribe URL for a third-party sign-up form:

You can also add users to a list using a POST request from a third-party sign-up form. This method requires prior knowledge of using APIs. API requests are made to the Klaviyo Subscribe URL endpoint: https://manage.kmail-lists.com/ajax/subscriptions/subscribe
 
POST requests to the above endpoint add a user's email and additional user properties to any list in Klaviyo that you choose. This endpoint is unique from the standard subscribe endpoint used in Klaviyo's native sign-up forms.
 
The POST body requires you to pass 5 distinct properties:

• g (required) - The desired LIST_ID
• email (required) - The user's email address
• $fields (optional) - This tells the Klaviyo backend which keys (additional users properties) to expect in the POST request. All properties (other than email) need to be passed as a value under $fields and as its own key.
• $list_fields (optional) - This inherits from the data from $fields and transposes it as a custom property in list format
• other properties (optional) - For each property in $fields, you want to pass a key/value pair like below:
  • $first_name: John
  • $last_name: Smith
  • Custom Property 1: Custom Value 1
  • Custom Property 2: Custom Value 2

Since this would be considered a custom solution, if you need hands on assistance I would also encourage you to start working alongside your developer or reaching out to some of our expansive network of Klaviyo Partners. 

David

<form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST">
  <input type="hidden" name="g" value="LIST_ID_HERE">
  <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
  OTHER_FORM_CONTENT_HERE
  <button type="submit">Subscribe</button>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> 

@David To 

David, I'm not understanding this properly because I'm using WordPress and Klaviyo tools for the first time. Things are quite different and complicated compared to other tools.

If you don't have a video, can you please let me know how any sign-up form will be tied to the list after creating it? I’m talking about 4th point you’ve shared above.  I'm using a WordPress sign-up form that isn't yet connected to Klaviyo. This is where I'm stuck.

Hey @Riz,

I think it’s important to understand that what is being mentioned in step 4, only applies to Klaviyo built sign-up forms. What it means is that This sign-up form page will let you know which Klaviyo built sign-up form are submitting to this corresponding list. Custom built or third-party forms would not appear in this list. 

What you’re really looking for on this page, is the list’s subscribe page URL. Which, following the instructions will guide you towards. I’ve also included a screenshot below in case those instructions weren’t clear:

David

Hey @Riz,

I think it’s important to understand that what is being mentioned in step 4, only applies to Klaviyo built sign-up forms. What it means is that This sign-up form page will let you know which Klaviyo built sign-up form are submitting to this corresponding list. Custom built or third-party forms would not appear in this list. 

What you’re really looking for on this page, is the list’s subscribe page URL. Which, following the instructions will guide you towards. I’ve also included a screenshot below in case those instructions weren’t clear:

David

Thanks David, I have been having a very similar issue as @itsob. My issue wit his now is that when the user provides the email on my third-party form (Webflow), they get re directed to a page in which they have to provide the email again, as well as additional info.

Is it possible to skip this new page and just add the email to the Klaviyo list of our choice?

Hi @itsob!

My apologies for the delay here! This would depend on your comfortability using APIs/developer tools. Essentially, you would have to make a Subscribe Profiles API call each time the form is submitted and including the email address for that profile.

Since the exact instructions to design this system will vary greatly based on the way your integration is set up, this would constitute a custom use case that is beyond the scope of Community/Support - that said, you’re always welcome to reach out to one of our wonderful official partners if you’re looking for extra development help.

Best,

Brian 

Check out my how-to on this. Its a script that will let you submit forms to any Klaviyo list from any form in webflow.

You can use standard webflow forms with it or you can use a custom form.

https://medium.com/@towersjavin/integrating-webflow-forms-with-klaviyo-a-simple-connection-af6de4f76568