Elegant Themes Blog

Stay up to date with our most recent news and updates

Download The Free Divi Contact Pages Layout Pack

Posted on July 11, 2016 by in Divi Resources | 68 comments

Download The Free Divi Contact Pages Layout Pack

Welcome to Day 42 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!


divi-contact-page-layout-pack-01

Today we’ve got a great freebie for you in the shape of our new Divi Contact Page Layout Pack. Contact pages are easy to get lazy on. Everyone has them and yet not everyone gives them the design love and attention they deserve. This layout pack will help you jumpstart an above average contact page on any Divi website.

Downloading & Using The Free Divi Contact Page Layout Pack

To use the Free Divi Contact Page Layout Pack on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-contact-page-layout-pack.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.

When the portability modal pops up go to the import tab. Click the “choose file” button and select either the All.json file in your recently unzipped folder or any one of the individual Contact Page Layouts. Once your desired json file has been selected click the blue “Import Divi Builder Layout” button and wait for the import to complete.

Once the import has finished you will now have the ability to load these contact page layouts on any builder powered page or post by going to Load From Library > Add From Library.

Subscribe To Download For Free

5 Stylish Contact Pages

In this layout pack we’ve got five fantastic contact page layouts perfect for any website. All you need is a bit of imagination and your unique content to make them all your own.

Contact Page 01

Our first contact page layout is along the lines of what many would consider a “classic” contact page design. It’s got all the usual elements–all the way down to a map and of course the contact form itself.

divi-contact-page-layout-pack-01

divi-contact-page-layout-pack-01_01

Contact Page 02

As you’ll see throughout these designs, not all contact pages call for contact forms. In fact, sometimes, a simple email address or phone number is preferable. If that’s the case for you then you might like to start you contact page design with this layout.

divi-contact-page-layout-pack-02

divi-contact-page-layout-pack-02_02

Contact Page 03

In this design we take the previous design and simplify as much as possible, eliminating the whole middle section and re-arranging the content accordingly.

divi-contact-page-layout-pack-03

divi-contact-page-layout-pack-03_03

Contact Page 04

In this design we bring back the classic design elements of contact pages from the first design and re-arrange them for variety.

divi-contact-page-layout-pack-04

divi-contact-page-layout-pack-04_04

Contact Page 05

Finally we have our fifth design which is the simplest iteration of the bunch. Simple, but effective.

divi-contact-page-layout-pack-05

divi-contact-page-layout-pack-05_05

Tomorrow: WordCamp Orange County Recap

If you’ve been following along with our social feeds or the various Divi facebook groups then you’ll know that over the weekend a fairly large group of us met up at WordCamp Orange County and had a complete blast. Tomorrow we’ll be sharing an event recap with lots of behind the scenes detail on everything we got up to.

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

divi-2-6-logo

Divi 100 Day 41

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


download divi

