Where is the documentation on Legacy Forms?

Same issue here. We’ve been working on a custom legacy form, and had access to the documentation last week. But now it’s all disappeared from their Help Centre 🤔

Thanks for your response @Brian Turcotte. Is there anything for an embedded form?

Hi@brentatewc!

The code below contains the default, customizable code that you can use to install a GDPR compliant embedded form on your site. Please bear in mind that you will need to replace LIST_ID with your list's ID:

<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_LIST_ID" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
    <input type="hidden" name="g" value="LIST_ID">
    <input type="hidden" name="$fields" value="$consent">
    <input type="hidden" name="$list_fields" value="$consent">
    <div class="klaviyo_field_group">
      <label for="k_id_email">Newsletter Sign Up</label>
      <input class="" type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
      <div class="klaviyo_field_group klaviyo_form_actions">
        <div class="klaviyo_helptext"> How would you like to hear from us? (please select at least one option) </div>
        <input type="checkbox" name="$consent" id="consent-email" value="email">
        <label for="consent-email">Email</label><br>
        <input type="checkbox" name="$consent" id="consent-web" value="web">
        <label for="consent-web">Online advertisements</label>
        <div class="klaviyo_helptext klaviyo_gdpr_text"> We use email and targeted online advertising to send you product and services updates, promotional offers and other marketing communications based on the information we collect about you, such as
          your email address, general location, and purchase and website browsing history. <br>
          <br>
          We process your personal data as stated in our Privacy Policy {Insert privacy policy link}. You may withdraw your consent or manage your preferences at any time by clicking the unsubscribe link at the bottom of any of our marketing emails, or
          by emailing us at {insert customer support email address}.</div>
      </div>
    </div>
    <div class="klaviyo_messages">
      <div class="success_message" style="display:none;"></div>
      <div class="error_message" style="display:none;"></div>
    </div>
    <div class="klaviyo_form_actions">
      <button type="submit" class="klaviyo_submit_button">Subscribe</button> </div>
  </form>
  <style type="text/css">
    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID {
      font-family: "Helvetica Neue", Arial;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext {
      font-family: "Helvetica Neue", Arial;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text {
      font-size: 14px;
      line-height: 1.3;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID label,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID label {
      color: #222;
    }

    .klaviyo_styling .klaviyo_field_group .klaviyo_form_actions {
      text-align: left;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox]+label,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox]+label {
      display: inline;
      font-weight: normal;
      padding-left: 5px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=email],
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=email] {
      border-radius: 2px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button {
      background-color: #0064cd;
      border-radius: 2px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover {
      background-color: #0064cd;
    }
  </style>
  <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
  <script type="text/javascript">
    KlaviyoSubscribe.attachToForms('#email_signup', {
      hide_form_on_success: true,
      extra_properties: {
        $source: '$embed',
        $method_type: "Klaviyo Form",
        $method_id: 'embed',
        $consent_version: 'Embed default text'
      }
    });
  </script>

Best,

Brian

@brentatewc if you want to go more custom you can also look at the developer documentation for submitting signups through the api.

https://developers.klaviyo.com/en/reference/create_client_subscription

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

We help with e-commerce growth through CRO, Klaviyo and CVO

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

Hi @Brian Turcotte , thanks for the code!
Can we see un-minified version of klaviyo_subscribe.js file anywhere?
It would help a lot in understanding possible customizations while the documentation is not ready.

Just use https://unminify.com/

Is there a way to create a custom embedded form without Klaviyo JS or redirecting the form to a standalone page? Something like this:

<form
	method="POST"
	action="//manage.kmail-lists.com/subscriptions/subscribe"
	novalidate="novalidate"
>
	<input type="hidden" name="g" value="LIST_ID" />
	<input type="email" value="" id="k_id_email" placeholder="Your email" />
	<button type="submit">Subscribe</button>
</form>

Replacing LIST_ID with the proper list ID, of course.

Hi @zeaklous!

That may be possible using a third-party form, but Klaviyo forms always require the Klaviyo JS to be installed.

Best,
Brian

@Brian Turcotte and how could we pass more information as customer attributes?? I havent found the documentation to look for it. What name do we need to put in our inputs.

Thanks in advance!!