How to export your Webflow website and still use contact forms

Webflow is a powerful website builder platform that is being used by a lot of web designers / developers today. It's a great platform for not only coders but also marketing teams who need to be able to make onsite changes but without having to wait for a seperate team to do them and therefore they are able to iterate changes faster.

A true all in one platform such as Webflow enables users to build, host and resell directly from the platform itself and will even handle client billing for you but what happens if you don't want to host your Webflow sites directly on the Webflow platform? Don't worry, they've got you too. You can even export the website code and host it on your own infrastructure. Pretty great right?

How to Export your website from Webflow

So if you would like to host your website that you built on Webflow on your own hosting, first you need to make sure you have the correct Webflow package. At the time of writing, you will need at least the Lite Site Plan

Webflow Site Plans

Once you have confirmed you are on the correct plan, next you need to export your code from the Webflow Designer. So pick the project you want to export from the Webflow Dashboard, then once the Designer loads, you should see the code export icon in the top right of the window:

Once you click on that, you will be presented with the code export window. This gives you the option the browse through the HTML, CSS and JS and the prepare a Zip file of your code, ready for exporting.

Once you click Prepare ZIP, it will load for about 5-10 seconds depending on the size of your website whilst it compresses your files into a ZIP and then once ready, the button will change to Download ZIP:

Click that and your download will start. That's it! You are now free to upload the files to the hosting of your choice but don't forget to extract them first. You can even host your website for free using Netlify, you simply sign up for an account and drag-and-drop your website folder and it will automatically upload and go live! Crazy simple..! We really recommend Netlify.

Anyway, you've exported your website from Webflow and now you realise your contact / lead generation forms no longer work right? That's because it used Webflow to send the actual emails. Now you are hosting the website yourself, you need to provide the mechanism for sending the forms to email. That used to involve some funky form to email scripts back in the day, usually in PHP or Python but not now. Now the modern way and is to use form endpoint services like Hyperforms. Why? Because you don't need additional backend scripts and you can still use it on hosting that doesn't support backend code (like Netlify or Cloudflare). It's super simple to setup and here's how:

Adding form to email to your exported Webflow website

First we will assume you have already signed up for a free Hyperforms account. Once you're logged in to the Hyperforms Dashboard, create a new form. If you need further help doing this, check out our help section here but it's super easy.

Adding a form in Hyperforms

Once you have added your form, you will be presented with a unique endpoint address. That is all you need to get your forms working on your exported Webflow website.

Example of a unique endpoint address

As it says in the pop up, you now need to add the endpoint address to your exported Webflow forms. So first off is to find the HTML page that contains your form in the exported zip file from Webflow. That may be on a contact page or landing page. Open that page in your favorite text editor and hit control - F on your keyboard to open a search. We need to find the code for the form, so in your search box, try searching for <form as this should be the start of the HTML form element. Hopefully it been form and you should then see the code for your form (all forms are different but it would probably look similar to below):

Webflow form code

So all we need to do here to make your forms work is add the Hyperforms unique endpoint address (that was presented to you when you added the form) as a form action and then you need to tell your form to use the POST method of sending to Hyperforms. See highlighted below example:

Adding the action and method attributes to the Webflow form

Make sure you now save your HTML file before closing it down. Now you're done, you just need to upload the website to your hosting provider and your form to email forms should now be working! Pretty cool huh? So much quicker and easier than using additional backend scripts.

Show Comments