68 Comments

  1. Great work.
    What about privacy check at the bottom of this forms?
    Many thanks.
    Roberto Buratti

  2. I love all these layouts and videos. Wondering if there is/will be a master file that shows the layout options/library. It is hard from within divi to have any idea what #1, #2 ,#3…. for any of these packs do. And I find I keep going back and forth between WP and Your website to try to remember/decipher.

    I am sure this will all be easier to understand with the actual release of the new divi. In the meantime is there a cheatsheet somewhere?

    • exactly what i was thinking.. i miss layout previews generally when in DIVI it would be great to see what the pages look like instead of testing them all

    • I was thinking exactly like Teri who commented above.. i miss having layout previews in DIVI.
      It would be great to see what the pages look like instead of testing them all.
      Like even the print screens you have in the post could be included in the downloadable folder at least as a basic.. ?

    • Cool thoughts teri. A solution could be to work with preview images, as it is dissolved on the theme-selection page in wp.

    • I would recommend to setup a demoinstallation only for this reason; its also a playground for other groups of demos or plugins (eg. divisoup et al), and if i need a special design i can view fast in the BE for the number, or even export it (if i have altered it in anyway) and reimport in customer wp.

  3. I like the last one which says “Have a Project or Idea…..”. Simple and yet effective. Will implement for one of my sites.

  4. Contact page vs relationship marketing. If we have a customer looking to connect with us on different topics it seems like a great place for automated response marketing. It should of course trigger the human side of the relationship but the initial response seems like something that should be automated, or should as the site owner, manager, etc. grows in skills. Can this be done with these forms?

  5. Nice look.
    Thank You

  6. Thanks a lot. Divi simply rocks. Can’t wait to Divi’s 3.0 arrive

  7. Those are great contact pages! Thanks!

  8. Nice, thanks!

  9. Are these blogs about the 100 Days of Divi going to be on your site forever, or will they be coming down after Divi 3.0 launches? Love everything you have been sharing. Thank you! Divi has changed everything for me in my web design biz.

    • They have never removed any blog articles yet that I have ever noticed and I understand from previous replies by ET staff to similar questions these posts will remain available for as long as Divi is with us!

  10. Gorgeous design, as usual 🙂

  11. I would really try to add this pack to my Divi library, but I cannot import it. It just stops after 50%, and all I can do is cancel the import. The same problem occurs with almost all the other layout packs as well (at another %). What can I do to make it work?

    • I already disabled all my plugins, raised memory_limit, upload_max_filesize and max_size to 256M and max_execution_time to 600 and I am still not able to add most of the packs to my Divi library.

    • My provider found that something in the Firewall should be whitelisted.

      • Thank you for posting your solution.

  12. Thanks! Love the design sense Divi embodies. Now we just need a powerful form builder plugin that can be easily modified and made as “elegant” as Divi.

  13. Ready to test!!
    Thanks!!

  14. Ohhhh yes! Been waiting for this 🙂 Thanks!

  15. I love coming here every day to see what is new, especially on Monday and Wednesday. Keep up the good work, you guys are rockin these layouts, so many great design ideas.

    Maybe I have been too focused on having the map of my location at the very top and creating a “normal” layout so visitors could easily contact me. However, it may be better to “set the mood” using the image at the top to motivate the visitor to contact me. This type of layout at least deserves some testing, which I will do right away.

    Thanks again for the great layouts and ideas!

  16. Is there a way to add / change the contact form? What if I want to collect the phone number and email address?

    • For a while you have been able to edit the contact module and add additional form fields so yes you can do what you ask.

    • Contact form 7

    • We’ve had some great success with Caldera-forms. Not to take away from ET, Caldera-forms has some really nice options such as Attach a CSV in the Sent email. Responsive, and if you’re up to it – Calculations. *Boom! I know, what a Form Builder.

      • I miss radio buttons in the ET contact form and other “gadgets” that come standard in third party contact plugins. I use Caldera as well which is great.

  17. Thanks for this plugin. I love Divi. However, I was unable to install – I got this install fail message

    Installing Plugin from uploaded file: divi-100-contact-page-layout-pack.zip
    Unpacking the package…

    Installing the plugin…

    The package could not be installed. No valid plugins were found.

    Plugin install failed.

    Return to Plugins page

    • It is not a plugin – watch the video above to see how to install by importing the JSON file into the Divi Library – you must first unzip the downloaded file.

    • Hi Michelle,

      I am afraid that you made it in a wrong way, this cannot be done via Plugin way, you can watch the video again or follow the below steps:

      1.( Let’s imagine that you have downloaded this layout pack to your computer) Go to DashBoard, click on “Divi”.

      2. Click on “Divi Library” then click on “Import/Export”

      4. Click on “Import” Then click on “Choose File”

      4. Click the above file you choosed, then click on “Import Divi Builder Layouts”.

      Hopefully the above will be some of help to you.

      • thank you!

      • thank you!

    • This isn’t a plugin. It is a pack of layouts that you can import into the DIVI library for the DIVI Builder.

      Brent

  18. Thanks, how about also making a template without the map?

    • You can remove the map module…

  19. How do you managed to have the map in grays?

    • Gray filter option in map module.

      • I don’t see this option in my module 🙁

  20. I would really try to add this pack to my Divi library, but I cannot import it.
    I do not find the “import & Export” button at the top of the page, the only button shown is the “export” Button. therefore i Have no acces to portability modal.
    What am I doing wrong? Thanks

    • Update to Divi 2.7.8 (latest version) and it should appear for you 🙂

      • Hi Katie, your solution is working just fine, thank you very much for your help.

  21. Love this maraton!!! All the tips and freebies! Can’t wait to have DIVI 3.0. Cheers!

  22. So simple that did not need to download anything , just look and repeat the steps in the Divi Builder!

  23. Wow awesome.
    I like the design.

  24. Great layouts but I would just be careful with your NAP citation from an SEO point of view. Instead of saying ‘our office’ and then just contact details, first start with your business name e.g. ‘My Business Name’ then ‘Address, Phone, Email etc..)

  25. thanks for sharing this idea ..

  26. Hi,

    I am getting the same problem as others with this particular pack. It will not import with the error message “This file should not be imported in this context”.

    As I have just uploaded two other of the plugins, is there a problem with this one? (The point being, yes, I know how to do this)

    I have tried both individual and “All” – they give the same errors.

    Hoping for a helpful answer – not “well I managed it ok one.

    Many thanks

    Richard

  27. OK embarrassingly I have solved my own problem – but this might help some of the other ones who got the same message.

    Disk space was full due to back ups. Cleared the space and everything worked smoothly.

    It might help someone make less of an idiot of themselves than I just did.

    Best wishes

    Richard

  28. I hope i will see in this 100 days marathon, a new comment style instead of the default one

  29. I have downloaded the contact form layouts. How do I use them for my site. I am using Divi on one of my business site but don’t have an idea how to customize it.

    Thanks in advance.

  30. Looks good. It would be awesome to have also a Privacy check , as Roberto Buratti already wrote, and a way to upload an attachment (Cv ?).

  31. It seems like the layout pack is for a mac what about windows users? I have unzipped but getting “This file should not be imported in this context”
    tried installing it as plugin but failed.

  32. Never mind it worked.

  33. Never mind it worked now I had to click on the 2nd folder wich is different to the Mac folder.

  34. I can’t find the Import/Export button. I only have the Manage Categories. please help

  35. This is awesome! I love all the layout packs. I definitely can get a bit repetitive with my contact page layouts so this is much appreciated.

  36. I am using the Contact Page 1 but for some reason the form is not sending the text form to my email. I run several test on the form and it seems like the form is not working.

    Any advice or suggestion.

  37. I used Contact Page 1….but when I run a test on the website I am not receiving any email from the website form. Please help

  38. Where can I change the button text?

  39. I like contact us page 3 but it would be awesome to have an option to add files too. I want to use this contact us for career page.

  40. Hi, using layout 4, I got an error when loading the map:
    Oops! Something went wrong.
    This page didn’t load Google Maps correctly. See the JavaScript console for technical details
    Any help ?

  41. Love this. For the background images did you use a gradient overlay? There was no transparent background chosen.

  42. What are the two header fonts used? They are set to default. I would like to use these fonts on the rest of my website.

  43. Hi there,

    I instaled a contact page, which came with my DIVI theme, but I can seems to work a map!
    I got my IPA code from Google maps, jet when I enter “city” and click FIND, nothing is happening… A map is not showing up at all. I live in Irvine, CA, but still have San Francisco on my contact page. Spent 3 day on it already, but can figure it out!
    At one point I was getting msg. that I need to check my Java Scrips, but JS is already instaled on my PC. Please, please HELP!

    Thank you,
    Radka

Join 385,236 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This