Contact form 7 plugin

With help of Contact Form 7 you can create any form you need. You can do the following:

• come up with any form layout,
• add any field type to your form,
• enter custom text into form fields,
• set any text for thanking messages.

NOTE: For creating a form minimal HTML knowledge is welcome.

Creating a form

Before creating a form make sure that Contact Form 7 plugin was installed and activated according to ‘Theme installation’ tutorial.

Begin creating a form:

• Go to Contact >Add New on the left panel of your admin dashboard
• Enter the title of the form
• Under the ‘Form’ tab below you will see default form layout. You can customize it or clear the field and add form fields from the upper tools panel.
• Configure additional settings under ‘Mail’ and ‘Messages’ tabs.
• When you are done, hit ‘Save’ button.

Custom form layout. Making columns

If you think that default form layout is too simple, you can create custom layout with different columns, like in Seosight demo or other.

In order to create a form with several columns, you need to wrap your field shortcode into HTML <div></div> tags with bootstrap grid classes inside them.

NOTE: More information on bootstrap grid you will find in this tutorial.

Adding form fields

First of all add <div></div> tags with bootstrap classes, put the cursor between them and add the required field from the top

panel.

In the popped up window fill in ‘Name’ and ‘Default value’ fields. On-demand check ‘ Use this text as the placeholder of the field’ and ‘Required field’ checkboxes.

Hit ‘Insert tag’ button and continue adding fields by analogy.

IMPORTANT: If you want to add a form with square border on one side, like the one on the image below, you need to enter classes inline-first and inline-last into ‘Class Attribute’ field.

Field labels

The above information describes the way to add form fields with placeholders. If you want your fields to have labels instead, you should wrap field shortcodes into <label></label> tags as in the example below.

Required fields

If you want to make form fields required as shown in the form above, you need to do the following:

• add a star sybmol after the label name with  tags like that ^*
• add class=”checked-icon” into the opening <label> tag like that <label class=”checked-icon”>

‘Submit’ button

Once you’ve added all form fields, add Submit button shortcode without any HTML tags.

If you want to have a custom layout for the Submit section, for example, like on Seosight contact page, HTML formatting is required.

TIP: All contact forms used in Seosight demo are included in demo import. You can use them as a basis for your own forms.

Adding form to the page and further configuration

When the form is ready, add it to your page via ‘Contact Form 7’ shortcode in King Composer editor.

Switch to ‘Styling’ tab and choose:

• colorscheme of your form
• color of the submit button

You can configure further options under Box Style, Input and Button tabs.

When you are done, save settings and view the form on page.