Divi Cake Blog

tips, tricks, tutorials, exclusive offers & more

One of the advantages of Divi is the amount of free layouts that are available from both Elegant Themes and the Divi community. Free layouts are great for providing a place to start your designs and can save a ton of development time. Some layouts are complete website while other focus on a single page – including contact pages. In this article we’ll take a look at 5 free Divi contact page layouts.

Several of these layouts include multiple designs to choose from. The layouts are in no particular order. Stick around until the end to see a bonus – an article on how to style the contact form five different ways, which is a great choice if you don’t want to use your own page for your contact form.

1. The DTS Contact Page

The DTS Contact Page includes a full-width background image, a three-column section (divided into ½, ¼, ¼) with a map, address and phone number, and text, followed by a contact form. It even has some custom CSS for the map height and a custom section background that makes the contact form overlap two sections. I like the large typography and clean design that makes the contact form stand apart.

More Information | Demo

2. Divi Contact Page Layout Pack

Divi Contact Page Layout Pack is a layout pack from Elegant Themes that includes five contact form page designs. Page 1 is a classic style with image, about information, contact form, contact info, and map. Page 2 removes the contact form and adds a new section with text on one side and contact information on the other. Page 3 provides the contact information over the background image followed by a full-screen map. Page 4 includes a smaller contact form with the contact info and map. Page 5 provides another take on placing the contact info on the background image and also includes a map.

More Information

3. Free Contact Form Layouts

Free Contact Form Layouts is a set of four different layouts. The first has a business look with two columns that displays the contact info in one side and the contact form overlapping in the other. The second and third displays an image in the left side and the contact form the same size as the image (rather than overlapping). The fourth uses a full-width image with a contact form that overlaps a portion of the image. I like the way the overlapping forms pop off of the page.

More Information | Demo 1 | Demo 2 | Demo 3 | Demo 4

4. Creative Child Themes Freebies

Creative Child Themes Freebies is a package that comes with two pages and 14 sections, which includes two contact forms. The first is a gradient form with two columns. The left column includes an action statement as text over a gradient background while the right column provides the contact form. The second contact form is a split section with a blurb on the left side with all of the contact information and a form on the right. Both sections include form elements that match the colors of the left side. They’re clean and elegant.

More Information | Demo 1 | Demo 2

5. Divi Layout RIO 2016 Contact Page

Divi Layout RIO 2016 Contact Page was created to honor Team GB’s success at the Rio 2016 Olympics. The header displays a full-width image with text in an overlay. Following this a full-width map in monochrome that doesn’t scroll when you mouse over it (my favorite setting for a map). Next is a contact section that includes all of the needed contact information and a styled contact form that overlaps two sections with a CSS section separator. The layout is based on Rio colors, but can easily be changed to fit your own styling. I like the section separator that strikes through the contact form.

More Information | Demo

Bonus: 5 Unique Ways to Style Divi’s Contact Form Module

5 Unique Ways to Style Divi’s Contact Form Module is an article from day 62 of the Divi 100 at Elegant Themes. The first style was designed for music and fashion, and places the form over the bottom of an image. The second style shows how to make each of the sections of the form a different colored bar. The third style builds a form out of an envelope. The fourth style places the form over a post card (this is my favorite). The fifth style is a material form which follows material design concepts and includes an overlapping form. The article takes you step by step through styling the contact form for each of the styles.

More Information

Ending Thoughts

These 5 free Divi contact page layouts and tutorial on styling your own contact form are great choices for getting your contact page  up and running quickly. It’s amazing what’s available for free for Divi. Download them today!

We want to hear from you. Which of these 5 free Divi contact page layouts is your favorite? Let us know in the comments.

Subscribe today for the latest themes, layouts, and plugins!

No spam ever. Only occasional sales and updates.

Pin It on Pinterest

Shares