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.
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.
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.
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.
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.
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.
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.