Free contact form layouts for Divi Page Builder
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.
Great work, thanks Olga.
Thanks, Rob. I hope you get a good use out of them.
These are beautiful. You are a true inspiration Olga!
Thank you, Ania. I can say the same about you, I love your work. Thank you for checking out my post and leaving a comment.
Thank you – I like all of them 😀
That’s nice to hear. Yep – get them all 🙂
Excelent job Olga,
Thank you, Luis.
Good job, thanks for sharing these!
These are so nice, Olga! Thank you for sharing them!
Thank you, Carey. I am so glad you like them.
Awesome layouts Olga. Will be using one on my own website re-design project 🙂
Thanks for sharing
That’s awesome. Would love to see your re-design.
Thanks great options here
Thank you, Eduardo. There are more things coming.
Love this, thanks so much!!!!! Already using it now! 🙂
Oh wow, that’s exciting. Thank you. 🙂
Thanks so much. Ready to use it on my site.
These are lovely Olga! Thanks for sharing them! I was feeling uninspired, but thanks to you, I’ve got a a great new contact form for my client!
Thanks Olga,
Well done
Thanks for sharing them!
Great job. nd thanks for sharing.
Downloaded all of them.
Thank you, Olga. Great designs. I am using contact form one on our website. It’s not quite looking the way to should. I’ve played around with the padding and nothing seems to help. Any suggestions?
https://www.edcns.ca/about/contact-us/
YOU ARE THE BEST . THANKS
Thank you this helps saves so much time with divi forms as they tend to be too basic.
Muchas gracias!!!
Great contact form layouts! Thanks
Thanks
Just found here what i was looking