Search all resources
Using the default legacy embed code and when you hit submit, it loads a new tab at https://manage.kmail-lists.com/subscriptions/subscribe with a new form they have to submit to join. Tried removing the ajax data but it still happens. How do we submit directly without the 2nd step pop up?
I’m the developer of my team and am having lots of problem with what seems like old or incomplete documentation. Quick preface, all I’m trying to do is add a customizable form on my site which subscribes an email and adds certain custom properties. By customizable I mean that I have the full HTML and CSS code available to me, NOT one that is created with the drag and drop element builder.
How to add custom fields to a legacy form is the first page I looked at. The video is outdated, as there is no more “Standard embed” option for a form which allows you to copy and paste the barebones code. Instead I only get the option of a div that gets later populates with the actual form and I can’t properly edit.
<div class="klaviyo-form-XWXDAt"></div>
I was able to find something closer to what I was looking for here How to add and customize a legacy embedded signup form. I created a list, and tested the default embedded form code on a dev version of my site. Even though customers weren’t being added to the correct list, they were still getting added to Profiles in Klaviyo and I was happy enough with that.
Then I tried adding my custom fields, showing the steps from the first article I linked, and nothing I tried attached the field to the customer. Below is my code literally copy pasted from the second article I linked, with just one custom field added, sensitivity, as per the steps on the first article (omitting the styling for length purposes). Can someone please tell me why the custom property sensitivity isn’t being added to the customers profile.
<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_SDmCaY" 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="SDmCaY">
<input type="hidden" name="$fields" value="$consent, sensitivity">
<input type="hidden" name="$list_fields" value="$consent, sensitivity">
<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" />
<label class="klaviyo_form_actions" for="klaviyo_form_sensitivity">Sensitivity:</label>
<input class="klaviyo_form_actions" id="klaviyo_form_sensitivity" type="text" name="sensitivity" value="" />
<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>
<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>
<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>
Hi, I’ve built my first legacy form and having some issue while submitting the form.
Shopify store: https://wattsnextgroup.myshopify.com/collections/webinars/products/webinar-test
Password: dante123
My reference Klaviyo guide:
https://help.klaviyo.com/hc/en-us/articles/115005249588-How-to-Add-and-Customize-a-Legacy-Embedded-Signup-Form
Issues:
- When clicking the button “Complete Registration” the button redirect to the list instead of submitting the information to Klaviyo
- I can’t find any example of LF with $first_name, $last_name etc.. did I implement these correctly?
HTML CODE:
<form id="email_signup" class="webinar-klaviyo-form" 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="********">
<input type="hidden" name="$fields" value="$consent">
<input type="hidden" name="$fields" value="WebinarName,WebinarUrl">
<input type="hidden" name="$list_fields" value="$consent">
<div class="form__item">
<label class="hidden-label" for="$first_name">First Name</label>
<input class="input--full" type="text" value="" name="$first_name" id="$first_name" placeholder="First name" autocapitalize="words" required />
</div>
<div class="form__item">
<label class="hidden-label" for="$last_name">Last Name</label>
<input class="input--full" type="text" value="" name="$last_name" id="$last_name" placeholder="Last name" autocapitalize="words" required />
</div>
<div class="form__item">
<label class="hidden-label" for="k_id_email">Email</label>
<input class="input--full" type="email" value="" name="email" id="k_id_email" placeholder="Your email" autocorrect="off" autocapitalize="off" required />
</div>
<div class="form__item">
<label class="hidden-label" for="$phone_number">Phone Number</label>
<input class="input--full" type="tel" value="" name="$phone_number" id="$phone_number" placeholder="Your phone" />
</div>
<div class="form__item">
<label class="hidden-label" for="$organization">Company Name</label>
<input class="input--full" type="text" value="" name="$organization" id="$organization" placeholder="Company Name" autocorrect="off" autocapitalize="words" required />
</div>
<div class="form__item">
<label class="hidden-label" for="klaviyo_form_WebinarName">Webinar Name</label>
<input type="hidden" id="klaviyo_form_WebinarName" type="text" name="WebinarName" value="{{ product.title }}"/>
<label class="hidden-label" for="klaviyo_form_WebinarUrl">Webinar URL</label>
<input type="hidden" id="klaviyo_form_WebinarUrl" type="text" name="WebinarUrl" value="{{ page.url }}"/>
</div>
<div class="klaviyo_messages">
<div class="success_message" style="display:none;"></div>
<div class="error_message" style="display:none;"></div>
</div>
<div class="form__item form__item--submit">
<button type="submit" class="klaviyo_submit_button btn">Complete Registration</button>
</div>
</form>
JAVASCRIPT:
<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,
success_url: "/pages/thank-you"
extra_properties: {
$source: '{{ page.title }}',
$method_type: "Klaviyo Form",
$method_id: 'embed',
$consent_version: 'Embed default text'
}
});
</script>