Are you ready to learn how to use Wix code to send out a email notification after a form has been submitted on your website? And when I say a form, I mean a custom user input form. Well, join me in today's video. My name is Michael Strauch the host here on ComputerMDofGilbert. And today we're going to examine how to send that email notification. After a form has been submitted a custom user input form using Wix code on your Wix website. Now this form will be sent not only to yourself, but the person that filled the form out that contains the details from the form they submitted.
It's pretty simple. It's a basic email, but this is how it's sent out. Obviously, especially if you have opt in forms or possibly a contact form anything like that you want to make sure you get the notification email.
So before we hop into that, guys do me a favor. First things. First, if you're watching this video, you're already on the right track, but head over to wixmywebsite.com, this is my website. Get on this weekly, Wix tips, email list. It's really helping people out. And I would hate to see you not be one of those people. You should join the herd here. We're a big community, a big family. So go ahead and sign up for these weekly Wix tips, wixmywebsite.com.
How To Send An Email Notification After Form Submission in Wix
All right, guys so now we're here in the code. So this is the code I've copied over. I put it on a Google drive sheet for you guys, a Google doc. So I will link that in the description below, you could go there and grab the code as needed. Now this code is made with my personal information in it. So obviously you need to change that to your needs and to your information. And I'll show you how to do that here in this video.
Email Notification Code: http://bit.ly/2AKHD8M
So now that you have the code back here, you know where to access it we're going first go into the editor and open up our developer tools. So if we go here, it can be found here, developer tools. You can check them off, check them off. All right, guys, once we get into our editor and we go ahead, turn our developer tools on, get going with that. We're actually going to be using a new element here in Wix code that I have not shown you on this channel. You may have seen elsewhere and it's called this backend function. So this is where you create a backend web module. And I know that sounds a little complex, a little confusing but it's actually very simple.
So there's a Wix resource article that goes along with this video that I kind of just turned into video form. I'll throw a link to that in the description as well. In case you'd like to use that resource article as a resource as well, to help you visualize as well as read it. So maybe you get a combination of the two.
But we come in here in our first backend module, by the way, to add a backend module, you would press plus here and then you would click new web module. So you'll see that there's two different files here. There's an ‘email.jsw’ and then there's a ‘sendGrid.js’. The new ‘.js’ is going to be the sendgrid, but we would do the email first. So you would just simply click new web module and then you'll get it. And then you could actually click settings here and you could rename it, but you need to make sure you rename it, that exact name that's in the code. In this case, it's just email all lower case letters ‘.jsw’. You can see in here it's email, all lower case letters ‘.jsw’. So if you copy it, just like I've given it to you here in the code, then you'll be fine. Just make sure you name it that way when you are added to your backend web module.
Once you do that, you'll copy and paste your code into here. Like we've done, and then you'll see a bunch of code. You may be a little confused, but that's okay. So here's the great news. The code is already set up to where all you have to do is plug in your correct information, and then you'll set up the rest of our steps and it'll be good to go. But until you have that correct information in there, it's not going to be customized and ready to go for your needs. So you'll see an important aspect right here. It says const, and then it says key. So we're going to use a service called SendGrid, and SendGrid is an email service that we're going to use to execute the actual sending of the notification email.
So if you go to SendGrid, which I'll link in the description below as well, you could sign up for an account. It is free. You do have a limit on how many emails you can send a month and then you could adjust your plan accordingly. But once you get in there and you get into your dashboard, you're going to want to go down to settings and then look for API keys. You can see I've already created my API key, but what you're going to want to do is click create API key. And then you're going to want to name your API key, whatever you want to name it is totally up to you. And then you'll see a different permissions here, full access, restricted, restricted access, or billing access. You're going to want it to be full access, and then you click it, name it, and then it'll pop out an API key.
SendGrid: https://sendgrid.com/
In this case, you see, I have my API key here. It shows what it does shows that it sends the email. It's a restricted access on here. Which really I don't need it to be, but it is. And then the actual API keys right here. So when that API key comes out, you're going to want to copy the key that you get from SendGrid. And you're going to want to put it right here, right where it says const key. And you want substitute the one I have in there for yours. Once you get that in there, you're going to want to change the sender from in this case, my email to your email. So this is the email it would be technically sent from. So it would be the sent from email that people see. In this case, mine is info@wixmywebsite.com and then the recipient email, you're going to want to put your own email, because this is where you will receive the notification of a new form filled out, in this case, computermdofgilbert@gmail.com.
The rest of the code here is pretty spiffy. Other than the fact that down here, we have to also add our API key once again, and we have to change the sender email once again, because this portion of the code is going to be used to actually send to the person that filled out the form.
Once you've adjusted the information correctly, we can move into our second part. In this case, again, you would go to backend, but this time you would go new ‘.js’ file. And this is going to be a different file. If you see our code here well, we're going to change this right now ‘.js’. And what you're going to do is you're going to copy this, this code as is, and take it, paste it right in here, and you'll get ‘sendGrid.js’.
Now, one thing you need to know about this one is there's a capital G here, and I kid you not. This will make a difference. So when you name it in your file, make sure it's send lowercase and then grid with an upper case. G dot J S once you get in there, you're good to go for this section. Thankfully, as long as long as you use SendGrid, if you use SendGrid, it's already set up that SendGrid's alternate are the default email service. So if that's already put in and you're going to use SendGrid, which I highly recommend, then you're good to go for this section. Just make sure you named ‘sendGrid’ correctly with the uppercase G.
Once you've got that done, you've got your backend web modules built out, those are complete. That's perfect, but now we need to actually go to the page code and we have to add the page code. In this case, mine is on the contact us page, and I'll show you right here. If we open up the page code, I'll go full view here. This is what it looks like with mine. All filled out. You can come into this document again and grab the page code here. Again, copy and paste this into your page code section here. The only things that you have to change here are the content and the data set. You also have to change the subject embody name, but all of the actual function and functionality behind the email service, there's nothing to change. You just have to change a few text fields and a few inputs, and add some text in here and it's really easy to do.
So you'll see right here, ‘$R.onReady(function’. And it says data set one. So wherever the information, and by the way, you have to be using a custom Wix code input form in order for this to happen so once the information that you use this input form is submitted to the database. Obviously there's a data set to connect it to the database. We all know that we've been through my tutorial. That shows how to create a custom user input form, how to create a database. This data set is what we need to actually link the page code to, because that will then take the code. And no, it needs to use this dataset in the information submitted in these fields. So in this case, we'll hover over it. And we see this as named ‘dataset1’. So we open my page code again and you'll see the onReady function is set for ‘dataset1’, don't take out that little number thing, change yours to whatever data set you named, whatever that data set name is. That's what you need to put right here.
And then right here, you'll see const and then subject. So this is whatever you want the subject to appear as when you feel, when you get your email notification, in this case mine says new client intake form from, and then you can change this. Accordingly. Mine says input one. If we see what input one is, it's first name in my form. So it says, in this case, let's just say, Oh, my name is Michael. So new client intake form from, and let's say, Michael filled out the form. It would put the first name right in the subject line. The same goes for the body here. You can name it, new client. You could put any name you want in here. I just did about the same thing, new client request form from, and then input one. You could change that input. You could change it to whatever field you're using in your custom, a user input form. Again, to find whatever JavaScript name you need to put into the code, you hover over it. And you'll see, it has a little name on it in this case input too. If we scroll down to this, this is radio group two, and yes, the information is case sensitive. So that is a huge thing to know if this is ‘RadioGroup2’, it's capital R capital G and 2, in this case, this is all lowercase input. So make sure you get it correct, because the code is case sensitive.
Once you have your subject built out and your body first portion built out, you have your data set built out. You use this code right here, where it says label here. This is what you're going to want the label to show in the email. So this says first name. So when you get the email, it'll say first name and then the colon. And then in this case, we want the first name to be attached to the correct first name field in your form. So again, it says input1. I showed you guys that the first name was input. One, you go through and for each field that you want set you in the email, you label it right here, don't move any of this bash slash R and don't move any of the dollar signs. Any of that information just simply change. What's in the in the quotations here for the value and the label. You could add whatever you want it to say in your email. But once you have those quotations, you simply add the Java script name that you have right there. And that's what the code name is. Remember it is case sensitive. You could see ‘RadioGroup2’ here, and that's the type of business they have.
Conclusion
And it's that simple guys. Once you get all of those uploaded in here for all of your fields, you will then be sent in email upon form submission with a notification of exactly what was submitted to that form. It's very convenient. It's very nice. It's that simple. And once you do that, you're all ready to rock and roll. Remember, you will have a send limit with send grid for a certain amount of emails that can be submitted per month. You can change your plan accordingly, but I just wanted to show you guys how to send an email after a form has been submitted using Wix code.
If this video helped you out please drop me a like down below comment. If you have any questions at all, I'm here to help you out. And don't forget to subscribe to me here on YouTube here at computerMDofGilbert, where we are one big family, which leads me to say head over to wixmywebsite.com and get on the email list here for our weekly, which tips guys are already helping tons of people out. And again, I want you to be one of those people that were helping out join the community, join the family, and let's do this together. Thank you guys for watching. I'll catch you on the next one.