Spacing a HTML email so its not one long line of text

Ask the community
,
1

HI

how do i space out my html email correctly ? when i use a standard mail its perfect however the font and sizes are weird. so i switched it to html code in backend and it all becomes one line of text and not spaced nicely as before without html tag?

see photos of both variants

here’s my email code which works fine

//Send email with new training plan attached
function sendFormData() {
const subject = New training plan created by FM Physiques **for** ${$w("#longNamedropdown").value} ${$w("#dateText").value.toDateString()};
const body = `

    Hi ${$w("#firstNametext").text} We have created a  **new**  training plan  **for**  you to start straight away. You can log into your account at WWW.FMPhysiques.com to view your plan also  **in**  better quality and review videos and techniques, or just see the details  **in**  the email below. Keep up the good work your looking great. 

    ${$w("#commentsText").value} 

    \rTraining day 1: 

    ${$w("#exercise1Trainingday1text").text}  Training video link: ${$w("#url1Trainingday1text").text} 
    ${$w("#warmUpsets1trainingday1dropdown").value} 
    ${$w("#workingSets1trainingday1dropdown").value} ${$w("#reps11Trainingday1dropdown").value} ${$w("#reps21Trainingday1dropdown").value} ${$w("#reps31Trainingday1dropdown").value}  

    ${$w("#exercise2Trainingday1text").text}  Training video link: ${$w("#url2Trainingday1text").text} 
    ${$w("#warmUpsets2trainingday1dropdown").value} 
    ${$w("#workingSets2trainingday1dropdown").value} ${$w("#reps12Trainingday1dropdown").value} ${$w("#reps21Trainingday1dropdown").value} ${$w("#reps31Trainingday2dropdown").value}  

    ${$w("#exercise3Trainingday1text").text}  Training video link: ${$w("#url3Trainingday1text").text} 
    ${$w("#warmUpsets3trainingday1dropdown").value} 
    ${$w("#workingSets3trainingday1dropdown").value} ${$w("#reps13Trainingday1dropdown").value} ${$w("#reps23Trainingday1dropdown").value} ${$w("#reps33Trainingday1dropdown").value}  

    ${$w("#exercise4Trainingday1text").text}  Training video link: ${$w("#url4Trainingday1text").text} 
    ${$w("#warmUpsets4trainingday1dropdown").value} 
    ${$w("#workingSets4trainingday1dropdown").value} ${$w("#reps14Trainingday1dropdown").value} ${$w("#reps24Trainingday1dropdown").value} ${$w("#reps34Trainingday1dropdown").value}  

    ${$w("#exercise5Trainingday1text").text}  Training video link: ${$w("#url5Trainingday1text").text} 
    ${$w("#warmUpsets5trainingday1dropdown").value} 
    ${$w("#workingSets5trainingday1dropdown").value} ${$w("#reps15Trainingday1dropdown").value} ${$w("#reps25Trainingday1dropdown").value} ${$w("#reps35Trainingday1dropdown").value}  

    ${$w("#exercise6Trainingday1text").text}  Training video link: ${$w("#url6Trainingday1text").text} 
    ${$w("#warmUpsets6trainingday1dropdown").value} 
    ${$w("#workingSets6trainingday1dropdown").value} ${$w("#reps16Trainingday1dropdown").value} ${$w("#reps26Trainingday1dropdown").value} ${$w("#reps36Trainingday1dropdown").value}  

    ${$w("#exercise7Trainingday1text").text}  Training video link: ${$w("#url7Trainingday1text").text} 
    ${$w("#warmUpsets7trainingday1dropdown").value} 
    ${$w("#workingSets7trainingday1dropdown").value} ${$w("#reps17Trainingday1dropdown").value} ${$w("#reps27Trainingday1dropdown").value} ${$w("#reps37Trainingday1dropdown").value}  

    ${$w("#exercise8Trainingday1text").text}  Training video link: ${$w("#url8Trainingday1text").text} 
    ${$w("#warmUpsets8trainingday1dropdown").value} 
    ${$w("#workingSets8trainingday1dropdown").value} ${$w("#reps18Trainingday1dropdown").value} ${$w("#reps28Trainingday1dropdown").value} ${$w("#reps38Trainingday1dropdown").value}  

    ${$w("#exercise9Trainingday1text").text}  Training video link: ${$w("#url9Trainingday1text").text} 
    ${$w("#warmUpsets9trainingday1dropdown").value} 
    ${$w("#workingSets9trainingday1dropdown").value} ${$w("#reps19Trainingday1dropdown").value} ${$w("#reps29Trainingday1dropdown").value} ${$w("#reps39Trainingday1dropdown").value}  

    Keep up the good work!`;

const recipient = $w(“#emailAddresstext”).text;

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

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

HTML all one line but nice text font and color but no spacing

1440×900 132 KB

same email with no html nicely spaced but fonts are different and colors are random

1440×900 145 KB

1 Like
2

Is this previous forum post any good for you:
https://www.wix.com/corvid/forum/community-discussion/how-to-design-my-email-notification

Also, note that tag is not supported in HTML5. Use CSS instead.
https://www.w3schools.com/tags/tag_font.asp

3

Hi

The previous thread doesn’t show me how to space it correctly.

I like the CSS but how do you write the email in it?

For example

function sendFormData() {
const subject = This is the subject line of the css email};
const body = `This is the body text

I want all this on seperate lines

but in CSS code

The quick brown fox jumps over the lazy dog}`;

const recipient = $w(“#emailAddresstext”).text;

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

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

4

Is it possible to write CSS code in this type of email ive been playing around all day looking at that site and some things work somethings dont work.

For example you cant seem to write code like this in the wix code area doesnt understand things like

This is some text.

This is a heading in a div element

This is some text in a div element.

This is some text.