5 Unique Ways to Style Divi’s Contact Form Module

5 Email Opt-in Designs You Can Create with Divi’s Email Opt-in Module
July 30, 2016
How to Add Security Questions to WordPress Login Screen
August 1, 2016
Show all

Welcome to Day 62 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


The humble contact form is often a straight-forward even boring section on many websites. My goal with this post was to look for some lively design inspiration on various design showcase websites and Pinterest and see if I could then re-create what I found with Divi–adding some spice to a traditionally bland contact form area. Here are my results!

5 Unique Ways to Style the Divi Contact Form Module

Subscribe To Our Youtube Channel

The Default Contact Form Module

Before we get started, let’s take a look at what the Divi Contact Form Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

default-divi-contact-form

The default Divi contact form module.

1. Music/Fashion Form

fashion-ghost-divi-contact-form-1

The concept for this design is something that would look good on a musician’s website or perhaps a fashion website of some kind. This design requires two sections, one atop the other. Each section has one row and one module. The top section has an image module and the bottom section contains the contact form module.

fashion-ghost-divi-contact-form-backend

Section Settings:

fashion-ghost-divi-contact-form-section-settings-1

fashion-ghost-divi-contact-form-section-settings-2

In the general settings tab of your top section, add the image you’re using as your background. Then, scroll down and flip the “use parallax effect” switch; I chose to use the “true parallax” option. Below that, set the top padding to 0px.

fashion-ghost-divi-contact-form-section-settings-3

In the second (bottom) section, set the background color to #000000.

Row Settings:

fashion-ghost-divi-contact-form-row-settings-1

In the top row’s settings, under the General Settings Tab, flip the switch to “make this row fullwidth”. Then, flip the switch for “use custom gutter width” and set the gutter to 0. Add a top padding of 0px.

fashion-ghost-divi-contact-form-row-settings-2

In the bottom row’s settings, under the General Settings Tab, flip the switch next to “use custom width” and set it to 850px.

Image Module Settings:

fashion-ghost-divi-contact-form-image-module-settings-1

In the General Settings Tab, upload your image. Scroll down and flip the switch next to “remove space below the image”.

fashion-ghost-divi-contact-form-image-module-settings-2

In the Advanced Design Settings Tab flip the switches next to “force fullwidth” and “always center image on mobile”. Then add 0px to the top margin and -5px to the bottom margin.

Contact Form Module Settings:

fashion-ghost-divi-contact-form-settings-1

In the Advanced Design Settings Tab, set the form background color to fully transparent. Set the font to Playfair Display, all caps. Set the font size to 80. Then, set the title text color to #f0b43e.

fashion-ghost-divi-contact-form-settings-2

Next, scroll down and set the form field text color to #ffffff. Flip the switch next to “use border” and set the border color to #f0b43e with a width of 1px and a solid style. Then, flip the switch next to “use custom styles for button”.

fashion-ghost-divi-contact-form-settings-3

Set the button text size to 16, the button text color to #f0b43e, the button border width to 1, and the button border color to #f0b43e–with a radius of 1.

In the custom css tab, scroll down to the text box titled Main Element and place this css inside:

margin-top: -250px;
padding-bottom: 150px;

Then scroll down the box titled contact title and place this css inside:

text-align: center;
padding-bottom: 50px;

When you’re done, click “save and exit”, update the page, and enjoy your new contact form!

2. Color Bars Form

color-bars-divi-contact-form

My goal with this design was to create something fun and bright that could fit nicely on a personal authority website for a marketer. This design requires one section, one row, and one contact form module.

color-bars-divi-contact-form-backend

Section Settings:

color-bars-divi-contact-form-section-settings-1

