Hi all, thanks in advance for any light you can shed on this topic.
I have an action running for the form submissions to go to my CRM, and I used a pretty reliable Finsweet custom code with custom attributes so that the native success message appears. Here’s the link to the code & attributes I’m using: Form Submit
There is an email-only form in the footer which works perfectly; the action runs and the success message appears. However, ALL other forms on the site do not work properly, even though they are set up exactly the same (at least, I believe they are). Some of the forms, when submitted, will run the action but display the error message. Other forms take you to the CRM success page away from the website.
Can someone tell me what is so different about the footer form block from all the other form blocks?! And/or how I can ensure that ALL form blocks will run the action AND display the Webflow native success message?
Thank you for the warm welcome! At first, this still didn’t work and it was showing both the error and the success message.
But I added a number to all the form attributes “form-1” for the first form and “form-2” for the second one. And it works! It shows the native success message AND sends the data to formspark…
I have the same problem - my form is sending a contact to Brevo ( a newsletter tool ) but the form shows an error message. I reduced my test page to just one field, making sure there is only one form. The Finsweet Support Tool runs fine, but still no clue what triggers this error message
The Form works fine, data arrives in Brevo, i get the double-opt-in email… all looks good, but webflow shows the error message.
I’d recommend making a new topic on this to get some more eyes on it. From my initial investigation I can see that the form submission endpoint you’re using is returning a 200 message (success) but also a CORS error:
Access to fetch at 'https://264dc4dd.sibforms.com/serve/...2aO1' from origin 'https://bigdayz.webflow.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
You could try removing/commenting out the form submit code just to make sure it’s not causing any issues and then might be worth following up with Brevo to see if there’s a fix for this issue (allowed origins etc.) - unfortunately I don’t know enough about Brevo to be helpful here.
I haven’t used Brevo’s API in a long time, back in the SendInBlue days.
However most API’s are not designed for client-side access.
What you need is to create your own middle tier that can call the API securely with your account key protected, and no CORS errors. A few ways to do this-
Serverless functions on a platform like Netlify
An automation webhook trigger+response. If you’re wanting to minimize code, you can use a platform like Make to build your integration with Brevo, and use a webhook trigger and a webhook response to send and return data to your client-side JS.
I generally prefer the first option when I’m doing frequent requests, e.g. a YouTube API integration to display a filtered playlist on a Webflow-hosted site.
The second option is better if it’s a relatively infrequent business process— create an airtable record, sign them up to a mailing list, send a transactional email reply…
@memetican How would I go about pushing the form date through Make to Brevo, but not collect the form data on the webflow side. I’m wanting to avoid hitting the webflow form submission limit.
Any time you define your own action in a Webflow form, you take over responsibility for processing that form submission yourself. Webflow’s default form submission handler is no longer involved.
You can put anything including a # to suppress Webflow’s default handler.
I always use this to store my own webhook trigger URL for configuration convenience, and then my custom code retrieves and uses it for my own handler.
If you want to simplify this to some attributes, and have the form success message appear, you can use the SA5 lib.
Makes sense! Thanks for sending the suggestion. For some reason, I can’t get the webhook to pass data over to Make now. Its registering the webhook post, but its not receiving the data to pass it off to Brevo now.
I went through your links and triple checked I have things setup correctly. Maybe I’m missing a setup step with Make though.
Added the library to head code
Added webhook URL to form Action and changed to Post
It’s a pretty simple setup, I’d review the docs and the cloneables.
Make sure your Make scenario is running or in debug mode so it can receive.
Check your browser console log, etc. The usual stuff.
If you need help directly building this out in your project, drop me a message, I can send you my professional details.