Submit Webflow Forms to Custom Backend!! (Native Form Error States)

The final episode of the Webflow Forms Masterclass series where we send our form data to a custom Node backend and a GetFrom API while still using the native success and error states in Webflow.
Support me: buymeacoffee.c...
Webflow Code: codepen.io/Fak...
Node Code: pastebin.com/g...
Webflow Form Article: forum.webflow....
Support the show: / fakesamgregory
-
Listen to my Podcast!: ThatTech.Show
Affiliated With
Webflow: bit.ly/2ZzlJnd
Namecheap: namecheap.pxf....
Get to know me!
Facebook: @therealfakesamgregory
X: x.com/@0x5am5
Twitch: /fakesamgregory
-
My Gear (affiliate)
Sony A7 III: amzn.to/3oFAoxm
Sigma 24-70mm 2.8: amzn.to/3HkKYR2
VIJIM Video Light: amzn.to/41NrxIS
Hollyland Mark M1: amzn.to/3ng2e2P
Macbook Pro M1 Pro: amzn.to/3L62iKo
iPad Pro 2018: amzn.to/3AxJWNN
Magic Keyboard: amzn.to/421B26P
Travel Laptop Stand: amzn.to/3HmPv5w
Logitech MX Vertical: amzn.to/3LfW6zA
My Books
Lingo: Agile: thefullstackag...
Lingo: Startup: thefullstackag...
#Webflow #Forms #API #BackendCode

[@webflowandcode]

What would YOU like to learn about regarding forms?

[@user-ho7jj8fr1y]

How to capture input data from custom HTML embeds and send them to an API endpoint while bypassing webflow form submission limits.

[@MatthewTabor8]

Just wanna say, if you keep these coming the views will keep growing. your content is fantastic and I believe your channel will grow right alongside the amazing tool that is webflow. All the best!

[@webflowandcode]

Thank you for the subscribing!

[@Ellonirie]

You are literally king Samuel! thanks a lot! this is exactly what I was looking for!

[@fionnafaulk]

You are, officially, amazing. 🙌

[@webflowandcode]

Thank you!

[@blarghimakraken6447]

This is a wonderful tutorial! I'm learning webflow, from a background in code based webdev, and it's awesome seeing how you can break out of the training wheels webflow puts on you. I have a question: I'm using a lightly modified version of your Webflow code to query an API. I'm trying to figure out how to default back to the standard webflow form submission behaviour in the event of the API returning a code other than a 201.... but not having much success. If i leave the form elements 'form action' field as my API url, the behaviour I end up with is webflow navigating to that url. If I empty the 'form action' field, and make my fetch query by manually adding my api url, somehow it always submits a copy to webflow despite receiving a 201 response... Thanks in advance!

[@webflowandcode]

Glad to hear it. Cheers for the compliment. It sounds like you’re not preventing default to prevent the form submitting to Webflow. To submit to Webflow on fail, just repeat the procedure inside of the fail with another AJAX request to ‘/‘.

[@alexpeterson1633]

Great video bro!!

[@webflowandcode]

Thank you!

[@ydimitrushev]

Thanks man! Very helpful!

[@webflowandcode]

I’m you found it useful!!

[@arupseu]

What do I have to do if I want to redirect to a URL after successfully submitting and storing data? However, I will have a bunch of URLs. So those URLs will be selected based on some conditions.

[@webflowandcode]

Window.location = yourURL

[@AdminAdmin-sp2oj]

I am using an external API to render the custom form and webflow seems to lose the "required" input functionality where the user is required to enter information. Is it possible to add Required functionality into the Javascript form submit?

[@webflowandcode]

Are the “required” fields working before you add the API functionality? Yes of course it is via JavaScript. This is safer than simple HTML required functionality but there are a myriad of ways to do it. A Google search will tell you all you need to know

[@raytian5134]

Love this tutorial, thank you. One question, how do bypass the CORS restriction when you call external APIs? I've been looking around for a solution.

[@webflowandcode]

CORS can be finicky. If it’s your own API then you need to switch it on in the backend code and set the headers correctly. If you don’t own the backend, maybe you need to go into the settings of the service and “allow” your website to access it. If you can’t do either of these then it could be an issue with the service and how you’re trying to access the API. What API are you trying to access?

[@raytian5134]

