Free contact form layouts for Divi Page Builder

by | Divi Freebie

I recently changed the layout of the contact form on my site. While making the changes I experimented with a few designs and I am excited to share with you 4 Divi Contact Form layouts. Feel free to download them and use them as you wish. They can be used to create a contact page or as a contact section on the one-page website. Here we go…

Contact Form One

I used a section with the 2 column layout. The first column has a background image and a combination of text module and CTA modules. The second column has text and contact form modules. In the second column, I set negative margin for top and bottom and applied css to create a shadow effect. All css code saved in the row advanced settings.

This is what it looks like.

Contact Form Two

This layout is similar to the first, but in this one the row design settings for “Equalize Column Heights” set to “yes” and the background has a contrasting colour to the background in the columns.

This is what it looks like.

Photo used in the layout by Andrew Branch on Unsplash

Contact Form Three

For this layout, I used a section with 2 columns and in the row design settings I set:

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 1
Equalize Column Heights: Yes

The padding for the second column is adjusted so the text and contact form are in the right place on the page.

This is what it looks like.

Photo used in the layout by Lionel Gustave on Unsplash

Contact Form Four

This layout also uses 2-column row structure. The image is added as a background image in the section. The contact form added to the second column (there is nothing in the first column). The second column has custom css code added in the Row Advanced settings to set negative margin for top and bottom, to make the column stretch “over” the section borders. The css for box shadow applied to make the form look like it’s floating above the image.

This is what it looks like.

Photo used in the layout by Adam Grabek on Unsplash

How to install these layouts on your Divi site

To upload the layout to your site follow these steps:

Download the layout you like (or all if you want) and save it on your computer. The file you downloaded will be compressed (zipped). You will need to “unzip” it before uploading it to your site.

Login to your site and navigate to Divi > Divi Library. In the Divi Library at the top click the button “Import/Export”. In the pop-up window, go to the “Import” section > click on “Choose file” and find downloaded and unzipped contactform.json file on your computer, click “Open”.

With the .json file uploaded to the library, you can go to the page where the contact form with be added.

All Contact Form layouts saved as a section, except the Contact form Four (that one has more than one section, so it is saved as a page layout).

How to add the layout saved as a section (Contact Form One, Two and Three)

Open the page and add the new section (anywhere under existing section). Click on “Add from Library” and choose one of the contact forms section from the library.

How to add the layout saved as a page (Contact Form Four)

The Contact Form Four is saved as a page layout. To add this layout to your page go to the top of the page in the “Divi Page Builder” click the button “Load From Library” > “Add from Library” > Find the Contact Four layout and click “Load’ button.

If you want to add this layout as a section to existing page make sure that you take out the green tick for “Replace the existing content with loaded layout”. The Contact Form Four layout will be uploaded at the top of the page and you can drag it to the right place.

That’s it – now you can preview the page and if everything looks good – save it.

Pin It on Pinterest