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!

@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.

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

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

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