@@webflowandcode Thank you for the reply. I was actually trying to POST to Campaign Monitor, but couldn’t figure out how to do it, so I ended up using embedded form instead.

[@nssdrc3283]

Hey, Samuel! Will the data still be visible in the developers console for a multi sign up page if I add a backend like you did?

[@webflowandcode]

Not quite sure what you mean. Yes you can view the POST request content in the web inspector including the data sent. What are you trying to achieve? Why not test it out and see for yourself?

[@plumbdevelopmentllc101]

Is it possible to use this code for 2 different forms on a site? If I have two different ID's for the forms?

[@webflowandcode]

Yes, the code gets every form on the page. Regardless of ID.

[@alicanavcuoglu1849]

Hi Sam, thanks for the video! I have a webhook trigger from Airtable and that is my form action. When I try to submit the form I'm facing a fail and it gives the "No 'Access-Control-Allow-Origin' header is present on the requested resource." error in the console. Is there a way around this? Thank you in advance.

[@alicanavcuoglu1849]

Though, it passes the data to Airtable while giving this error.

[@webflowandcode]

There might be somewhere within Airtable to add your Webflow domain. Not sure though

[@robinhoodmacha9085]

Can we do this to send cart details to a different server

[@robinhoodmacha9085]

and show paymnets

[@webflowandcode]

Yes. You have the formula here to send data now you just need to choose your API and send them their required data.

[@LuisVeloz13]

Hey! Great video!! I have a quesiton, I work in a CRM company and as it is a startup, we don't have fully developed code to integrate with other tools. So I am redesigning the company's website and I need to integrate out CRM's form into webflow to send the submissions to our CRM to manage our clients. But I can't make it work, I'm trying all kind of things and nothing seams to work. I'm not a developer and we don't have a in-house developer, so I am doing the job of a developer. Can you please tell me if there is any solution? Thank you!!

[@webflowandcode]

As long as your CRM has an API!

[@arutorD]

Hi Sam, great tutorial! very useful for me. I have one question. You are passing the response from the AJAX query to the next page via query string, is there a way to pass it via POST? Thank you in advance

[@webflowandcode]

As far as I know you cannot read headers (how data is sent via post) with JavaScript. Is this something you can try? What is your use case?

[@arutorD]

@@webflowandcode I am implementing a refund page where first I ask for the order number and check it exists before getting more information from the user. If the order exists, I get the info from the order (using integromat and webhooks) and fill the next fields to be confirmed or to be modified by the user

[@adityapatel6326]

Hey Really liked it I have a question? If I export the code from webflow and host on another hosting site (should this form submition work )?

[@webflowandcode]

I’ve not tried this. My assumption is yes as we’re writing the code ourself to send and using a separate service to receive the data. Why don’t you try it out and let us all know?

[@adityapatel6326]

@@webflowandcode okie will try soon

[@Mar-py4um]

How do I modify the code so that only a couple forms on the site go to a custom backend and the other forms go through webflows setup?

[@webflowandcode]

Are you familiar with jQuery?

[@Mar-py4um]

@@webflowandcode yes but I am definitely knew to it. I modified your code to include the two forms with their ID's instead of all forms. Do I just do the same except instead of doing the rest of the code I submit the form?

[@webflowandcode]

Exactly! If you add a class to all the forms you want to submit using my code, simply update the jQuery to $(‘.some-class’) and every form with some-class class will submit. All other forms will submit naturally through Webflow. Does this answer your question?

[@Mar-py4um]

@@webflowandcode Yes thank you!

[@Mar-py4um]

​@@webflowandcode So I modified your code to a specific class. This class is on 2 of the 4 forms on my site. I have tried to submit the other two forms(without this class) and they will not work through the normal webflow submission $('.pluContact-form').submit(function(e) { e.preventDefault(); I see in your code you have // unbind webflow form handling (keep this if you only want to affect specific forms) $(document).off('submit'); I have this in mine as well so how does this make it so that only specific forms are submitted?

[@grandtorefactor5665]

Where can i put the key of my API pls ?

[@webflowandcode]

You write your api keys in your script tag as a variable or directly in the url you’re calling the API.

[@grandtorefactor5665]

@@webflowandcode Thx you very much : )

[@webflowandcode]

No problem! Good luck