How to Create a Form with Static Instructions

Introduction

Would you like to create a form with static instructions? 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 achieve this!

Creating the form

First, we’re going to begin by creating a new form.

Once inside your form builder, make sure to click Enable AJAX form submission checkbox under Settings » General » Advanced. 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

If you need any help with creating a form, please check out this documentation.

Adding the HTML form field

Next, you’ll need to add an HTML form field to your form that will hold the static instructions.

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

<h3>Personal Details</h3>

<p>For this section, we'll need to gather some personal information such as name, address, 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>

<p>If you have any questions on this form at all, please contact your account liaison directly at [email protected] or call us directly at 1(800)867-5309</p></div><h3>Personal Details</h3>

<p>For this section, we'll need to gather some personal information such as name, address, 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>

<p>If you have any questions on this form at all, please contact your account liaison directly at [email protected] or call us directly at 1(800)867-5309</p></div>

add the HTML form field and add your HTML for your instructions

Since we want our static instructions on the left and our form fields on the right, we’re going to use the WPForms built-in columns for CSS.

If you need help in creating a multi-column form, please check out this documentation.

For the purpose of this documentation, we’re only creating a two-column layout. With the HTML field selected, click the Advanced tab.

In the CSS Classes, copy and paste this CSS.

wpforms-one-half wpforms-first

This essentially sets up our first column of our two-column layout.

Adding the remaining form fields

Once you’ve added your HTML form field first for your static instructions, you can now begin adding the other form fields you want for the form.

For each field you add, you’ll click on the Advanced tab and set the Field Size to Large and in the CSS Classes field, copy and paste this CSS.

wpforms-first

each field added should have the Field Size set to Large and the wpforms-first CSS Class

Adding Page Breaks (optional)

If you want to break up the form with the Page Break form field, you can easily do this, but you’ll need to follow the steps above exactly for each page. Starting with adding the HTML form field with the correct CSS class and the subsequent form fields with setting the Field Size and the CSS Classes.

If you need help with setting up page breaks on your form, you can always review this documentation.

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.

If you need help with how and where to add custom CSS, please review this tutorial.

#wpforms-1055-field_1 {
    min-height: 450px;
}

#wpforms-1055-field_1 h3 {
    font-size: 24px;
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

#wpforms-1055-field_1 p {
    margin: 20px 0;
}

This CSS is based on the form ID of 1055 and the field ID for the HTML form field of 1.

You’ll need to update these two numbers in your CSS to match that of your own form and field ID. If you need help finding these IDs, please check out 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.