How to design my email notification?

Discussion Ask a question
, ,
1

Can someone give some advice how can I make a designed email notification?

1 Like
2

Hey,
You can design the email notification using HTML tags, as demonstrated below:

  1. Add the relevant HTML tags to the body variable of the sendFormData function :
function sendFormData() {	
	const subject = `New Submission from ${$w("#nameInput").value}`;
	const body =`<font size="3" color="red">
		Name: ${$w("#nameInput").value}
		\rEmail: ${$w("#emailInput").value}
		\rComments: ${$w("#commentsInput").value} </font>`;
	const recipient = $w("#emailInput").value;
	
	sendEmail(subject, body, recipient)
  		.then(response => console.log(response));	
}
  1. Make sure to change the data type to HTML:

Click here to read to article about How to Send an Email on Form Submission.

I hope it’s clear.

Good luck,
Tal.

2 Likes
3

Hey,
You can also use the Rich Text editor to help you with the HTML code.

Tal.

1 Like
4

Hi Tal, Good day. Thank you for responding to my question. :slight_smile:

2 Likes
5

Hi Tal, it is possible to insert a css on the image below

or how to add a CSS on it.

6

Hey,
You can use inline CSS in the body variable of the sendFormData function .
In the example I wrote in the previous post, I changed the text color to be red by using inline CSS.

Good luck,
Tal.

1 Like
7

Hi Tal, I noticed when I put a separator " ; " on my inline CSS, it display just single attribute but when I put the second attribute it doesn’t display on the gmail. I think it gets error on the separator

8

Hi geovel, can you please paste your CSS code here?

Liran.

1 Like
9

Hi Liran,
const body = `

Registration Confirmation ID CODE #${$w(“#idcode”).value} Service Dog Registry USA

When I put a " ; " separator the whole content will disappeared. as you can see to my code above I remove the " ; ". Please also see the backend code.

1 Like
10

Hi,

You have forgotten to add ` at the end of the string which probably caused the issue. The body variable is a string and therefore, should be assigned between two backticks:

const body = `<div style="font-size:18px">Registration Confirmation 
    <span style="font-weight:800">ID CODE #${$w("#idcode").value}</span>
    Service Dog Registry USA </div>`;

Good luck,
Tal.

11

Hi Tal,

When a user submits data on the form with special characters like an ‘&’ it cuts off the rest of the message in the email. What do you need to do to cater for this scenario?

Kind Regards
Richard

12

Hi Richard,
I recommend making sure to use backtick ( ` ) whenever you assign a string to the body variable, for example:

 const body =`<font size="3" color="red"> 		
 Name: ${$w("#nameInput").value} 		
 \rEmail: ${$w("#emailInput").value} 		
 \rComments: ${$w("#commentsInput").value} </font>`;

Should the issue persists, please send us a screenshot of the issue, the site URL and the page to which the form was added so that we can have a look.

Best,
Tal.

13

Hi Tal,

I checked confirmed that I am using backticks as you describe, however the issue still persists. Attached is a screenshot of the output from the email. We have drop downs that contain the values with “&” as well as users may enter free text on some fields.

Below is page code. The direct link to the page is https://www.shihancho.com/entry-form-new

function sendFormData() {
const subject = Application Received: Victorian Kyokushin Karate Association - FULL CONTACT;
const body = <p><font size = "11">Dear Applicant, \rWe have recieved your application with the following details, if any corrections are required please contact : \rFirst Name : ${$w("#strFirstName").value} \rSurname : ${$w("#strSurname").value} \rGender : ${$w("#strGender").value} \rDate of Birth : ${$w("#dteDOB").value} \rAge as at 29/04/2018 : ${$w("#strAge").value} \rAddress : ${$w("#strAddress").value} \rSuburb : ${$w("#strSuburb").value} \rPost Code : ${$w("#strPostCode").value} \rDojo : ${$w("#strDojo").value} \rGrade : ${$w("#strGrade").value} \rTelephone : ${$w("#strTelephone").value} \rCompetitor Email : ${$w("#strCompEmail").value} \rInstructor Email : ${$w("#strInstEmail").value} \rParent/Guardian : ${$w("#strParent").value} \rNumber of Years in Kyokushin : ${$w("#strHistoryKyokushinYrs").value} \rTrained in another martial art? : ${$w("#strPriorArt").value} \rOther Style History : ${$w("#strHistory").value} \rTotal Years Training : ${$w("#strTotalHistoryYears").value} \rAdult Grade Division : ${$w("#strGradeDivision").value} \rAdult Weight Division : ${$w("#strWeightDivision").value} \rColts (16 & 17yo) Weight : ${$w("#strWeightColts").value} \rJunior Colts (14 & 15yo)? : ${$w("#strJuniorColts").value} \rMember of Ambulance Scheme? : ${$w("#strAmbulanceMember").value} \rCompetitor Declared and Acknowledges Terms and Conditions : ${$w("#strCompetitorAck").value} \r PLEASE NOTE THAT THIS APPLICATION IS NOT COMPLETE WITHOUT PAYMENT OF ENTRY FEE AND MEDICAL CERTIFICATE \r Osu and Good Luck</font></p> ;
const recipient = $w(“#strCompEmail”).value;

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

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

Thank you in advance.

Kind Regards
Richard

14

Hey,
I was able to recreate this. I’m not sure whether it’s an issue on our end or something related to the sendGrid API. I’ll check it and get back to you once I have more information about it.

Tal.

15

Thanks Tal - look forward to hearing what you find.
Kind Regards
Richard

16

Hi Richard,
I’ve console logged the value before sending it using the API and it looks fine. Therefore, it seems related to the API. I suggest that you either contact sendGrid regarding this matter or try sending an Email using a different Email API. You can also change a bit the dropdown text to have no signs like “&”.

Have a good day,
Tal.

17

Hello, could someone please help me, I did everything exactly like in the tutorials, the notification email ran for two days and then stopped, now the code in this line seems to be faulty, I do not know how to fix it! Someone knows??

18

Since Wix recommends using SendGrid, can’t you just design a transactional email using their templates and include another API call to said SendGrid email in the page code?

19

Jess, that actually exists, but not made by Wix, but by emailjs.com. I have not found any statement that Wix recommends SendGrid, but, because it is the only example, many use it. I looked for an alternative, easier and more flexible and found that service (I have nothing to do with them). They have developed all the interfaces for mailgun, gmail, yahoo, outlook and a lot more, and the only thing you do is set template, emailprovider and the variables you want to show in your email template. If you want to switch email provider, you just change that var, the rest of your code stays the same. You might want to check it out.
They also support html-markup, if you put your text in triple curly braces.

Working example code in my article here: https://girizano.wixsite.com/codecorner/home/send-email-thru-gmail-and-others-in-wix-code

#email #gmail #sendgrid

20

What does this line do in the SendGrid Backend Module ?

const recipients = recipient.split(";").map( (x) => "to[]=" + x + "&" ).join("");

Tal ?