Troubleshooting the Embedded Signup Form

If you want to add a signup form to your website, we offer a simple signup form embed code that uses CSS and JavaScript. Since every website is unique, it's possible that you'll encounter conflicts between our code and yours.

In this article, you'll learn how to resolve some common issues with embedded signup forms.

My form shows no success or error messages

The embed form code uses jQuery to validate the form and display responses such as the success message that appears when someone clicks the Subscribe button to sign up for your emails.

This action is managed by JavaScript, which is particular about what other actions are being performed on the page. Sometimes, multiple scripts on a page can block one another from working correctly. If you don't see the success message, check for potential JavaScript conflicts.

Subscribers land on confirmation thank you page

Form actions are managed by JavaScript, so if that's turned off, you may see the form behave erratically. For example, your subscribers may not see dynamic response error or success messages, or they may be taken to the Mailchimp-hosted confirmation thank you page.

To ensure JavaScript is turned on for your embedded form and to update your site, follow these steps.

1. Click Audience.
2. Click Signup forms.
   
3. If you have more than one audience, click the Current audience drop-down and choose the one you want to work with.
4. Select Embedded forms.
   
5. Click Settings.
6. Make sure the Disable all Javascript checkbox is unchecked.
7. Click Continue
8. Click Copy Code.
   
9. Paste the embed form code into your website's HTML to replace the current version of your form.

Subscriber submits and goes to signup form with alerts

If your embedded form is directing subscribers to the hosted version of your Mailchimp signup form with alerts, look for required fields that have been hidden on your signup form or deleted from the form code.

For example, if your signup form includes a First Name field that is required, but it's been hidden or deleted from the embed code, this can cause the form to submit with errors after someone attempts to subscribe.

To check each field's settings, navigate to the Form Builder for the audience you're working with. If you find a field marked required and hidden, it’s probably the cause of this issue. If you're comfortable with custom coding, you can also View Source on your embedded form, and check the code for the following string.

input type="hidden"

Nothing happens after someone clicks submit

Typically, a contact should submit your form and see a success message that indicates that they've been added to your audience. If there are errors in their submission, they'd see an error message. If neither happens, our servers may not have received the form.

This typically occurs when there are multiple forms using JavaScript validation on a single page of your website. We recommend creating individual pages on your website for each signup form you need.

If you need to have more than one embedded form on a single web page, use one of these solutions.

• Disable JavaScript.
• Embed your form in an iFrame.
• Turn the Remove CSS styles toggle on.

Subscribers got success message but aren't on my list.

Two issues can cause this result. One is on the user's end, and one could have to do with your form code.

• If you use the double opt-in process, new subscribers must confirm their subscription via email before they can be added to your audience. It's possible that these subscribers haven't completed the process yet. Ask if they’ve received the confirmation email, and whether they’ve checked their spam or junk folders.
• If you edited the embed code before you pasted it into your website, double check that the form submits data to the correct Mailchimp account and audience. When in doubt, replace the code on your site with the generated embed code in Mailchimp.

The subscribe button is missing

Sometimes, after you embed your signup form on a site like WordPress or Wix, the Subscribe button doesn't show. This usually occurs when there's a problem with your form's CSS, which is the code that determines how the form looks and is laid out.

Often, there's overlap between the default CSS on your WordPress or Wix web page, and the CSS of your embedded form. If an element of your site has the same CSS class assignment as the Subscribe button in the embedded form code, the subscribe button won't appear on the signup form.

To fix the embedded form code so that your Subscribe button displays correctly, follow these steps.

1. Click Audience.
2. Click Signup forms.
   
3. If you have more than one audience, click the Current audience drop-down and choose the one you want to work with.
4. Select Embedded forms.
   
5. Click Continue.
6. Click Copy Code.
   
7. Paste the code into a simple text editor, like Notepad or TextEdit, and set it to plain text.
8. Near the end of the code, look for <div class="clear"> in the code. Either delete class="clear" and leave <div>, or replace class="clear" with another value, such as class="show".
   
9. Copy the updated code and replace the embedded form code on your site with the new code.

The embedded form code doesn't work with ASP.NET

ASP.NET pages and the Mailchimp embedded form code both include form tags. These form tags conflict and prevent the ability to submit new subscriber data to your audience. You'll need to change the embedded form code for it to work on your ASP.NET page. We've seen the following code change help some users, but we can't guarantee that it will work for your site.

1. In the Mailchimp embedded form code, find the <form> tag, copy the URL for the action property, and save it somewhere to use later.
2. Delete the <form> tag and </form> tag.
3. In the submit button code, add the following code. Make sure to replace actionurl with the action URL you copied earlier.

onClick=this.form.action='actionurl';this.form.submit();

Form shows “too many subscribe attempts”

If your embedded form shows the "Too many subscribe attempts for this email address" error, you may need to turn off the autofill feature in your internet browser.

To fix the error, turn off autofill and try again in about five minutes.