Create a Form SummaryPRO

On a long form you may wish to add a summary / review of the fields the user has completed. There are two ways to create a summary in WS Form.

1. Automatically create a summary by using the Summary field type.
2. Custom code a summary using your own markup in an HTML field.

In this tutorial, we explain how to create a summary using both of these methods.

Demo

Automatically Create a Summary

To create a summary automatically, you can use the Summary field. Simply drag and drop (or click) the Summary field onto your form. The Summary field can be configured to:

• Show and hide form, tab and section labels.
• Create multi-column layouts.
• Exclude certain fields.
• Create tables for repeatable sections.

Learn how to configure the Summary field

Custom Code a Summary

You can also use an HTML field to insert a summary into your form. To make this process easier, you can automatically create some base markup to work with by clicking the Insert Form Summary HTML button.

The #field variable is used to insert the value of a field. This is wrapped in the #text variable which tells WS Form to keep the field value updated in the HTML field whenever the value changes.

An example of this syntax is: #text(#field(123))

An example of this added to an HTML field is shown below:

A working example of this is shown below:

The #text field can also be used in text editor, message or even the default value of fields such as text, phone or email.

You can combine these variables with regular HTML code to style and format the output as you wish.

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))
<dl class="wsf-summary-field-wrapper"><dt class="wsf-summary-field-label">#field_label(1)</dt><dd class="wsf-summary-field-value">#text(#field(1))</dd></dl>
#endif

#if(#field(2))
<dl class="wsf-summary-field-wrapper"><dt class="wsf-summary-field-label">#field_label(2)</dt><dd class="wsf-summary-field-value">#text(#field(2))</dd></dl>
#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.

Please note that the classes in these examples are optional and intended for use with the WS Form Styler for the purpose of styling a summary field.

Repeatable Sections

You can also create a summary of fields contained within a repeatable section.

Example code to do this is shown below:

<h3 id="wsf-summary-section-label-123" class="wsf-summary-section-label">My Repeatable Section</h3>

<table role="table" aria-labelledby="wsf-summary-section-label-123">

  <thead>

    <tr>
      <th scope="col">#</th>
      <th scope="col">#field_label(1)</th>
      <th scope="col">#field_label(2)</th>
    </tr>

  </thead>

  <tbody>

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

  </tbody>

</table>

In this example, we are outputting a simple HTML table. The rows in the table are wrapped in #section_rows_start(section_id) and #section_rows_end. WS Form then repeats the HTML contained within for each row in the repeatable section that has an ID of 10. The variable #section_row_number outputs the row number.

Styling Summaries

To style a summary that uses the WS Form markup and classes:

1. Click Style at the top of the layout editor.
2. Click on Field Types.
3. Click on Summary.
4. Edit the style.
5. Click the Save icon at the top of the Styler.

Keyword: preview