Email notification on Form Submission

Ask the community
,
1

Hello, guys.

I know you’ve guys have being discussing & answering a lot of questions regarding email notifications on form submissions.

I may be saying crazy things, but as a code beginner I can say the tutorials you’ve being creating are not so clear. I think they are probably really good for people that already have a code backup.

For instance: I read all of the posts related to Form Submissions and they all were linked to this “tutorial”:

I don’t know if these kinds of tutorials are made for code experts, but as a raw beginner I can say: if they are meant to people that have never studied coding before, they are really confusing.

For example, I got stuck here:

"Backend Functions
Next, in two backend web modules , we create two functions to call our 3rd party email delivery service.

The first function adds the API key , sender address, and receiver address to the raw email data it receives and calls the second backend function."

I don’t know what backend web modules are, nor how to create functions, or where to find my API key.

I understand these are probably silly questions and this is not even the iceberg tip of what coding could be. I’m even embarrassed to say these things, but as a person that really loves Wix and is always trying to learn new things, my first experiences with coding are being frustrating.

I think image and video tutorials, like this one you’ve created really help :

So I’d like to ask for “beginner’s tutorials”, those ones that teach coding from the start.

Maybe we beginners are also annoying you guys with our silly questions, so maybe it’d be nice to create a new category for us in the Forum?

Sorry for inconvenience.

6 Likes
2

Hi wuum,
thank you so much for this.

this kind of feedback is exactly what we need -
you have very clearly explained the gap and what we need to do to help code beginners to overcome it.

you should absolutely not feel your questions are silly or an inconvenience.

keep the feedback coming - together we will improve wix code.

Thank you!

3

Thanks for being so kind!

4

Hello guys I support Wuum’s comment to a large extent, although I recognize the Wix Code team is doing a great effort to keep up with all our questions for this new functionality. In my case I already got my fisrt coding success with back and next buttons :), te first coding experience ever in my life! It was great, although very time consuming.

Now, I was trying with the same “send email on form submission” article Wuum mentioned, 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.

5

Here you go … made this video for you …

P.S. Thank you for this thread … it helped me make the video.

P.S.S. There is a tiny mistake in the Article … some code was missing … see pics below …

P.S.S.S. Luv you guys <3

887×764 89.5 KB

6

Thank you Nayeli! Your tutorial worked perfectly!

7

Hey guys, can someone help what to do if I want to send the email to multiple recipients? I am trying to send the form to two recipients. How does the code change?

Thank you.

8

Not sure how the code could change (or if it could change, as it is written based on SendGrids guided format), but here are a couple of alternatives that you might consider:

Email Forwarding - For example, Gmail has email forwarding settings that allow you to ‘auto forward’ specific emails based on specifications you provide.

Email Group Alias - For example, Gmail Gsuite allows you to create different groups so that ‘all persons’ listed in that group receive a copy of incoming email (groupname@yourdomain.com)

9

Hello Wix Pro’s,

Anyone have any ideas on implementing the email notification when your button in NOT connected to submit? In other words the inputs and form submission is all done with code (wix insert)… not connecting to dataset on the page.

I’ve tried using the on insert function instead of onaftersave but no luck. Has anyone attempted this?

Thanks All!

10

Hi bidfix,

You should add the sendFormData(); function to the onClick event for your submit button.

11

Hey Thanks Ido… I’ll try that

12

I’ve tried adding sendFormData() to button26_onclick … form submits but email notification. This is my code… does it look right?

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

export function button26_onclick() {
$w(“#dataset1”).onAfterSave(sendFormData);

function sendFormData() {
const subject = Type Your Subject Here ${$w("#input1").value};
const body = Type Here: ${$w("#input1").value} \rbookingEmail: ${$w("#input1").value} \rbookingName: ${$w("#input2").value};
const recipient = $w(“#input1”).value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));
}

$w("#text199").show(); 
let actions = { 
	"title": $w("#text187").text, 
	"nextAction": $w("#text188").text, 
	"vehicleMake": $w("#text191").text,

};

console.log("actions to be saved" + JSON.stringify(actions)); 

wixData.insert("Actions", actions) 
.then( (results) => { 
	let title = results; //see item below 
	console.log("actions in db: " + JSON.stringify(title)); 
	let vehicleMake = results; //see item below 
	console.log("actions in db: " + JSON.stringify(vehicleMake)); 
	let vehicleModel = results; //see item below

} )
.catch( (err) => {
let errorMsg = err;
} );

}

13

OK figured it out… now clicking submit sends form data to database and email notification gets sent…
Here’s my revised code:

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

export function button26_onclick() {
$w(‘#dataset1’).onReady(sendFormData);

function sendFormData() {
const subject = New Customer Booking Alert For ${$w("#text70").text};
const body = Type Here: ${$w("#input1").value} \rbookingEmail: ${$w("#input1").value} \rbookingName: ${$w("#input2").value};
const recipient = $w(“#text190”).text;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));
}

All I had to do was switch onAfterSave to onReady

export function button26_onclick() {
$w(‘#dataset1’).onAfterSave(sendFormData);
to:
export function button26_onclick() {
$w(‘#dataset1’).onReady(sendFormData);

And abra cadabra like magic

14

Does nobody feel to engage the challenge of send back an email throw Gmail ? I’m trying to study their API, it is not so immediately, at least for me that’s a beginner. thx

15

So I have done all the videos and tutorials (thank you for all the free help) and I still can’t get emails after a form submission. There is nothing in my SendGrid account to suggest emails are being blocked there. There are no error messages in any of my code boxes. I have literally copied and pasted the code. I have been looking at this forum for hours.

My form only has two input fields, an upload button, and a submit button. Originally, I was looking to have the document uploaded emailed to me as an attachment, but I gave up on that because I can’t even get an email notification that the form has been submitted.

@Nayeli, I have watched your video four times. Could someone help me?

16

Hello guys I have build the form and connected it like Nayeli showed on her video and I have used her code it works I get the mail with all the details but with out the image.
I am really need to add image to the notification mail,
Please help me with this its critical for me.

17

Hey guys I got this to work… thanks so much! The only thing is I’m trying to update a dynamic dataset upon form submission / sending email then direct the user to a thank you page…but when I use the wixlocation.to it breaks the submission so I took it out. Any help is greatly appreciated.

18

Hey guys,

I have followed Nayellii video to a T but when I come to add the event handler form to my website and I change the dataset in the code to the name of my background ID it says that ‘OnAfterSave’ doesn’t exist on forum page and not sure how to get around this.

Thanks

19

You talking about this line?

 $w('#dataset1').onAfterSave(sendFormData);

Then you need to make sure that you have the dataset on your actual page and that the id of the dataset is the same as what you use in the code.
CMS (Formerly Content Manager): Adding and Setting Up a Dataset | Help Center | Wix.com