• Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Log In
  • Get Easy Forms
  • Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Log In
  • Get Easy Forms
home/Knowledge Base/How To/How to Review All Answers Before Submit a Form?
Popular Search:Getting Started

How to Review All Answers Before Submit a Form?

1544 views 5 August 15, 2020 admin

Yes! If your form has multiple pages and you want people to be able to review their answers before submitting, you can use the Rule Builder to effectively create a summary page at the end of your form.

With this feature, you can:

  • Prevent incomplete or incorrect submissions
  • Gather the most accurate data possible for research surveys and feedback forms
  • Confirm items and payment details for order forms
  • Let students review their answers on quizzes and evaluation forms
  • Verify submission information for registration and application forms
  • And more!

How to Review Before Submit with Easy Forms

For this use case, we just need to follow two steps:

1. Create a Multi-Step Form with the Form Builder
2. Let users preview their form submissions with the Rule Builder

It’s very easy and fully customizable.

1. Create a Multi-Step Form with the Form Builder

For this example, we are going to create a Donation form.

  1. Go to Forms > Create Form
  2. Change the title to “Donation Form”
  3. Remove the paragraph
  4. Add a Text Field. Change the Label to “First Name” and check “Required”
  5. Add a Text Field. Change the Label to “Last Name” and check “Required”
  6. Add an Email Field. Change the Label to “Email” and check “Required”
  7. Add a Number Field. Change the Label to “Amount ($)” and check “Required”
  8. Add a Text Area. Change the Label to “Your Comments”
  9. Add a Page Break and change the Form Steps to “Donation” and “Review & Submit”
  10. Add a Snippet with the following HTML code: <div id="review"> </div>
  11. Add a Submit Button
  12. Click Save Form

The key part is the HTML snippet, that DIV with ID: review will be the container of the dynamic content that will be generated by Rule Builder.

Your Form Builder should looks like this screenshot.

Easy Forms - Form Builder - Donation Form

2. Let users preview their form submissions with the Rule Builder

Now we are going to use the tool to manipulate text within the Form. This tool will merge fields and HTML code, replacing placeholders.

Steps:

  1. Go to Forms > Actions > Conditional Rules
  2. Click Add Rule
  3. In Name / Description enter: Let users preview their form submissions
  4. Click “Add action“
  5. Select “Format Text“
  6. From: “Field” and select all the fields.
  7. To: “Element” and enter the DIV id as a jquery selector: #review
  8. As: Enter the following HTML code that will be displayed as preview
<table class="table table-hover">
  <thead>
    <tr>
      <th colspan="2">Please review your responses to ensure that all of the information is correct:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Name</th>
      <td>{{text_1}}</td>
    </tr>
    <tr>
      <th>Last Name</th>
      <td>{{text_2}}</td>
    </tr>
    <tr>
      <th>Email</th>
      <td>{{email_1}}</td>
    </tr>
    <tr>
      <th>Amount ($)</th>
      <td>{{number_1}}</td>
    </tr>
    <tr>
      <th>Your comments</th>
      <td>{{textarea_1}}</td>
    </tr>
  </tbody>
</table>

This is just a table, but pay attention to the placeholders, for example {{text_1}} refers to the id of the “First Name” field. Each placeholder will be replaced by its field value.

9. Click the Green Button to save the rule.

The Rule Builder should looks like this screenshot.

Easy Forms - Rule Builder - Donation Form

And that’s all!

Additional Step: Custom Confirmation Message with Merge Fields

To give it a personal touch, we are going to add a custom confirmation message to display the Donor’s name. For this, go to Form Settings > Confirmation Settings > Click “Only Message” > And enter the following message:

<h4>Dear {{ text_1 }} {{ text_2 }}, <strong>your support is invaluable to us!</strong></h4>
<p><small>If you have specific questions about our mission be sure to visit our website or reach out to [email protected]!</small></p>
<p><small>Sincerely,<br>Jane</small></p>

Easy Forms - Form Settings - Confirmation Message

Note: You can use the Theme designer or CSS code to give it a better look and feel to the confirmation message.

Now your form should looks like this:

Was this helpful?

5 Yes  1 No
Related Articles
  • How to enable/disable the autofocus on the first field
  • How to Set Current Date in Date Field
  • How to Show/Hide HTML elements with Conditional Rules
  • How to Embed the Same Form Multiple Times on the Same Page?
  • How to Submit a Form as WhatsApp Message
  • How to Create Multi-Page Forms to Increase Conversions: Survey Funnel

Didn't find your answer? Contact Us

Leave A Comment Cancel reply

You must be logged in to post a comment.

How To
  • How to Review All Answers Before Submit a Form?
  • How to enable/disable the autofocus on the first field
  • How to Set Current Date in Date Field
  • How to Show/Hide HTML elements with Conditional Rules
  • How to Embed the Same Form Multiple Times on the Same Page?
  • How to Submit a Form as WhatsApp Message
View All 24  
Popular Articles
  • How to Show/Hide HTML elements with Conditional Rules
  • How to enable / disable DEBUG mode
  • How to Submit a Form as WhatsApp Message
  • How to update Form Stats from the command line
  • How to compare two fields to pass the validation (jQuery Validation)
KB Categories
  • Add-Ons
  • Advanced Techniques
  • Common Issues & Troubleshooting
  • Developers "How To's"
  • Getting Started
  • How To

  How to Set Current Date in Date Field

How to remove the red border from “required” fields on Firefox?  

About Easy Forms

With Easy Forms you can create unlimited web forms and most importantly the complete management of them without paying monthly fees

Resources
  • Knowledge Base
  • Documentation
  • Pre-sales Questions
  • Blog
Useful Help Links
  • Get Easy Forms
  • Live Demo
  • License Terms
  • Contact Us
Frequent Visit Links
  • Pre-Sales Questions
  • System Requirements
  • Installing Easy Forms
  • Upgrading Easy Forms
  • Privacy Policy
  • © 2015 - 2024 Baluart EIRL. All Rights Reserved.

Popular Search:Getting Started