Adding a form data preview page

There is nothing built into Quform to make a form data preview page, but it is possible to do it with custom development. You might need a developer for further customization but this page will outline the basics for a simple form with three fields: Name, Email and a Select Menu.

Add an HTML element to the last page of the form. In the settings for it, at the HTML option add your own HTML for the form data review, but instead of the field values put an empty span tag with a unique ID, for example:

1
2
3
4

<h2>Submission review</h2>
<p>Name: <span id="name-value"></span></p>
<p>Email address: <span id="email-value"></span></p>
<p>Select menu value: <span id="select-value"></span></p>

<h2>Submission review</h2>
<p>Name: <span id="name-value"></span></p>
<p>Email address: <span id="email-value"></span></p>
<p>Select menu value: <span id="select-value"></span></p>

Save the form, then go to Forms → Settings → Custom CSS & JS, at the Custom JavaScript field add the following code.

1
234
5
67
8
9
1011
12
13

jQuery(function ($) {
    $('.quform-input-1_3 input').blur(function () {        $('#name-value').text($('.quform-field-1_3_2').val() + ' ' + $('.quform-field-1_3_4').val());    });
 
    $('.quform-field-1_4').blur(function () {        $('#email-value').text($(this).val());
    });
 
    $('.quform-field-1_5').change(function () {        $('#select-value').text($(this).val());
    });
});

jQuery(function ($) {
    $('.quform-input-1_3 input').blur(function () {
        $('#name-value').text($('.quform-field-1_3_2').val() + ' ' + $('.quform-field-1_3_4').val());
    });

    $('.quform-field-1_4').blur(function () {
        $('#email-value').text($(this).val());
    });

    $('.quform-field-1_5').change(function () {
        $('#select-value').text($(this).val());
    });
});

• On lines 2 and 3, replace the three occurrences of 1_3 Name element unique ID
• On line 6, replace 1_4 with the Email element unique ID
• On line 10, replace 1_5 with the Select Menu element unique ID

You can add more fields and code to suit your form, other field types might need slightly different code to get the value. The code above for the Email element (1_4) will also work for Text, Textarea, Email and Password elements.

Checkboxes

HTML

1

<p>Checkboxes value: <span id="checkboxes-value"></span></p>

<p>Checkboxes value: <span id="checkboxes-value"></span></p>

JavaScript

12
3
45
6
7
8
9

$('.quform-field-1_6').click(function () {    var checked = [];
 
    $('.quform-field-1_6:checked').each(function () {        checked.push($(this).closest('.quform-option').find('.quform-option-text').text());
    });
 
    $('#checkboxes-value').text(checked.join(', '));
});

$('.quform-field-1_6').click(function () {
    var checked = [];

    $('.quform-field-1_6:checked').each(function () {
        checked.push($(this).closest('.quform-option').find('.quform-option-text').text());
    });

    $('#checkboxes-value').text(checked.join(', '));
});

• On lines 1 and 4, replace 1_6 with the Checkboxes element unique ID

Radio Buttons

HTML

1

<p>Radio value: <span id="radio-value"></span></p>

<p>Radio value: <span id="radio-value"></span></p>

JavaScript

12
3

$('.quform-field-1_7').click(function () {    $('#radio-value').text($(this).closest('.quform-option').find('.quform-option-text').text());
});

$('.quform-field-1_7').click(function () {
    $('#radio-value').text($(this).closest('.quform-option').find('.quform-option-text').text());
});

• On line 1, replace 1_7 with the Radio Buttons element unique ID