5 Unique Ways to Style Divi’s Contact Form Module

Posted on July 31, 2016 by in Divi Resources | 92 comments

5 Unique Ways to Style Divi’s Contact Form Module

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

Learn More About Divi 3.0


92 Comments

  1. Super inspiring blog post showing off the many possibilities with divi, creativity and just a dash of css. Thank you for the thorough walk-thru’s 🙂

  2. Thanks alot Nathan!
    I tried the last one, but my contact form is not overlapping..

    • Nathan B. Weller

      Try adding some negative margin to the top row in its advanced design settings tab.

      • Aah thanks that worked!

        • Love the postcard one the most. Question is…looks great on computer but what if someone views on mobile? Will it still align properly? (I believe it was set using Custom CSS)

          • Nathan B. Weller

            Hey Alain, thanks. In each instance above you’ll need to figure out your own responsive settings. The goal of this post was to get people rolling in the right direction and spark new ideas. We don’t always have the time to make each tutorial fully responsive, especially when doing five in one post and taking into account that those settings will have variations one a per-site basis anyway. However, for future posts I am considering doing just one of these per post/video (instead of three or five) and going into more detail on each one.

      • Hey, Nathan!

        On the overlapping contact form, the bottom part is moving upwards while hovering over the submit button when it’s doing its hover animation.

        Is there any way I could get rid of that?

  3. Nathan, that was really cool! Great tutorial! Love it! The video is pretty important to make it even easier to understand, and the written tutorial reinforces that.

    Thank you so much!

    • Nathan B. Weller

      No problem Elisamdro, glad you enjoyed it 🙂

  4. You know this stuff just gets better! Thanks so much Nathan

  5. Is it okay to use the inages provided in the divi 100 titorials in our websites?

    • Nathan B. Weller

      No these images are from shutterstock and not free to use outside of these blog posts. That’s why these tutorials do not include any kind of download–the elements are not ours to freely give away.

  6. I used to use contact form 7 before you weren`t able to change the input fields of the contact module inside the divi builder. Now that you can change it i don`t even install contact form 7 anymore.

    Thanks a lot Nathan!

  7. Thanks, nice!

    But’s a pity that we still cannot change the text of the SEND button in an easy way.

    Keep going!

    • I agree. I hop DIVI 3.0 address the contact form more with added features.

  8. First comment here in my first year of using Divi. This article is really, really helpful. By using forms, you explain tons of other Divi design and settings possibilities. Thank you for this post.

  9. WOW – great inspiration an tutorials!
    Thank you so much for your awesome work 🙂

  10. wow! love the creativity and graphics!

  11. Very cool! Thank you 😀

  12. Love these tutorials! To use Divi to its full potential it is important to be fairly fluent in CSS. I’ve been very frustrated on more than one occasion trying to change something, spending hours scouring the ticket forum looking for answers and trying various CSS solutions suggested by support.

    Unless you know CSS and when to use “important!” and other tags, it can get quite frustrating to modify a Divi theme. Although, the same can be said of most other themes.

    These tutorials and struggling with my own designs is a lesson of learning CSS by hard knocks university. That is why I have a love-hate relationship with Divi… but am determined to get proficient enough in CSS to just have a Love relationship with Divi!

    • Nathan B. Weller

      Hey Bob, you’re right, there are probably always going to be some customizations you can only make with CSS. That said, we are always trying to bring the right customizations into our design settings panels to minimize those instances. It’s a process!

  13. How to make radio buttons in the form?

  14. Thanks – like the examples and food for thought

  15. sadly there is NO download link for all of these beautiful page options.

    • Nathan B. Weller

      Hey James, that’s because the elements used in these are not free for us to give away. Also, in this instance the goal of the post was to education, not necessarily give away a free download. In some cases, as with a recent post by Melissa Love, we do give away a download with our tutorial–but it doesn’t work out for every one.

  16. I LOVE THESE TUTORIALS!!!

    • Nathan B. Weller

      I LOVE THAT YOU LOVE THESE TUTORIALS!!! LOL, thanks for stopping by Crystal.

  17. Great looking styles, but my client base uses GetResponse.

    In fact half of them stopped using Mailchimp because of the changes Mailchimp has made lately.

    Maybe you can tell this to the powers to be so they could add GetResponse and this tutorial would mean more to us.

  18. I need add a checkbox in contact form Module.

    • I did ask the same, I think; radiobuttons. But we don’t get an answer here… Why are we skipped????

  19. I, too, love these tutorials.

    But, I am NOT conversant with CSS and coding. So, I CAN copy what you say and do it, but I would like to know WHAT I’m doing and what the change is doing. In that way, I can learn the CONCEPT, not just recreate an output.

    Can you guys do that? Or at least give us a place to go to read all that outside of the tutorial space. I think that kind of learning would benefit all of us newbies.

    Thanks, and keep up the good work.

    • Nathan B. Weller

      Hey Randy, that is definitely something we can do. The catch at the moment is that we’ve been doing these 5-in-1 or 3-in-1 tutorial posts. There’s simply not enough time to explain all of these styles fully in a single post. On the other hand, we could drop down to just one design per post and go into more detail. We’ll try to find the right balance.

      • I say, “keep it simple”. That’s why I purchased Divi.

  20. These are excellent, very creative examples of the contact form.

    Number 5 is my favorite – very clean and professional.

    Thank you!

    Eugene

  21. I love this tutorial, totally different from traditional contact form. Look forward to have contact form like this soon.

    Thanks again

  22. These are great and very inspirational but what about the ‘thank you text’?

    By default it seems to be dark and thus, on a dark background invisible unless the sender is directed to a specific ‘thankyou’ page

    I think it would be a great idea to have a straightforward setting to allow ‘thankyou’ message color changes.

    Can anyone tell me how to change this please?

    Thanks a stack.

    Stuart

    • Nathan B. Weller

      Hi Stuart, that would be a nice addition to our Advanced Design Options. In the meantime here is what you can add to the page settings css panel:

      .et-pb-contact-message p {
      color: #000000;
      }

      Obviously you can change the color code to suite your needs.

      • Hi Nathan, thanks for that and all the tips – they’re really appreciated. Keep it up.

  23. Is the photo of the female model saved as a png? What settings did you use to keep the file size small?

  24. I cannot see any links to download the snippets mentioned in the video, what am I missing?
    Maybe the member login isn’t working… nothing changes after doing I log in.

    • Nathan B. Weller

      Hi John, I think there is a misunderstanding. The snippets are in the post. You can copy and paste them where indicated. This post contains no downloads.

  25. Oh wow, so many amazing new ideas! I need to get working on mine now 🙂

  26. Nice! Beautiful & creative examples of what can be achieved with Divi 🙂
    Excellent work ET!

  27. Whoa! Awesome contact form modules once again Elegantthemes!

  28. I would like to suggest to connect Contact Forms with Mailchimp.

    • Nathan B. Weller

      Thanks for the suggestion, we’re always looking for new ways to improve our modules.

  29. Bravo! Very Inspiring! Great colors, ideas and layout!
    This countdown should never end!!
    Congratulations!!

  30. Another greatness from you, guys! 🙂
    I actually wondered how to make the submit button as wide, as the whole form… or at least move the captcha to the very left side and make the submit button fill the remaining space. Can you share how to do that?

  31. Great tutorial. One of the best so far during the 100 days of Divi. Would love to see something similar using Gravity Forms.

  32. Sweet concepts and advice on how to implement! Inspiring designs too. Loving the 100 days of Divi. Thanks for all the extras! (Wondering if we’ll ever see GetResponse directly integrated with Divi? So much easier than tying in Bloom.)

  33. and where are those contact form layouts to download??

  34. Some great ideas here Nathan. I am loving this countdown to divi 3.

  35. Hi, can I use the image in the second “Color Bars Form”? If yes, can you give me the link? Thanks 🙂

    • Nathan B. Weller

      No unfortunately that image is not free for us to give away. It’s from shutterstock.

  36. Hi Nathan,
    Can you please tell me what are the dimensions of the full width images?
    I’m a bit new to this and seem to be having challenges making sure that the background images show up as intended, without being enlarged or cropping etc.
    I’m really enjoying Divi, the community and these awesome tutorials.

  37. These videos and the posted materials are wonderful. Rich in content and utterly clear in presentation, including the CSS snippets. And I’m not even a designer … Many excellent ideas and suggestions too.

    Thanks so much for exemplary How To tuition.

    All the best and look forward to following the other 36 days of the Divi Countdown.

  38. Thanks for your great posts.
    Is there a way to change the Submit button text? Not the only the style but also the Text – Similar to how it can be changed in the Opt-In module

    Thank you.

    • That is my question, also. I use Divi for German customers and it’s weird to have a website in German and not be able to change the button text.
      Is there any solution for this problem?
      Thanks and greets,
      Dan

  39. Thanks for the cool syle contact form.
    Why on the form, you do not add more field types, such as radio-buttons, dropdown field, url, tel, sms, checkboxes, file upload tool, and others?

    We require many other types of fields, which may be provided by Elegantthemes.

    Thank you for your answer

  40. Great information here for custom styles. Everyday Divi just seems more elastic.
    Are there any plans to extend the functionality of the Contact Form module? I always end up using other plugins (e.g. Contact Form 7), which I then have to custom style with custom CSS to match Divi. One thing I have noticed is that some of these forms are not super-responsive. I am secretly hoping that Divi is working on an extended-function Contact Form – am I building castles in the air?

  41. Great inspiration, one of my pet hates is boring contact forms but often the goal of the page is conversion and the design is often overlooked by the design and development teams.

    But may I ask, can the divi built in contact form be easily integrated with any of the popular WordPress contact form/CRM plug-ins?

  42. Great and useful post, i wonder that those theme works for any CMS…

    Thanks for sharing

  43. Hey Nathan thanks for this great article

    I’ve got a problem… i am building a landing page right now.

    The contact form is build with the material form tutorial.

    The problem is, in firefox and ie 11 is no overlap effect. In all other browsers it works perfect. Can anyone help me…

  44. Loved this tutorial! I did the “material form” and it worked great, but when I revisited the site a week or so later, it was no longer overlapping.

    Has anyone else had this happen? *The same code is still in place* and no other changes were made to the site. But no more overlapping contact form.

    • *** Resolved*** (I put “!important” after the negative margin-bottom code)

  45. Where you get this vintage sci-fi picture. I like it how it is 🙂

  46. This is a great tutorial, thanks! I just wondered if there is a way to style the contact form so that the input field titles appear above the input fields?

  47. Hi all, I come late.

    My question is : is it possible to make the contact form overlap a fullwidth map ?

    I tried but does not work.

    Thanks for help.

  48. Hi.
    I’m trying to display a 1px black line at the bottom of each form field (name, adress, email…).

    I use bottom-border: solid 1px #000 but the black line extends to the left, underlining the padding space. I wish to limit the underlining border to the field only.

  49. I can’t get the last form to overlap. I tried entering a negative 200 in the top margin in the top row. It isn’t working. Can you help?

  50. Hi! How can we add additional response fields in the form or other functions (e.g. check boxes)? Thanks!

  51. Great post. How can we make the submit button 100% of the form. I’ve tries all sorts of css combos without success.

    Any Ideas?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest