Solved

Shopify - Klaviyo - Legacy Form

  • 11 November 2021
  • 2 replies
  • 1027 views

Badge +2

Hi, I’ve built my first legacy form and having some issue while submitting the form.


My reference Klaviyo guide:
https://help.klaviyo.com/hc/en-us/articles/115005249588-How-to-Add-and-Customize-a-Legacy-Embedded-Signup-Form

Issues:

  1. When clicking the button “Complete Registration” the button redirect to the list instead of submitting the information to Klaviyo
  2. 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>

icon

Best answer by David To 12 November 2021, 16:37

View original

2 replies

Userlevel 7
Badge +60

Hello @alexpilotto,

Thanks for sharing your question with the Klaviyo Community!

I’ve gone ahead and took the liberty of omitting some sensitive information from your post. What you are describing regarding your custom legacy form seems very similar to what’s been addressed in the following Community posts:

From these discussed between @jallain, @alex.hong, and myself, common solutions to prevent the legacy/custom form from redirect to a new tab is to ensure your form code is making a POST request and making sure you do not have multiple forms utilizing the same ID. 

In addition, because this issue pertains to a custom legacy form, I would recommend working with a developer you are familiar with to further investigate and troubleshoot this behavior. Klaviyo also has an extensive network of agency partners you can work with as well to provide more assistance on this matter.

I hope this helps!

David

Badge +2

Thank you David,

I was able to fix this, there was an error on the Javascript (the bit I changed).

Thank you

Reply