Contact Form 7 Layout Builder

Create the most complicated and advanced Contact Form 7 layouts without any coding skills, using the drag-n-drop form markup builder

Click Add Field button to add a new field to the form.
Drag and drop the existing fields to create more rows. Drag the fields to the right to specify the layout of each row.
Set the Gutter to apply between rows and fields, and the mobile breakpoint value.
Copy the HTML code to the clipboard. You need to paste it in the Form block of the contact form, which layout you want to edit.
Change the default label text for each of the fields using the corresponding shortcodes of Contact Form 7.
Switch to CSS and copy the code to clipboard. You need to paste it in Appearance > Customize > Advanced CSS field.
Feel free to use the newly created and styled contact form!

CF7 Field: {{ currentWidth( item.w ) }}

HTML

CSS

Gutter (px):

Mobile breakpoint (px):

Copied!

Unable to copy. Please, select and copy manually.

{{ resultHTML }}

{{ resultCSS }}

This tool is 100% free and was created
by Crocoblock dev team.

You can buy a cup of coffee for the development team as a thank you