Skip to main content

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 there @laughteam ,

Welcome and thank you for sharing the information.

I have reached out to our engineers and docs team with this post and will update with information that gets passed back regarding this. 

Thanks @alex.hong  and thanks to “Jeff at Klaviyo” ++++ I assume it’s @JeffV.klaviyo  for helping me fix this over email. The issue was the list had double opt in enabled, so even if the customer was getting registered under Profiles, the custom properties wouldn’t flow in until the customer verified on email.

Hey @laughteam yep that was me...I’m one of the support engineers at Klaviyo that Alex contacted about this. Happy that was able to resolve the issue for you. I’ll be having the docs team take a look at this as well to ensure our documentation includes the necessary info/gotchas. 

 

For anyone else in the community who might come across this. As @laughteam mentioned, Klaviyo Lists have Double Opt-in enabled by default, and users will not be added to the list or have custom properties added to the profile until they confirm their subscription. They will, however, have an “empty” klaviyo profile sync upon filling out the form. The profile will fill out with custom props/list additions once they confirm their subscription. You can learn more about the Double Opt-in process (including how to shut off this functionality) here: https://help.klaviyo.com/hc/en-us/articles/115005251108-Understanding-the-double-opt-In-process

Hi
 

My website person has successfully used some of the code from this thread to embed a custom sign up form on our website. People can now enter their email address, and it's added to the correct Klaviyo list. So thanks to laughteam for that.
 

I have another question:
We would like to also include a first name field in our custom sign up form, so we can get the first names (obviously!).
 

I've looked everywhere to find the relevant information to include in the HTML on our website. But I can't find it!
 

Can anyone help by answering this question please:

What is the first name input field, and we want to know how to pass that through to Klaviyo?

And, is there a resource on the Klaviyo website that covers this by any chance? The link above How to add custom fields to a legacy form doesn’t seem to work any more.
 

Thanks in advance for your help. Peter

PS As may be apparent, I’m not a technical person. But my super competent website person has advised on the question to ask, so hope that makes sense?

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.