Writing Custom HTML for Emails

WS Form comes with a default template for sending emails, but this can be fully customized using your own HTML. This article outlines some of the variables that are helpful when developing HTML email templates.

Settings

We recommend setting the ‘Message Editor’ to ‘HTML’ in the ‘Send Email‘ action. This will ensure any custom HTML you enter is not adjusted by the WordPress visual editor.

WS Form - Send Email - Use HTML Editor

Adding Field Values

The #field(id) variable is used to add field values to your email templates. Although not necessary, you can also use #field_label(id) to dynamically add labels for each field value.

Example

<p><strong>#field_label(1)</strong><br />#field(1)</p>

<p><strong>#field_label(2)</strong><br />#field(2)</p>

In this example #field_label(1) is replaced with the label of the field with ID 1, and the value of the field in inserted with #field(1).

Conditionally Showing Field Values

Sometimes you may only wish to show a field value if it contains a value. To do this, you can use the #if(condition) and #endif variables.

Example

#if(#field(1))
<p><strong>#field_label(1)</strong><br />#field(1)</p>
#endif

#if(#field(2))
<p><strong>#field_label(2)</strong><br />#field(2)</p>
#endif

In this example, WS Form checks to see if the field with ID 1 has content. If it does, it shows the content between the #if(#field(1)) and #endif variables. This functionality is then repeated for the field with ID 2.

Repeatable Sections

If a field is in a repeatable section, #field(id) will return the field values for each row in a comma separated list, for example:

Red,Green,Blue

You can also output custom HTML for each row by using the #section_rows_start(id) and #section_rows_end variables.

Example

<table>

  <thead>

    <tr>
      <th width="20">#</th>
      <th>#field_label(1)</th>
      <th>#field_label(2)</th>
    </tr>

  </thead>

  <tbody>

#section_rows_start(10)
    <tr>
      <th>#section_row_number</th>
      <td>#field(1)</td>
      <td>#field(2)</td>
    </tr>
#section_rows_end

  </tbody>

</table>

In this example, the HTML between #section_rows_start(10) and #section_rows_end is repeated for each row added to the repeatable section having ID 10. The HTML can contain any of the field values contained within that repeatable section.

The #section_row_number variable adds the number of the corresponding row. An example of the output from this HTML is shown below.

WS Form - Send Email - Repeatable Sections

You can combine this with the #if(condition) and #endif variables too.

Variables

Some of of the commonly used WS Form variable that are used in email templates are shown below:

Email
Field
Section
Tab

Email

Name / Variable	Additional Information
Character set `#email_charset`	For more information about this variable, click here. This variable can only be used in the Send Email action.
Content type `#email_content_type`	For more information about this variable, click here. This variable can only be used in the Send Email action.
E-Commerce Values `#email_ecommerce`	This variable outputs a list of the e-commerce transaction details such as total, transaction ID and status fields. For more information about this variable, click here. This variable can only be used in the Send Email action.
Logo `#email_logo`	For more information about this variable, click here. This variable can only be used in the Send Email action.
Pixel `#email_pixel`	Outputs a transparent gif. We use this to avoid Mac Mail going into dark mode when viewing emails.
Subject `#email_subject`	For more information about this variable, click here. This variable can only be used in the Send Email action.
Submitted Fields `#email_submission(tab_labels, section_labels, field_labels, blank_fields, static_fields)`	This variable outputs a list of the fields captured during a submission. You can either use: `#email_submission` or provide additional parameters to toggle tab labels, section labels, blank fields and static fields (such as text or HTML areas of your form). Specify 'true' or 'false' for each parameter, for example: `#email_submission(true, true, false, true, true)` For more information about this variable, click here. This variable can only be used in the Send Email action.
Tracking data `#email_tracking`	For more information about this variable, click here. This variable can only be used in the Send Email action.

Field

Name / Variable	Additional Information
Field Date Adjusted by Offset in Seconds `#field_date_offset(id, seconds_offset, format)`	Return a date adjusted by an offset in seconds. This variable can only be used in client-side.
Field Label `#field_label(id)`	Returns the field label by ID.
Field Value `#field(id)`	Use this variable to insert the value of a field on your form. For example: `#field(123)` where '123' is the field ID shown in the layout editor.
Field Value as Floating Point Number `#field_float(id)`	Use this variable to insert the value of a field on your form as a floating point number. For example: `#field(123)` where '123' is the field ID shown in the layout editor. This can be used to convert prices to floating point numbers. An example output might be: 123.45

Section

Name / Variable	Additional Information
Section Label `#section_label(id)`	Returns the section label by ID.
Section Row Count `#section_row_count(id)`	This variable returns the total number of rows in a repeatable section.
Section Row Index `#section_row_index`	This variable returns the row index in a repeatable section.
Section Row Number `#section_row_number`	This variable returns the row number in a repeatable section.

Tab

Name / Variable	Additional Information
Tab Label `#tab_label(id)`	Returns the tab label by ID.