Send AUTOMATED MAILS after form submissions in Webflow

hi fellow web flowers recently I had to build a form for a customer and he asked me if I can set up a confirmation email that automatically gets sent to the user I followed my first impulse and said yes sure but after that I ask myself how should I set this up and don't get me wrong I'm not talking about the email you get as an admin of the website I talk about an email the person receives who filled out the form per default this doesn't work with webflow and so I started to Google for tutorials and even on YouTube I found nothing I actually couldn't believe it because it sounds like a standard thing so I made myself through a couple of different tutorials for other use cases and found a solution how to set up an automation with make because I couldn't find any tutorials it was obvious that I need to record one and I'm about to show you the easy way where we set it up with an Google Mail account so let's get into it so here we have our contact form and every time a user comes here and fills it out I want an automated email uh to be sent to the email address the user fills in here and on the other hand we have make and here we have to set something up so this email gets automatically sent so let's start with that the first thing we have to do here in make is go to the scenarios and create a new scenario and we click here on the big fat plus and type in webflow and we choose webflow and while I have a lot of options here now I choose the first one the web hook watch events and now you uh can choose a hook probably you didn't set any up yet so that's what we are doing next we set up an hook uh we call it um or just call it tutorial and here we connect it to a new website I also just call it tutorial you have to wait for a second and now you can here search for your website choose your website authorize the app and now you can choose here your site you have to wait for a second choose it and now um a trigger type here is also a bunch of options but the first one form submissions is the one that we are looking for so let's go with that one so and so that the first step is already done and why we could go here and set up now um the the email uh we don't do that yet uh we click here on run once and now you can see um this wheeler spinning here and here it says waiting for data so make is now listening or watching this form and sees if something is happening so let's go to this form and just fill in my stuff here and say hi I like your website and send it and if we now go back to make you can see um the wheel isn't spinning anymore and here's a bubble with a one if you click on this you can see okay something happened and here a little bit hidden is this uh data and you can collapse it and now you can see the um data that was used here and also uh the message fine this worked so let's go to the next step where we set up the email um let's tape type mail oh and by the way if you want to become a topnotch webflow developer then subscribe to my channel I publish videos like this about webflow creative business and figma every week I'm going to add here and choose Google restricted and I'm going to name this tutorial again again I have to wait for a while now I can choose um my desired email account I just take our standard email account from our agency connected and here we go now it's connected and the next step is that is asking me if I want to save the message after it could send it so just send Save a copy of it of course I want this and now he's asking me again to uh choose the connection I choose the right connection and now he's asking me in which folder he should save this email and I'm going to save this in the folder send emails and the next step is that I choose a recipient for this email so click on the plus sign here and now you can see all the fields he collected while he was waiting on data from here and I'm clicking here on this email address and now it's set up that this email gets sent to the email that was uh received by the form submission so let's go to the subject and we can type something like um we received your message oops message and let's personal it with the first name here you can choose between HTML email or PL text plain text will probably be enough I've prepared some text so let's copy it in here hi um let's again choose the first name thanks for a message please give us a day to reply to it here's a copy of your message let's put it in and let's put the message in here okay this already works and let's save this one and um so it works you have to turn it on so turn it on here and now it is already working let's go back to our form refresh it and type in again my credentials and hi I want some ice cream okay here we go and let's go over to our mail account let's refresh here and you can see I've received an email we received your message Felix Hi Felix thanks for a message please give us a day to reply here's a copy of your message I want some ice cream you can see this one is working but while this is perfectly working there's one problem the problem is if you have more than one form on your website let's go back to our website and go to this page and here now I have a demo form let's fill it out and type some text I want uh demo and send a message so here we go and now when I go to my email account I can see um that there was an error the scenario has been stopped oh my gosh what happened so the problem is that it's now receiving data from a different uh form and it can't work with it so but there's an easy solution in make let's get back to make and yeah what we need is here on tools and you need a router let's add this router here like this can delete this one and let's Also let's set up a second router like this one and this router uh you can go here and set up a filter actually um let's give this one the name contact it's for the contact form and here you can choose name and this is the name of the form and if you now go to webflow here's our contact form let's choose it here and go to the settings and you can see here's the name of the form it's called Contact form so let's copy that name let's go back to make and just paste the name here and press save save it again and let's go back to our site and when I'm now reusing this demo form nothing will happen and if I'm using my contact form Let's uh try it one more time just give it a short message and send it just have to wait a second so you have to be sure that it's on after an arrow um it can be off even so it stands on here so I turn it off and turn it on again be sure you also save it after you've set up a filter here and let's go to our contact form use it and just type in some message like this and send it let's go to our inbox and waiter here we got the message we received your message Felix and you can see here is message okay fine let's um delete this one and let's set it up for the second form the demo form so if you now go to a webflow and I go here to My Demo page you can see I also have a form here the name of the form is demo form let's go to make set up a filter here again let's call it demo and choose the name the name will be demo form okay and now we have to click on run once again because um web flow didn't receive any data yet and we need some data here to set it up so let's go to the demo form fill it out I want a demo send message you can see we got some data and let's set up this email again send email choose our Google Mail account we again we want to save and message we also it's the same steps like before so I'm just rushing through it again it should be saved in the folder send emails and now we have to set up the recipient for the mail so it's that email here then the subject will be um your demo and the name let's choose plain text email again and here's my mail put in the name that's it actually so now you can see we have here like um this router and two objects that will or modules that will send out the email and if you click here you can see this one is a contact form and uh this one is demo form that's nice let's save it and let's go back to our website refresh fill out let's write demo now and if you can see your demo Felix um hi demo form okay I did um I didn't choose the first name I choose the name of the form um you can see here name I have to choose first name safe sa save here um but the rest is correct thanks for your interest in the demo one of our agents will contact you and so on um let's also go to the contact form and try also this one our contact let's send it and go to our inbox and here we go we received your message fexs nice so your automation is set up and you can lean back while it is sending out confirmation mails for you thanks for watching and as always stay in the flow

Channel: Designbase

Views: 5,351

Keywords: automation, integromat, webhook, email automation on form submition webflow, webflow form to email, webflow gmail form, webflow email form, webflow form submissions to an email address, how to send an email to someone when they fill in a form webflow, webflow mails on form submission

Id: B85ZBWfZNlc

Length: 14min 20sec (860 seconds)

Published: Wed Oct 04 2023