Where is the documentation on Legacy Forms?

Forum|Forum|3 years ago
April 12, 2023
11 replies
2895 views

I am trying to add a Custom Form to my company’s website -- I want to write all the HTML/CSS so that we have full control over the styling. The only option that Klayvio provides for this appears to be “Legacy Forms”, referred to here: https://help.klaviyo.com/hc/en-us/articles/115005080327-Getting-Started-with-Signup-Forms-and-Subscribe-Pages#legacy-and-custom-signup-forms2

However, every link I have found to anything about Legacy Forms is broken, for example:
https://help.klaviyo.com/hc/en-us/articles/360002034191-Legacy-signup-forms-vs-built-in-signup-forms-reference#:~:text=Legacy%20sign%2Dup%20forms%20must%20be%20manually%20built%20and%20configured,drag%2Dand%2Ddrop%20interface.
https://help.klaviyo.com/hc/en-us/articles/115005249588-Add-and-Customize-an-Embedded-Signup-Form
https://help.klaviyo.com/hc/en-us/articles/115005249548-Add-and-Customize-a-Legacy-Popup

Is this feature no longer supported?

Sign-up forms

Best answer by Brian Turcotte

Hi @brentatewc and @jaylonmartin!

Our team is currently working on updating these guides and moving them to the Developer Portal, which is why the deprecated documentation has been removed. In the meantime, I can assist with any questions!

If you'd like to add a popup to your site, Klaviyo offers a default modal form that you can customize. Here's what the default code looks like:

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

After you've pasted the above snippet, you just need to update the LIST_ID placeholder to reference the ID of the Klaviyo List you'd like people added to when they subscribe.

Let me know if you have any other questions, and thanks for using the Community!

Best,

Brian

Show previous replies

P

PaulyB

Contributor IV

Possibly like many, I have been frustrated by the lack of quality and useable information regarding a work around for this from Klaviyo. I can imagine it is an issue for many.

I have played with the HTML for an embed code and, with my new best friend’s help (Chat GPT) and created a workable solution based on the HTML ideas info, above.

However, together with a developer colleague we had completely drawn a blank with a flyout html.

But we do have a win now, which is working perfectly with the adblockers we have tested which was to take the link component standard script in the head; https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=ADD YOUR PUBLIC ID) and add the long form code that is at that address, to the head, to replace the short script that Klaviyo provides. It’s a bit long but does the trick! It means the slide in subscription form works perfectly as does the embed version and all the tracking.

Has anyone tried that?

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials