2. Web Hosting & Domain
3. Install WordPress
4. Choose Your Theme
5. Get To Know WordPress
6. Design With Divi Builder
7. Divi Theme Builder Templates
8. Import & Export Layouts
9. Checklist: After Launch
10. Let's Celebrate!
You are a star!
6.9a Design a Contact page with Divi
- Your progress:
The contact page is one of the website’s most important pages. We’ll create:
- A hero area
- Protect your form from spam with Google Recaptcha V3
- Create a FAQ with tabs
- Embed a map from Google Maps without having to enter an API key or credit card
- Create responsive content and display different content for computers (desktops), tablets and mobiles
Additionally, we’ve implemented Google reCAPTCHA version 3 to protect the form from spam. I’ll guide you step-by-step on how to set up these elements.
Now, let’s get started with reusing some of the design elements from the “News” page you worked on in the previous chapter. We’ll keep the hero section and the sidebar, but we’ll replace the rest of the content. Follow along as I take you through the process.
1. Begin by accessing your development site.
2. Click on the “Contact Us” page in your menu.
3. Enable the visual builder to start building your content.
4. Select “Clone Existing Page” to save time. In this case, we’ll clone the “News” page.
5. Remove any elements from the cloned page that you won’t need. In this case, the blog feed should be removed, while the rest of the layout will be retained.
6. Change the background image in the hero section.
7. Modify the copy in the hero section, adjusting it to suit your “Contact Us” page.
8. Next, we’ll add contact information using blurbs, featuring icons to add visual appeal. You can choose which information to include, such as phone numbers, email addresses, street addresses, and links to maps and social media channels.
9. Create an FAQ section that allows visitors to expand or collapse the boxes to view answers to frequently asked questions.
10. Embed a map from Google Maps on your page, a process I’ll guide you through without requiring a Google account, Google API, or credit card information.
Let’s create a functional and stylish contact page that ensures a seamless user experience and encourages interaction with your website. You can customize and adapt these design elements to match your website’s unique style and branding.
All links, files and code snippets mentioned in the chapter is available below.
Resources & Related Content
- How to save and export Divi Contact Form submissions
- 7 tips for better Divi forms (blog post)
- How to style the checkbox link in Divi forms (blog post)
- View the live demo layout website
- 10% off Divi (affiliate link)
- 73% off SiteGround Web Hosting (affiliate link)
This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.
Feel free to ask questions and leave feedback on the tutorial here.