4. Next copy the shortcode generated by Contact Form 7 and paste it in the page, post or widget where you want to display your form.

Registration

Name

Email

Address

City

Phone Number

Message

For our example form above, we’ll organize the first five fields into beautifully styled single line form fields using CF7 Skins Ready singleline.

Arrange your form elements on single line

We want to arrange the first five fields as shown below:

Add Singleline class to your form fields

Let’s start with the first row, i.e. the Name & Email fields.

We need to assign the singleline Ready class to the appropriate LIST-OL items. You can do this in one of two ways:

A. Use the dropdown menu to the right of the element

Click on the dropdown menu to the right of the LIST-OL element.

Click Ready Class to see a list of options. From the available list, choose singleline (your desired Ready class).

Tip: Ready classes which are not permitted on a particular element are automatically disabled.

B. Use the edit dialog box

Click the edit icon on the LIST-OL element.

Then, check the Ready class you want from the dialog box that appears in the sidebar.

Tip: Wherever you work, changes will appear instantly in both locations.

Now, you can repeat this process for the second row, i.e. for the Address, City, and Phone Number fields.

That’s it, you are all done. Now, just press the Save Visual button. Here is the final form you should have in the CF7 Skins Visual Editor:

Final Layout

After you’ve completed the form, the form elements under the same LIST-OL which has the singleline class will appear in the same line. You can see the final results below.

Registration

Name

Email

Address

City

Phone Number

Message

Note: On a mobile device, the fields may appear stacked on top of each other and not side by side. This is because CF7 Skins has responsive design, which makes contact forms easy to use and better-looking in mobile and handheld devices.

Tip: Fields within singleline are automatically evenly spaced by CF7 Skins Ready. If you want more control over individual field widths you should use the grid Ready Class.