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!
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.
- 1 Downloading & Using The Free Divi Contact Page Layout Pack
- 2 Subscribe To Download For Free
- 3 Download For Free
- 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 5 5 Stylish Contact Pages
- 6 Contact Page 01
- 7 Contact Page 02
- 8 Contact Page 03
- 9 Contact Page 04
- 10 Contact Page 05
- 11 Tomorrow: WordCamp Orange County Recap
- 12 Divi 100 Day 41
- 13 The Countdown To Divi 3.0
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.
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.
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.
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.
Contact Page 05
Finally we have our fifth design which is the simplest iteration of the bunch. Simple, but effective.
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 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.
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
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.
Love this. For the background images did you use a gradient overlay? There was no transparent background chosen.
Sounds like you are missing the API for Google MAPS.
More info here:
http://www.elegantthemes.com/gallery/divi/documentation/map/
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.
How do you make the phone number hyerlinkable?
Where can I change the button text?
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
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.
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.
I can’t find the Import/Export button. I only have the Manage Categories. please help
Never mind it worked now I had to click on the 2nd folder wich is different to the Mac folder.
Never mind it worked.
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.
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 ?).
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.
I hope i will see in this 100 days marathon, a new comment style instead of the default one
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
Beautiful!
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
thanks for sharing this idea ..
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..)
Wow awesome.
I like the design.
So simple that did not need to download anything , just look and repeat the steps in the Divi Builder!
Love this maraton!!! All the tips and freebies! Can’t wait to have DIVI 3.0. Cheers!
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.
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 🙁
Thanks, how about also making a template without the map?
You can remove the map module…
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
This isn’t a plugin. It is a pack of layouts that you can import into the DIVI library for the DIVI Builder.
Brent
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!
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.
Is there a way to add / change the contact form? What if I want to collect the phone number and email address?
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.
Contact form 7
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.
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!
Ohhhh yes! Been waiting for this 🙂 Thanks!
Ready to test!!
Thanks!!
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.
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?
My provider found that something in the Firewall should be whitelisted.
Thank you for posting your solution.
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.
Gorgeous design, as usual 🙂
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!
Nice, thanks!
Those are great contact pages! Thanks!
Thanks a lot. Divi simply rocks. Can’t wait to Divi’s 3.0 arrive
Nice look.
Thank You
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?
I like the last one which says “Have a Project or Idea…..”. Simple and yet effective. Will implement for one of my sites.
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?
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.
Cool thoughts teri. A solution could be to work with preview images, as it is dissolved on the theme-selection page in wp.
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.. ?
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
Great work.
What about privacy check at the bottom of this forms?
Many thanks.
Roberto Buratti