Hello guys, I’ve done a basic website for one of my clients, and I want to export it and host it cheaper. I have a form that I need to export. How can I make this form work and send the details to my client’s email instead of Webflow?
But I’m going to stop buying Webflow hosting. I’ll export the code and host it elsewhere. It can’t be that simple to just write the email there, and it works for free, right?
To make the form on your website work and send the details to your client’s email, you’ll need to set up a server-side script to handle the form submission and email functionality. Here’s a general outline of the steps involved:
-
Hosting: Find a web hosting service that supports server-side scripting languages like PHP, Node.js, or Python. Compare different hosting providers to find an affordable option that meets your requirements.
-
Domain: If you don’t already have a domain name, register one for your client’s website. Many hosting providers offer domain registration services as well.
-
Set up email: Configure an email account using your client’s domain. Most hosting providers offer email services as part of their packages. If not, you can use third-party email services like Google Workspace or Zoho Mail.
-
Create the server-side script: Depending on your hosting provider and your preferred scripting language, create a server-side script to handle the form submission. Here’s an example using PHP:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "client@example.com"; // Your client's email address
$subject = "New form submission";
$body = "Name: $name\nEmail: $email\nMessage: $message";
$headers = "From: website@example.com"; // Your website's email address
if (mail($to, $subject, $body, $headers)) {
echo "Thank you for your submission!";
} else {
echo "Oops! Something went wrong.";
}
}
?>
- Update the form action: In your HTML form code, update the
actionattribute to point to your server-side script. For example:
<form action="submit.php" method="POST">
<!-- form fields here -->
<input type="submit" value="Submit">
</form>
-
Upload files: Upload both the HTML file and the server-side script (
submit.phpin this example) to your web hosting provider using FTP or their file manager. -
Test: Visit your website, fill in the form, and submit it. The server-side script should process the form data and send an email to your client’s email address.
Note: This is a basic example using PHP. If you prefer using a different scripting language, you’ll need to adjust the code accordingly.
The hosting that I’m going to host my website on is providing me with a free domain. I don’t know how I am going to set up the email; this is the first time that I’m doing it, but I’ll make it work. Thank you for your time and the information.
And also, is my form going to be the same as it is now if I use that PHP code? I mean, something similar to that. Because I can see that you put the if statement that writes “Thank you for your submission!”, I assume that’s going to overwrite the existing Webflow code, right?
Hi Mehmed, ignore the chatgpt answer- it’s not what you need here.
You want to use a 3rd party form handler, like Basin or Formspark to capture basic form results and email them to you.
I prefer Basin, but it costs a little per year.
You can set it up to email you the result, filter all spam, and still have the Webflow success/fail messages work.
If you’re trying to create something free, it will require a bit of programming and setup. But instead of the hosted php approach above I’d probably use an automation platform like Make/Integromat with a receiving webhook, and then a gmail account to send your notifications.
I’d use a free Make (Integromat) account or a paid Zapier account along with your natively exported Webflow form.
With the latter (Zapier), they have built-in email so sending it is quick. But it’s an expensive solution.
With the former (Make) you can very easily hook up your email provider and send it from them (example: Gmail) and Make’s free tier meets most peoples needs.
The reason I suggest this path is you can use it either within Webflow, or if you export the site and host elsewhere without any time spent switching. It’ll all just work the same and you can keep designing your forms natively within Webflow (versus embedded a 3rd party form into Webflow).
All you need to do is add a Make Webhook url to your forms action.
Form → Make (Integromat) → Send Email
Minus the email sending part, here’s a screencast hooking up Make (Integromat) with a native Webflow form that all works whether you host it with Webflow or somewhere else:
To hook up the email, just add a “gmail” module, or whatever email provider you use.
Hope that helps!
Got it. Thank you very much for your time.
Well, I’ll set up that Integromat. I like it because I can make it in Webflow and then export it all together. Thank you, Chris.
Hi Chris again. Here I am after a few hours of trying to set this up. I watched some videos from your website and your YouTube channel. You only have videos related to sending an email to someone who’s submitting the form. But that’s not the main problem; I believe that I can freestyle it. I have a lot of problems trying to set this up. So this is how things are going rn.
I don’t have a domain currently; I’ll get it maybe tomorrow or in a few days when my client sends me the last part of payment. But I want to set up this app, so the only problem with it is that the domain is missing. And when I get the domain, I just authenticate it and make it work immediately. If this cannot be achieved, just tell me “It can’t work like that”, and don’t read the rest of the message.
So the main problem that I’m dealing with rn is that I got the “There is no scenario listening for this webhook.” message on my webflow site. I scheduled my scenario to run immediately, so I don’t know what else could be the problem. And also, when I try to run my https module, it returns me a “Status: 400”, but I assume that is because I haven’t authenticated my domain yet.
Sorry. My understanding was you had 2 problems:
- You’d like to send emails from a form submit.
- You’d like that to continue working after you export your Webflow site.
Sorry, I’m not following you. Not sure how setting up the domain overlaps with either of those problems unless you’d like the email to be sent from that domain. If that’s the case, that should not stop you from moving forward. Just set that up afterwards.
That means you have not turned on your Make scenario:
If you’re saying you’ve done that, then double check your Webhook URL. You have this pointing to a scenario that is not running.
What are you using with an HTTPS module? You normally avoid those unless Make doesn’t have an integration already.
A 400 response means “bad request” (read more here). That typically means you’re not making your API call correctly and the server won’t accept your request. So that’s on your end.
I want to set up as many things as I can without a domain. And once I get the domain, I have as little work as possible left to do. So, when my client sends me money, I just make some tweaks and make it work. I don’t want him to send me money and then spend the next 3 days trying to solve this.
I turned the scheduling ON and copied the Webhook URL with “Copy address to clipboard”. These unique problems happen only to me, I guess. Or I just don’t know what I’m doing.
Yeah, I did some research about that before. I tried removing some code from your example and adding some of mine, hoping that it would work, but it didn’t. I’ll try to set that up with ChatGPT.
Anyway, I solved my problem. I used Formspree.io. The only thing that I had to do was paste the link in the action tab and set the method to POST. It has an email template and everything, but I don’t really care as long as it sends the submission to my client. It isn’t some high-budget website, so I don’t need anything that looks professional.
And for the ones that have the same problem as I did, you can use FormSpree, it only offers 50 submissions a month, and I believe that it is more than enough for low-ticket clients.