How to Format HTML Email Properly

380 views
Skip to first unread message

Brian Chan

unread,
Aug 3, 2023, 6:20:33 AM8/3/23
to NV Form Mule Add-on
When I paste my code from WYSIWYG Editors online, the email usually has too much spacing in it.

Is there anyway to format beautiful HTML emails using Form Mules?

Joseph Schmidt

unread,
Aug 3, 2023, 8:47:22 AM8/3/23
to nv-form-m...@googlegroups.com
Formula understands some HTML.

You will have to play with your code to see if you can get it to work. I don't believe there's any magic formula.


On Thu, Aug 3, 2023, 6:20 AM Brian Chan <br...@inachamhk.com> wrote:
When I paste my code from WYSIWYG Editors online, the email usually has too much spacing in it.

Is there anyway to format beautiful HTML emails using Form Mules?

--
You received this message because you are subscribed to the Google Groups "NV Form Mule Add-on" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nv-form-mule-ad...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nv-form-mule-add-on/f9f48459-49dd-4a5d-985a-b2142eee45ben%40googlegroups.com.

Alex Wilson Kho

unread,
Aug 3, 2023, 9:17:59 AM8/3/23
to nv-form-m...@googlegroups.com, br...@inachamhk.com
Absolutely! Formatting beautiful HTML emails using Form Mules (a Google Sheets add-on) is definitely possible. Form Mule is primarily used for sending emails from Google Sheets, but you can leverage its capabilities to create and format HTML emails as well.

Here's a step-by-step guide on how you can do it:

1. Prepare your email content: First, you'll need to create the HTML content of your email. You can use any WYSIWYG editor online or a local editor like Visual Studio Code or Sublime Text to write your HTML code. Make sure to design it with the desired formatting, images, and styles.

2. Create a Google Sheet: Open Google Sheets and create a new spreadsheet or use an existing one. This sheet will be used to trigger the email and store any relevant data.

3. Install Form Mule Add-on: In Google Sheets, go to "Add-ons" > "Get add-ons" and search for "Form Mule". Click on "Install" to add the Form Mule add-on to your Google Sheets.

4. Setup Form Mule: Once Form Mule is installed, you can set it up to send emails based on a trigger. For example, you can set up the email to be sent when a new form response is submitted or based on a specific condition in your Google Sheet.

5. Insert HTML content: In the "Form Mule" sidebar, you can find an option to "Compose" the email. There, you can paste the HTML content that you prepared earlier. Make sure to use the "HTML Editor" option in the sidebar to paste your HTML code.

6. Insert placeholders: If you want to personalize the emails, you can insert placeholders in your HTML code that will be dynamically replaced with data from your Google Sheet. For example, if you have a column for "Name" in your Google Sheet, you can use a placeholder like {{Name}} in your HTML content.

7. Set recipient email addresses: In the "Form Mule" sidebar, you can specify the email addresses of the recipients. These can be static addresses or taken from a column in your Google Sheet.

8. Configure email options: Form Mule allows you to configure email options such as CC, BCC, subject line, and more. You can customize these settings as needed.

9. Test and send the email: Once everything is set up, you can test the email by triggering the process (either through a form submission or the specified trigger). If everything looks good, you can proceed to send the email to your recipients.

By following these steps, you can use Form Mule to format and send beautiful HTML emails from Google Sheets. It provides a handy way to automate the email-sending process and keep your email content formatted correctly. Just make sure to double-check the formatting in the HTML code you paste into the "Compose" section to ensure there are no unnecessary spacing issues.

On Thu, 3 Aug 2023 at 18:20, Brian Chan <br...@inachamhk.com> wrote:
When I paste my code from WYSIWYG Editors online, the email usually has too much spacing in it.

Is there anyway to format beautiful HTML emails using Form Mules?

--

Joseph Schmidt

unread,
Aug 3, 2023, 10:29:10 AM8/3/23
to nv-form-m...@googlegroups.com
I followed everything until I got to the part about using the HTML editor.  I'm using the Add-on version and I don't see an option to choose an HTML editor.