In the General Settings Tab upload your section background image. I chose to use an image where I’d removed the background so I could experiment with various background colors. In the end I chose white (#ffffff).

Row Settings:

color-bars-divi-contact-form-row-settings-1

The General Settings Tab flip the switch next to “use custom width”. Set the custom width to 750px. Then, add 450px of padding the top and 200px of padding to the bottom.

Contact Form Module Settings:

color-bars-divi-contact-form-settings-1

In the General Settings Tab for the Name Field flip the switch next to “make fullwidth”. Then, in the Advanced Design Settings Tab set the background color to rgba(255,58,111,0.64).

color-bars-divi-contact-form-settings-2

Repeat the same steps in each of the field settings using different colors. I used this yellow rgba(234,204,32,0.71) and this green rgba(20,173,97,0.7).

color-bars-divi-contact-form-settings-3

In the Advanced Design Settings Tab for the whole contact form module, set the form field font to bold and call caps. Set its size to 15 and it’s color to #000000. Then, flip the switch next to “use custom styles for button”.

color-bars-divi-contact-form-settings-4

Set the button text size to 16 and it’s color to #ffffff. Set the button background color to #000000. Set the button font to bold and all caps.

In the custom css tab, scroll down to the box titled Main Element and enter this css:

margin-top: 75px;

In the box titled Contact Button, enter this css:

margin-top: 10px;

When you’re done click “save and exit”, update the page, and view your new contact form!

3. Envelope Form

envelope-divi-contact-form

The idea behind this design was an RSVP form that someone might create for an event website. This design consists of one section, with one row, and one contact form module.

envelope-divi-contact-form-backend

Section Settings:

envelope-divi-contact-form-section-settings-1

In the General Settings Tab set the background color to #98dbe2.

Row Settings:

envelope-divi-contact-form-row-settings-1

In the Advanced Design Settings Tab, upload your envelope image and add however much padding to the top as you need for the whole image to show. In my case that was 200px.

Contact Form Module Settings:

envelope-divi-contact-form-settings-1

In the Advanced Design Settings Tab, set the form background color to #ffffff. Set the title font to Permanent Marker and increase its size to 60. Set the title text color to #ffffff.

envelope-divi-contact-form-settings-2

Scroll down and flip the switch next to “use border”. Set the border color to #cccccc, set the width to 3px, and the style to solid. Then, flip the switch next to “use custom styles for button”.

envelope-divi-contact-form-settings-3

Set the button text color to #ffffff. Set the button background color to #a0a0a0. Make the button font bold and all caps.

In the custom css tab, scroll down to the text box titled Main Element and enter this css:

margin-top: 180px;
padding: 25px;

Then, scroll down to the box titled Contact Title and enter:

text-align: center;
margin-bottom: 200px;

When you’re done click the “save and exit button”, update the page, and view your new contact form!

4. Postcard Form

postcard-divi-contact-form

As a big fan of old sci-fi art I really like the idea of mixing new technology with vintage style. So for this example I wanted to create a vintage sci-fi post card contact form. This design consists of one section, one row with two columns, and one contact form module.

postcard-divi-contact-form-backend

Section Settings:

postcard-divi-contact-form-section-settings-1

In the General Settings Tab, upload your background image.

Row Settings:

postcard-divi-contact-form-row-settings-1

In the General Settings Tab, add 250px of padding to the top and bottom.

Contact Form Module Settings:

postcard-divi-contact-form-settings-1

In the Advanced Design Settings Tab, set the form background color to #fdf2d7. Set the title font to Roboto Condensed; bold, all caps. Set the title font size to 35. Set the title text color to #344044.

postcard-divi-contact-form-settings-2

Then, scroll down a bit and flip the switch next to “use custom styles for button”. Set the button text color to #344044 and the button background color to #e7c24a. Scroll down a bit further and change the button font to Roboto Condensed; bold, all caps.

In the custom css tab, in the text box titled Main Element, enter this css:

margin-right: -200px;
margin-left: 200px;
margin-top: -25px;

When you’re done click “save and exit”, update the page, and enjoy your new contact form!

5. Material Form

material-overlap-divi-contact-form

This design is based on a concept I saw mocked-up on Pinterest. I was curious to see if I could re-create it with Divi and it turned out pretty neat! This design consists of two sections, each with one row. The top row has two columns and four modules. Three text modules on the left and one contact form module on the right. The section below is populated with four text modules and a few divider modules for spacing.

material-overlap-divi-contact-form-backend

In the instructions below I’m going to focus on showing you how to achieve the overlap effect and the contact form styles since the rest are simple text modules.

Section Settings:

material-overlap-divi-contact-form-section-settings

In the General Settings Tab of the bottom section, set the color to #ff3b49. Then, it that section’s custom css tab, enter this css into the text box titled Main Element:

position: relative;
z-index: 0;

Row Settings:

material-overlap-divi-contact-form-row-settings

In the top row’s Advanced Design Settings Tab add -200px to the bottom margin.

Contact Form Module Settings:

material-overlap-divi-contact-form-settings-1

In the Advanced Design Settings Tab set the form background color to #ffffff. Set the title font to size 16; bold, all caps. Then, scroll down and flip the switch next to “use border”.

material-overlap-divi-contact-form-settings-2

Set the border color to #ff3b49, its width to 1px, and style to solid. The, flip the switch next to “use custom styles for button”.

material-overlap-divi-contact-form-settings-3

Set the button text size to 16. Set the button text color to #ffffff. Set the button background color to #ff3b49. Set the button font to bold and all caps.

In the custom css tab enter the following css into the text box titled Main Element:

padding: 40px;
box-shadow: 0 0 20px rgba(0,0,0,.1);
margin-bottom: -200px;
background: #ffffff !important;
position: relative !important;
z-index: 1;

When done click “save and exit”, update the page, and enjoy your new overlapping, material style contact form!

Tomorrow: Download the Free Resume Pages Layout Pack

Divi 100 is rolling right through the 60’s with another week of awesome Divi tutorials and freebies. Tomorrow we’ve got a new layout pack featuring cv/resume style pages. Don’t miss it!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by Dmitry Lemon5ky / shutterstock.com

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 62

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Unique Ways to Style Divi’s Contact Form Module appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar