How to Create a Form with Static Instructions Per Page

Overview

Would you like to create a multi-page form with static instructions for each page? Using AJAX and a little CSS you can easily create this type of layout for your form and in this tutorial, we’ll walk you through step-by-step on how to create this!

Setup

First, create a new form or edit an existing form.

Once inside your form builder, make sure to click Enable AJAX form submission checkbox under Settings » General. You’ll be using AJAX on this form so the page doesn’t fully reload with each page of the form.

Under the Settings General tab, enable AJAX on the form to allow for the static instructions when switching from page to page

1) Setting up the HTML/Code Block

Next, you’ll need to add an HTML/Code Block to your form.

This block will need to be added first before any other form fields for each page of your form.

Adding the HTML block to your form will allow you to enter your static instructions on the left and the form fields will sit on the right

Here’s an example of what we added in our HTML/Code Block form field.

<h3>Personal Details</h3>
<p>For this section, we'll need to gather some personal information such as name, address, a contact phone number, email.  You will also be able to select your contact preference so when the application is being processed, we may contact you to clarify any further information needed to complete the application.</p>
<h3>More Information</h3>
<p>You can add as many details here as you'd like per page.</p>

We’ll also need to add some CSS classes to this form field as well.

This allows us to easily style any text in this section. But also, we’ll be adding the WPForms CSS class to create the two-column.

Adding these CSS classes will allow us to set up each page in a 2 column layout with our instructions always on the left

The CSS classes that were added are wpforms-one-half wpforms-first static. This essentially sets up our first page as a two-column layout with the static instructions in the first column using the CSS class name of wpforms-one-half wpforms-first.

For more information on the WPForms columns, please review this tutorial.

If the form fields on the right column will be longer than the instructions in the left column, we’ll need to place a min-height CSS rule on this side of the form which is why we added the CSS class of static but it also helps us to be able to style any of the text we place on this side of the form.

2) Setting up the other form fields

Once you’ve added your HTML/Code Block first for your static instructions, you can now begin adding the other form fields you want for the first page. For this tutorial, we’re going to add a Name field, Email field, and a Phone field before adding the first-page break.

Each of these form fields that you’ll add will need the CSS class wpforms-one-half added so they will on stay on the right of the form.

Add the other form fields to the first page with the CSS class wpforms-one-half

It’s also important to note, inside Advanced Options, we’ve also set each field to have the Field Size of Large size.

Set each form field to use the Large Field Size

3) Adding the Page Break

Once you’ve added these form fields, you’ll need to separate the pages with a Page Break.

Now it's time to add the first page break.

Optionally, you can edit the Advanced Options of the Page Break and turn on the Disable Scroll Animation if you’d like to disable the pages scrolling to the top.

For this tutorial, we've disabled the scroll animation when going from one page to another.

Once you’ve completed this step, you’ll need to complete Steps 1 through Step 3 for each page you want your form to have. When you’ve added all the pages your form needs, you can proceed to the next step.

3) Adding the CSS

It’s now time to add the CSS we needed to style the text in the instructions section, we’re also going to add a min-height on this section to make sure it balances out our form nicely.

.static {
    min-height: 450px;
}

.static h3 {
    margin: 20px 0 !important;
}

.static p {
	margin: 5px 0 !important;
}

We’ve added this CSS to the WordPress Customizer but you can add your CSS anywhere in your theme if you have a dedicated place for this.

For other ways to add custom CSS to your site, please see this tutorial.

Now your form will have a static instruction column on the left and all your form fields on the right for each form.

And that’s it! You’ve now created a form with static instructions on the left and your form fields on the right for each page of your form. Would you like to also display all of the completed fields of your form inside your confirmation message? Take a look at our tutorial on How to Show All Fields in Your Confirmation Message.