Any help would be appreciated.



Alex Wilson Kho

unread,
Aug 3, 2023, 12:50:49 PM8/3/23
to nv-form-m...@googlegroups.com, br...@inachamhk.com
Apologies for the confusion. It seems there was a misunderstanding. Form Mule, as a Google Sheets add-on, does not have a built-in HTML editor to compose HTML emails directly.

Instead, to send beautiful HTML emails, you need to provide the HTML content directly within the Google Sheets cell, and Form Mule will use the content from that cell to send the email. You can paste the HTML code into a specific cell in your Google Sheet and then refer to that cell in Form Mule to send the email.

Here's a step-by-step guide on how to send an HTML email using Form Mule:

1. Prepare your email content: Use any WYSIWYG editor online or a local editor like Visual Studio Code or Sublime Text to write your HTML code. Design the email with the desired formatting, images, and styles.


2. Create a Google Sheet: Open Google Sheets and create a new spreadsheet or use an existing one. This sheet will be used to trigger the email and store any relevant data.

3. Install Form Mule Add-on: In Google Sheets, go to "Add-ons" > "Get add-ons" and search for "Form Mule." Click on "Install" to add the Form Mule add-on to your Google Sheets.

4. Set up Form Mule: Once Form Mule is installed, you can set it up to send emails based on a trigger. For example, you can set up the email to be sent when a new form response is submitted or based on a specific condition in your Google Sheet.

5. Insert HTML content into a cell: In your Google Sheet, select the cell where you want to include the HTML content of your email. You can paste the entire HTML code into that cell.

6. Configure Form Mule email settings: In the "Form Mule" sidebar, you'll have options to specify the recipient email addresses, subject line, email body, etc. For the "Email body," you can click on the cell icon and select the cell that contains your HTML code.

7. Insert placeholders (optional): If you want to personalize the emails, you can insert placeholders in your HTML code, as mentioned before. You can include placeholders like {{Name}}, {{Email}}, etc., in your HTML content, and Form Mule will replace them with actual data from your Google Sheet.

8. Test and send the email: Once everything is set up, you can test the email by triggering the process (either through a form submission or the specified trigger). If everything looks good, you can proceed to send the email to your recipients.

By following these steps, you can use Form Mule to send beautiful HTML emails from Google Sheets. Although Form Mule does not have an HTML editor, you can still include your HTML code within a cell in the Google Sheet and use that content to send the email.

Joseph Schmidt

unread,
Aug 3, 2023, 4:46:46 PM8/3/23
to nv-form-m...@googlegroups.com
Alex,

I'm still confused.  You can't reference a single cell in FormMule.  You could put the HTML in every row of a column but I don't think that is necessary.

Back to the original question.  If there are extra spaces in the results, try to modify the HTML to eliminate any line breaks.

I experimented with a little HTML and it worked for me by just pasting the code into the message box.  I have not found the need to be creative but now I know a little more how to do it should the need arise.

The following worked for me.  It picks up <<name>> from the sheet.

<p><span style="font-size:36px;">😁<<name>> is silly!</span></p><div data-oembed-url="https://www.google.com/url?sa=i&amp;url=https%3A%2F%2Fkids.nationalgeographic.com%2Fwacky-weekend%2Farticle%2Ffunny-animal-faces&amp;psig=AOvVaw3d7BTP1ichJpc89Dpxn1FP&amp;ust=1691179267740000&amp;source=images&amp;cd=vfe&amp;opi=89978449&amp;ved=0CBAQjRxqFwoTCKCAre-jwYADFQAAAAAdAAAAABAE">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; padding-top: 120px;"><iframe allowfullscreen="" src="//if-cdn.com/xyCneYk?app=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
<script async="" charset="utf-8" src="//if-cdn.com/embed.js"></script>
</div>

Alex Wilson Kho

unread,
Aug 4, 2023, 9:39:46 AM8/4/23
to nv-form-m...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages