Solved

Developer documentation outdated - legacy form custom properties

  • 24 October 2022
  • 3 replies
  • 593 views

Badge +1

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>

 

icon

Best answer by JeffV.klaviyo 27 October 2022, 23:27

View original

3 replies

Userlevel 7
Badge +58

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. 

Badge +1

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.

Userlevel 1
Badge +4

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

Reply