Expanding form

This guide will show you how to create a form that you can split into sections that can be expanded by clicking a button. Each section is defined by a “Group” element, and at the end of each Group we will add a “HTML” element that will contain a button to show the next group. We will use JavaScript that you will need to add to your page to handle the showing of the sections.

Demo

Step 1

Add a Group element to the form. Drag the “Start group” part to before the form element that will start the second section of the form and drag the “End group” part to after the form element that will be last in this section.

Step 2

In the Group settings, Advanced tab, add a new style for “Group wrapper” and enter this CSS.

1

display: none;

display: none;

Step 3

Add a new “HTML” element to the form and add the code below.

1

<a href="#" id="show-section-2">Next step</a>

<a href="#" id="show-section-2">Next step</a>

Step 4

Find the unique ID of the Group you added in Step 1. You can find this by going to the Advanced tab of the settings, see Finding the unique element ID.

Step 5

In the global form styles at Settings → Style, add a new style for “Submit button outer wrapper” and enter this CSS.

1

display: none;

display: none;

Step 6

Add the following JavaScript to your page. You can do this by adding a “HTML” element to the form and wrapping the code in the tags <script type="text/javascript"> </script>.

1
2
3
456
7
8

jQuery(function ($) {
    $('#show-section-2').click(function () {
        $(this).remove();
        $('.iphorm_1_5-group-wrap').slideDown();        $('.iphorm-submit-wrap-1').show();        return false;
    });
});

jQuery(function ($) {
    $('#show-section-2').click(function () {
        $(this).remove();
        $('.iphorm_1_5-group-wrap').slideDown();
        $('.iphorm-submit-wrap-1').show();
        return false;
    });
});

• On line 4, replace iphorm_1_5 with the unique ID of the Group obtained in Step 4.
• On line 5, replace the number 1 in iphorm-submit-wrap-1 with your form unique ID.

Adding another section

To add another section, repeat steps 1-4 above. In Step 3 give the link to show the next section the attribute id="show-section-3 instead.

1
2
3
45
6
7
8
9
101112
13
14

jQuery(function ($) {
    $('#show-section-2').click(function () {
        $(this).remove();
        $('.iphorm_1_5-group-wrap').slideDown();        return false;
    });
 
    $('#show-section-3').click(function () {
        $(this).remove();
        $('.iphorm_1_10-group-wrap').slideDown();        $('.iphorm-submit-wrap-1').show();        return false;
    });
});

jQuery(function ($) {
    $('#show-section-2').click(function () {
        $(this).remove();
        $('.iphorm_1_5-group-wrap').slideDown();
        return false;
    });

    $('#show-section-3').click(function () {
        $(this).remove();
        $('.iphorm_1_10-group-wrap').slideDown();
        $('.iphorm-submit-wrap-1').show();
        return false;
    });
});

Modify the JavaScript code as follows.

• On line 4, replace iphorm_1_5 with the unique ID of the Group obtained in Step 4.
• On line 10, replace iphorm_1_10 with the unique ID of the new Group.
• On line 11, note that the line to show the submit button has moved here from line 5 in the first code example.

Repeat this process to add further sections.