Writing Custom HTML for Email Content and PDF Templates

This article outlines some of the variables that are helpful when developing email content and PDF templates.

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.
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.
Field Date Formatted `#field_date_format(id, format)`	Return a field formatted according to the PHP date function. This variable can only be used in client-side.
Field Label `#field_label(id)`	Returns the field label by ID.
Field Value `#field(id, delimiter, column)`	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. If delimiter specified, fields with multiple values (e.g. checkboxes) will be separated by the specified delimiter. If column is specified it will return the value found in that data grid column. The value of column can be the column label or index (starting with 0).
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.

Setting Up Send Email Actions to Use Custom HTML

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