Free, Codeless Webflow Site Hosting in Under 5 Mins!
Articles,  Blog

Free, Codeless Webflow Site Hosting in Under 5 Mins!

In this video I’m going to show you how to host your Webflow website on your own custom domain and handle form submissions completely for free and it’s so simple that it’s going to take us less than 5 minutes. If you’re more of a designer than a developer there’s no need to worry – everything you’re about to see is just point and click. OK so this video is split into 3 sections; First we’re going to export our site from Webflow, then we’re going to deploy our site using Netlify, and finally we’re going to learn how to handle form submissions with Netlify. OK so right now I’m in the Webflow Designer. The site you’re looking at is a free Webflow template that I cloned. I’m going to go to the code export menu and download the site’s source code. Alright that’s everything I need from Webflow for now, so I’m going to head over to Netlify. I already have a Netlify account, but if you don’t you can just hit the sign up button and follow along, it’s very simple. Once you’re signed up, you should arrive at this page here. To deploy your site with Netlify is very simple, you just drag the folder you downloaded from Webflow over to here. Once the site has finished uploading, I get this URL that I can click And we can see here the same site, but being hosted this time with Netlify. We do still have one thing to tidy up, and that’s if I navigate away from the home page, I can see these .HTML file extensions in the URL bar. So let’s go back to our Netlify site settings and sort this out. In here I’m going to go to “Build & Deploy”, and then “Post Processing”, and then to “Asset Optimisation”. In here I’m going to untick this to enable asset optimisation which will enable “Pretty URLs” and get rid of the .HTMLextensions. OK so let’s head back to the site and reload it. Here we can see that the .HTML file extension is gone. Make sure to complete this step if you plan on handling form submissions using Netlify. This will become important later on in the video. Next up, if you would like to, you can connect your own domain to your Netlify site. To do this, just go to “Domain Management”, and then add a custom domain. Just follow the wizard here and it’s a very similar process to setting up DNS records with most other hosting providers. If you struggle with this sort of thing, then you can purchase your domain through Netlify. This means that they will configure all the DNS records for you which makes things even simpler. OK so the last thing we’re going to cover is how to handle form submissions to your Webflow site while it’s being hosted by Netlify. They make this really, really simple, so stay tuned. With the Netlify free tier, we can get up to 100 form submissions each month for free. So, let’s head back to the Webflow designer and set this up. On the home page here we can see this contact form. I’m going to click the form element and give it a data tag. Just be careful that you are selecting the form element itself and not a surrounding div block. You can check what type of element is selected in the settings tab here. In here I’m going to add a data attribute: “data-netlify=true”. I’m also going to give this form an action which is “/success”. Let me explain this action; when we submit a form on a Webflow site that is hosted by Webflow, we get this success box that appears. But because we are hosting with Netlify, we need to set up our form in a way that they can handle. When a user successfully submits the form, instead of the success message, they need to be redirected to a success page. On this site I have already created a success page. You can create your own and call it whatever you like. You just need to make sure that your form is “/” and then the path to your page, so in my case this is just “/success”. Now that I’ve made this change, I’m going to re export my site’s code and upload it to Netlify. Once that’s done, let’s reload the site and try out the form. When I submitted the form, we can see that I was redirected to the success page. I’m going to head back to my site settings and go to the forms section to have a look. In here we can see the submission I just made, so we know that this is set up correctly. Well that’s it, we’ve set up a Webflow site to be hosted completely for free using Netlify and we’re even handling form submissions. If you’ve found this video useful, then please feel free to like it and share it with your friends who use Webflow. You can also subscribe for more content like this, I have a bunch of other videos on this channel where I cover topics like hosting your Webflow site for free using Firebase and how to set up user authentication with your Webflow site. Thanks for watching and let me know in the comments how you get on hosting your site with Netlify.


Leave a Reply

Your email address will not be published. Required fields are marked *