We just added a new article demonstrating how to send an email when a form is submitted.
I already got my fisrt coding success with back and next buttons :)+
Now, I am trying with the “send an email on form submission” article. I completed almost all the steps, but I got stucked in the last step, the one about the event handler, could you please explain what elements do I have to change in order to make it work with my form?
Thank you very much.
Hey Santiago,
Congrats on your first coding success. Let’s see if we can get you a second.
Preface: I will be referring to your element IDs. You can find and edit the ID of an element by selecting the element and looking in the Properties panel. In the code, your IDs show up when you see something like $w(“#XXXXX”) - the XXXXX is the ID and it is preceded by a #.
On line 8 of your code, you need to use the ID of your form’s dataset.
On lines 12-16 we build the subject and body of the email.
You’ll need to decide which page elements you want to use in the subject and body. You will need to replace the current IDs with the IDs of your elements.
Also, if you want to add or remove information from the body, you’ll need to mess around with the template string (the part in blue that starts and ends with a backtick ( ` ) and spans multiple lines.)
For example, if you wanted to add the city information to the email body you would add a line like this (using the correct ID of course):
\rCity: ${$w("#city").value}
I suggest that you first get it working with a few fields (just replace the ones in the sample code) before adding the rest of your fields to the body of the email.
Let us know how it goes and if you need any more help.
Dear Sam,
Thnak you very much, I have tried as you suggested, but nothing happens. I am using SendGrid as suggested in the original article on send email on form submission. Please see in attachement the two backend web-modules and the event handler to check whether I am making some mistake, but I do not get to find the problem and the javascript terminal does not report any error this time.
Thank you very much.
The code looks good to me.
Two things to look for:
-
Check your spam folder to make sure the email isn’t going there.
-
There should be either a success or error message logged to the console. Check your browser’s console to see what message is logged there.
Dear Sam, spam checked, nothing, no sucess or error message logged in the console and no errors in the code. Still not working.
Hay Santiago,
In order to get the errors with promises, you need to add a catch element to the code.
sendEmail(subject, body)
.then(response => console.log(response))
.catch(error => console.log('error', error));
Let us know if the catch code element gives us an indication of the problem
Thanks Yoav,
Tried that, the data is correctly inputed in the live database, but still no mail is sent nor error or success message appear in the console.
try adding a console.log before the sendEmail line. Sets see that the sendEmail function is actually called.
To debug more, add more console.log statements inside the sendEmail function itself. They should be called as well.
You can also share here the public url of the site, that will enable me to take a look at the site to ensure there is no unexpected problem blocking the email.
Dear Yoav
I Inserted the console.log in the code at my best understanding, see image, I hope it is done preperly, at least there are no error messages in the console!
Here is the public url of the form: https://www.destinfinit.com/reservation-andes-adventures
Tried again… emails are still not arriving.
Hello, I got everything to work. However, I want to ask if I can format the email to include an image or button, also if I can get the text bold, or etc. I am using everything on the article and using Sendgrid, so can someone hwlp me with some pointers or links to learn?
Thank you
You can probably do that by sending the email as HTML. The SendGrid documentation should have some information on this.
I got lost in their documentation. Please note that I can get by with the codes, but I am not an expert. Can you please guide me where exactly in Sendgrid I can find that and some guidance on how to implement it?
Thank you
I am no expert in the SendGrid API either, but I would suggest starting by changing the text parameter (on line 13 of sendgrid.js in the example code) to html and the format the data (lines 9-12 in the page code) as html.
Dear haihac1157 maybe you can help me out here, I stiil don´t get to make the “send an email in form submission” to work, as it seems yo have managed to do so. Sam as well as Yoav have looked at the steps I have taken and do not find any errors in the code or the process. Perhaps you can see where is the error to get SendGrid to automatically send an email once the form is submitted? Everything works except by SendGrid automatically sending the email. Is there anything you can recommend me to do?
Hey Santiago,
There was an issue with the wix-fetch API that has been recently resolved that might have affected your code. Have you tried running it again recently?
Hi Sam, indeed, I have been for the last hour trying different things to make sure it is still not working before posting for help.
I have configured everything as explained in the article using SendGrid, and also done everything you and Yoav recommended me in this thread. The data collected through the form is uploading in the Live database but no mail is being sent from SendGrid. I checked in the spam folders, reset SendGrid’s API Key, tried with different sender and receipient emails, but nothing works. Honestly this is getting frustrating, it is already 18 days since your last recomendations, and I really need that function in order to start promotion my website and know when a customer has placed a reservation. If I am not able to do that, I cannot start promoting my service yet, the point of it all is that people make reservations in my website, but if I can not be notified there is no point on promoting it!
Please, I am attaching again the images of all the steps I have taken so you can tell me wheter there is any error. I am including a screen shot of SendGrid’s api key page so you can see whether I am taking the right piece of data to paste into the code (of course the API key is not readable here for the public but I have the complete number, which is the one I pasted in WixCode). Also notice that I even inserted the “console.log” code before the sendEmail line as Yoav recommended so you can see whether the sendEmail function is actually called, this is the form’s url: https://www.destinfinit.com/reservation-andes-adventures
Please help!
Hey Santiago,
Looks to me like you’re not using console.log correctly.
-
I think you can get rid of all the console.logs except for the one on line 18. That is the only one called inside the sendFormData function. (Actually, it would be best if you put that one on its own line, so maybe pull it up to line 17.)
-
You are not passing any information to the log function, so nothing will show up in the console. The easiest thing would be to log the body of your email. So that line should be: console.log(body);
-
If you are checking the functionality using the published version of your site, you will need to use the developer tools of your browser to see the console.
Sam,
Done, see image bellow taken after doing the changes, publishing and sending a form again. Nothing happens. Actually I do not know what should I be looking for with the console.log that was a recommendation from Yoav so you ca
n check on the online form whether the sendEmail function is actually called: https://www.destinfinit.com/reservation-andes-adventures
I do not know how to do that, can you see any error message?
Hey again,
Looks like we might be getting somewhere.
You’re missing a closing curly brace ( one of these things } ) at the end of your sendFormData function. (Possibly missed it when you copied the code.) This is causing the function to not run. Add the closing curly brace on what will be line 22 of your code. Then we can check again to see if the function is running.
In case you want to learn a little more about browser developer tools, this is a good article to get you started: What are browser developer tools? - Learn web development | MDN.