Solved

How do you sync a custom built signup form to Klaviyo?

  • 2 June 2021
  • 3 replies
  • 806 views

Badge +2

My website is custom created and hence the subscribe pop up coming on it is also custom made now, how can I sync that pop up form with Klaviyo to get subscribers and to also trigger flows?

how can I sync pop up form on my website with klaviyo?

icon

Best answer by David To 2 June 2021, 20:52

View original

3 replies

Userlevel 7
Badge +60

Hello @himanshunarwani,

Thanks for sharing your question with the Klaviyo Community!

Since you are using a custom signup form, to link this form to a Klaviyo list, you would need to set up a redirect. You can find instructions and some guidelines in setting up this redirect from the How to Redirect Existing Signup Forms to Klaviyo article.

Once this redirect is set up, you can then set up corresponding flows to trigger for customers being added to these designated list. These list triggered flows are often times considered as Welcome Series flow.

Hope this helps!

David

Badge +2

Thanks, David for the answer.

Well, regarding this issue, I was also talking to a Klaviyo Rep in the chatbox and he suggested to me that, Since on the website, the pop-up form is custom made so to sync subscribers from that form to Klaviyo, there is code that needs to be added to the existing pop-up form on your website.

 

Here is that code:-



<script type="text/javascript"

src="
//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>

<script type=
"text/javascript">

KlaviyoSubscribe.
attachModalSignUp({

list: '
[List ID]', delay_seconds: 1,

content: { clazz: '
klaviyo_modal',

header:
"Interested in our Newsletter?",

subheader:
"Stay in the know with news and promotions.",

button:
"Subscribe", success: "Thanks! Check your email for a confirmation.",

styles: '.klaviyo_modal { font-family: "Helvetica Neue", Arial}.klaviyo_modal .klaviyo_header { color:#222;}.klaviyo_modal .klaviyo_subheader { color:#222;}.klaviyo_modal .klaviyo_submit_button,.klaviyo_modal .klaviyo_submit_button span { background-color:#0064CD; background-image: none; border-radius: 2px;}.klaviyo_modal .klaviyo_submit_button:hover,.klaviyo_modal .klaviyo_submit_button span:hover { background-color:#0064CD; background-image: none; }.klaviyo_modal .klaviyo_inner,.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group input[type=email] { border-radius: 2px;}'

}


});

</script>


 

Can you pls let me know the method is suggested is also correct or not?

Userlevel 7
Badge +60

Hey @himanshunarwani,

Either the method provided of using the redirect function or the method provided to you by the chat agent would be correct. The method highlighted by the chat agent would be a method of linking your custom signup form to a Klaviyo list as the code provided is a piece of building and using custom coded signup forms with Klaviyo as detailed in the articles below:

David

Reply