10. Let's Celebrate!

Nu firar vi!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:

The “Contact Us” page holds a vital place on your website, serving as a critical channel for clients and potential customers to reach out to you. It’s important to keep this page user-friendly and uncluttered to ensure you don’t miss out on leads. We’ve crafted a sleek “Contact Us” page that features a minimalistic contact form created using the Divi module. In this form, users must agree to your privacy policy by checking a checkbox before they can send their message, and we’ve thoughtfully included a direct link to the privacy policy.

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.

As for the contact form, we’ll build a beautiful and minimalistic one using the Divi builder’s Contact Form module. This form will feature fields for name, email, a dropdown for categories, a message field, and a mandatory checkbox for agreeing to your privacy policy. The form will also provide a link to your privacy policy and use Google reCAPTCHA version 3 for spam protection. We’ll explore each of these steps in detail.

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.

 

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.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo