Submission Error ONLY in the header

Community resources General
1

All form fields throughout the site have existed and worked for some time now. But recently my client asked that we add an email collection form in the hero header on the home page. Sounds simple, right?

I added a new form field into the header and no matter what I do, it says an error occurred and the info does not get send to Mailchimp. All other forms in the site work perfectly fine, just not the new one.

I have tried adjusting form IDs and attributes as they have been the cause of problems in the past but nothing is working. Can anyone help me figure out why this particular form isn’t working?

My read only link: Webflow - New Eztia Website

(The form in the header does not appear on the live site of www.eztia.health because of the error, only on the read-only site. Feel free to visit the live site to test out the other forms.)

2

You do not have the site staged, so its not possible to see the error.
If you have this setup working in other parts of your site I’d check two details-

  1. GET v. POST
  2. Your custom attributes, you have some Finsweet attributes there you may want to double check that configuration
3

Thanks for your reply @memetican. I published to a webflow link so you can see the error: https://new-eztia-website.webflow.io/

I ran the Finsweet checker on the Webflow link and it did come back with an error (see screenshot)—but it doesn’t make sense because I do have the attribute fs-formsubmit-element=“form” on the form block.

My other forms are set up exactly the same way, with numbers to differentiate forms on each page.

Screenshot 2023-07-05 at 8.50.37 AM
Screenshot 2023-07-05 at 8.50.37 AM1920×905 98.5 KB

4

I have not used this FS attribute, but quickly scanning the docs suggests that the form itself must have this configuration.

image

i.e. =form, not =form-3.

image

If you have multiple instances, then I think the other attributes use that -n convention, but probably not the fs-formsubmit-element attribute itself?

The docs are a bit vague here, however I’d try that and see if it works.

image
image1269×491 14.5 KB

5

I was under the impression that the n numbers must match but you were right—I updated the attributes and the error I received from running Finsweet’s checker is resolved. Thank you! (See here: Eztia | Cold Therapy Wearables)

BUT… it still doesn’t work. When you try to submit name/email, it still says an error occurred. None of the other forms on this page give you that error, even though they are set up exactly the same.

Now that Finsweet is showing no errors, I’m stumped on what the problem is. I tried changing GET and POST and that made no difference. Still getting “Oops! Something went wrong while submitting the form.”

Appreciate your help & any insight you have @memetican !

6

Ha! I would have made the same assumption.

image

Looks like Mailchimp is CORS-blocking untrusted requests. Is there an approved domains list in Mailchimp you need to add your staging site domain to?

I’d check Mailchimp forums otherwise.

7

This error is probably because the webflow.io link is not hooked up to Mailchimp, only the live link of www.eztia.health.

The live link is definitely hooked up properly to Mailchimp because all other forms on the page work properly and send to Mailchimp, it is only the form in the hero that sends back an error message.

Do you mind running this same check on the live site to see if it returns with any similar errors?

8

No, the domain doesn’t seem to be the problem, I can see what you mean by the form lower on the page sending to Mailchimp successfully.

So something different between the forms;

Your top form is nearly the same but a quick check of the code shows that your field names are wrong. Even if Mailchimp was receiving it, it would not be able to match up the NAME and EMAIL fields.

Left side ( red ) is your hero form, which is not working. Right side is your working form lower on the page.

image
image1080×226 31.3 KB

But those would not prevent the send or cause a CORS error.

When the forms are actually submitted, they’re hitting two different URLs. Hero form is failing, mid-page form is succeeding.

image

My guess is that this is related to the Finsweet Form Submit attribute setup, but both are binding form submit handlers, which suggests something else in the config is likely causing the problem.

I’d fix your name and email field names in the hero form, republish to staging, retest, just in case that fixes things. It might, depending on when and how Mailchimp is doing the API redirect.

Then look at the attribute config docs again and Finsweet’s forums, to find out why the hero one isn’t working correctly.

9

I have noticed that some forms throughout the site have numbers after the NAME or EMAIL fields, but it never seems to matter. I updated the ones in the hero anyway and changed the form ID to match but still not working.

Thank you so much for all of the screenshots, they were very helpful :pray:t3: I will continue to troubleshoot and explore options through Finsweet as well. At least I know its not just me who’s stumped.

Very grateful for all of your insight and help with this!