how to send confirmation email to user after submiting a Webflow form.
I do have a Zapier setup that does exactly that, but it is really expensive (50$ a month) and quite complex… had to setup a mailbox parser (which is an overkill already) to extract webflow fields etc…
Despite extensive research on the forum, I haven’t found a complete solution in regards to the implementation of a basic PHP script inspired by a promising post by @cyberdave
I did search on the internet how to setup a webserver but coulnd not really find a A to Z step by step process… Has anyone had experience with it, a suggestions in regards to where to rent a webserver in order to host and run a simple PHP mailing script back to the Webflow user ?
Thank you
PS
I also found that link but it doesn’t really explain how to implement the PHP script with the external webserver.
I set the action of my webflow’s form to the url mentioned above (http://mail.further.design/mailscript.php) and the method to POST but when hi hit submit on the published website, the only thing happening is a redirect to my “thank you” page as declared in the header of my php file.
My question is:
Does someone knows, what am I doing wrong ?
I think you might want to consider usebasin.com. One account and you can manage form to mail services for oodles of webflow sites. Each form has its own logic allowing in spam filtering, honeypot, and ReCaptcha per form.
If you want a script that covers all the bases look at PHPMailer.
@webdev you were right ! PHPmailer seems to offer all the flexibility I need !
It took me a while and a lot of trial and error but I got my first auto-confirmation email from a Webflow form via a custom action PHP script hosted on namecheap Stellar hosting server !
One “last” question:
Is it possible to ALSO execute the default webflow form action AFTER the custom one mentioned below ? The idea is that the client receives an email confirmation from the custom PHP action, then the owner of the website get to see its form section update in his general setting via the default Webflow action. That would be a big help for a lot of us I guess !
So something like a click listener on the submit button which would prevent the default send behaviour, then execute an AJAX function with the custom action url, followed by the Webflow action ? I couldn’t find documentation in regards to the standard Webflow form action (what url is that) is there any link I could have a look at ? I checked the Webflow developer API but could not find any reference to the default form’s action.
Just use a default click event on the on-page form after the Ajax success in your script. Look at the Ajax code in this post on my blog, tweak it for your need.
I had a closer look to the AJAX function used, unfortunately I’m not familiar with jQuery and would like to use only my Strella hosting server with my PHP file since I know those two already work well together. I did try to understand what is going on with your AJAX script but did not fully understand how the data was being transfered.
However, I found on MDN a nice article about FormData that we can bound to the form’s contentent and send via an AJAX post request. I tweaked the script a bit and came up with something like:
// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
let form = document.getElementById("form");
form.addEventListener("submit", event => {
event.preventDefault();
alert("💡 prevent default");
// handle AJAX post
sendAJAXdata();
alert("💡 AJAX reqest sent");
// finaly submit default Webflow
form.submit();
alert("💡 webflow default action sent");
});
});
// 🧠 AJAX magic
function sendAJAXdata() {
let form = document.getElementById("form"),
formData = new FormData(form),
request = new XMLHttpRequest();
let method = "POST",
action = "https://mail.further.design/mailer_v3.php";
// Define what happens on successful data submission
request.addEventListener("load", event => {
// alert(event.target.responseText);
alert("success");
});
// Define what happens in case of error
request.addEventListener("error", event => {
alert("error 🤬");
// log the content of formData
for (let pair of formData.entries()) {
console.log(`${pair[0]} , ${pair[1]}`);
}
});
// Set up the request
request.open(method, action);
// The data provided by the user
request.send(formData);
} // end sendAJAXdata()
So I’ve tweaked the code a little bit more, and now receive an error 405 after the script has finished running.
The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response status code indicates that the request method is known by the server but is not supported by the target resource.
Any idea where this might be coming from ?
EDIT
I now do receive the Webflow default action email !
However, the first custom PHP action via AJAX request seems not to go through.
(The custom PHP script worked perfectly fine when I entered its url directly into the webflow designer panel, my guess is my AJAX code might be missing something)
My custom AJAX request now works and do receive an email from my gmail account (as setuped in my PHP script) instead of the default Weblow form email.
However, I’d still like Webflow to run its default form action after the AJAX request completed which is why I setup the form.submit(); satetement after the AJAX request but still, it seems it doesn’t trigger or get this 405 error message which I don’t really understand.
The form actually sometimes send the two messages, but not always ! Please see screenshot below of one of my test where first the custom PHP action was triggered, then the Webflow default action resulting in two email which is exactly what I need, but it doesn’t always work(!)
The Webflow action doesn’t always work, only the custom PHP action is always triggered and 100% send email. Not sure why Webflow seems to be so picky ?
I thought I could try using async function and promises but still no luck, only the custom action request is being sent while the webflow action request remains ignored.
// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
const form = document.getElementById("form");
form.addEventListener("submit", event => {
event.preventDefault();
alert("prevented default");
// 🧠 async AJAX promise
async function sendAJAXdata() {
const formData = new FormData(form),
request = new XMLHttpRequest(),
method = "POST",
action = "https://mail.further.design/mailer_v3.php";
// Set up + send the request
request.open(method, action);
request.send(formData);
// checking request status
let state = request.readyState;
switch (state) {
case 0: alert("request unsent"); break;
case 1: alert("request opened"); break;
case 2: alert("requeest sent & headers received"); break;
case 3: alert("request loading"); break;
case 4: alert("request done 🥳"); break;
default: alert("state unavailable");
} // end switch()
} // end sendAJAXdata()
// 🧠 if the promise is resolved
sendAJAXdata().then(function() {
// send webflow default action
form.submit();
alert("webflow action sent 🥳");
}); // end then()
}); // end click listener
}); // end DOM listener
I did some more research on the forums and saw a post from @cyberdave mentioning it would not be possible to call the default Webflow action after an AJAX call. Is that info still actual ? It is pretty weird because 1 out of 10, both my AJAX action and Webflow action are triggered.
I read an interesting article on medium explaining that the open() method takes normaly two parameters (method and action) but COULD also take a third one (boolean) which makes the send() method return only when the response is received if set to false.
I have now setup the request as such: request.open(method, action, false);
Hey Anthony
Thanks for your research and sharing your result.
I tested it and it works fine
But after submitting the form, the standard webflow success- or error-message is not shown anymore (I removed header("Location: https://www.XXXX/thanks"); in your php-script). Instead the form gets cleared and reloaded.
Do you, or somebody else, know how to bring back to life Webflows form success- and error-messages?
Edit:
Just found the solution
From the Javascript I removed
event.preventDefault();
form.submit();
And in this changed the last parameter to true instead of false: request.open(method, action, true);
