Signup Form Troubleshooting

read

Overview

If a signup form is not working as expected, review this guide to explore common issues and solutions to these issues.

Troubleshooting New Klaviyo Forms

Please note that new signup forms will not render for browsers using Internet Explorer. Legacy signup forms will continue to render for those using any type of web browser.

When using Klaviyo's new Signup Form Builder, you may need to follow different troubleshooting steps when your forms aren’t working as expected. Below, you can find solutions specific to the new Signup Form Builder.

Form is Not Appearing on Site

If your form is published in Klaviyo but not displaying:

  • Verify that you have the signup form code snippet installed on your site.
  • If you're using an embedded form, verify that you have the embed code installed on your site.
  • Verify that your site is live.
  • Check the Behaviors tab in the Signup Form Builder to ensure that the form is configured to display on the URL that you are viewing.
  • Make sure you’re not using Internet Explorer. As mentioned above, new signup forms won’t appear on IE.
  • Re-run the test in incognito/private browsing mode in a new window. It may be that you have already closed the popup, which is why it isn't displaying again. We cookie browsers for one year, so once someone closes a popup, they won’t see the same popup again for another year (unless they clear their cookies).

Form Won't Successfully Submit

If your form is not submitting when you click the Submit button:

  • Verify that the list the form is connected to has not been deleted.
  • Verify that the button is a Submit button, not a Close button.
  • Check your inbox for a confirmation email. If your list is set to double opt-in, you will not be added to it until you confirm your subscription.

Form isn't Styled as it is in Klaviyo

Klaviyo forms should render on your website as they have been designed in Klaviyo. If this isn’t the case, it could be that your site has !important CSS which overrides all CSS on your website. You can work around this by removing the !important in your site’s CSS. If you are still having trouble with this, please contact us.

Signup Form Submits Subscriber to Another Form

If you click the Submit button on a signup form and are taken to another signup form, this means there is an issue with the Klaviyo JavaScript code snippet that allows your form to submit properly all on a single page.

The easiest solution is to navigate back to the signup form builder and re-copy and paste the form code exactly. You can also dive into your current form code and explore the following common issues:

1. Each line of the JavaScript call needs a comma after it except the last line. If you're missing a comma, this will cause a syntax error and the form won't submit on the same page. If you have a comma after the last line of code, this will also cause a syntax error.
639093

2. The HTML form ID doesn't match the ID specified in the JavaScript snippet (or you're missing the JavaScript snippet completely). Note in the example below that the form ID is the same as the ID in the JavaScript, with a  # in front. The ID in the JavaScript must include a #. For example,  #email_subscribe  will work, but email_subscribe will not. This snippet is required for your form to submit.
639095

3. Make sure the Klaviyo signup library is included on the page.

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>.

639096

Form Fields or Button Don't Disappear on Submit

If you're trying to hide sections of your form after it's submitted, they must be wrapped with a div element with either the klaviyo_field_group or klaviyo_form_actions class. Also make sure you're using the hide_form_on_success option. For example:
639102

General Issues

1. Form isn't working as expected because there are multiple forms with the same ID on a page. This can happen if you use Klaviyo's form builder and add more than one default form without updating the form's ID. To fix this issue, change the form ID for one of the forms and update the corresponding JavaScript. Run a search for all Klaviyo form code on your site if you're concerned there may be conflicting form code (or partial form code) with the same ID.

2. Success message doesn't appear after form is submitted. Your form needs to include a div with the class of success_message. This is where Klaviyo will put the success message after a form is submitted and it's the element Klaviyo will show after a successful submission.

639156

3. Form doesn't redirect to the correct URL after it's submitted. Make sure that there is an http:// in front of the URL in the success setting.

4. Form submits, but no one is being added to the list. If your list has double opt-in enabled, new subscribers will receive an email after opting in that prompts them to confirm their email address. Only after a new subscriber confirms his/her email address will this person be added to your list. If you're testing out a new form with fake or invalid test email addresses and you have double opt-in enabled, you will not see these email addresses added to your list.

Was this article helpful?
4 out of 20 found this helpful