Week 10: Website Design

by | Nov 10, 2025 | Website Design Class

Contact Page & Forms

How to design a functional contact page, create and customize forms in Divi, and ensure messages are delivered correctly.

Scripture

Jeremiah 33:3 (HCSB) – “Call to Me and I will answer you and tell you great and incomprehensible things you do not know.”
 → Tie-in: Just as God invites us to reach out to Him and promises to respond, a website’s contact page invites visitors to connect and opens the door for communication.

Website Structure Basics

Review week 9
  • Did you add at least one CTA to each page you’ve built so far?

  • Did you test your buttons and links?

Have a few students show examples of their CTA placement and wording.

Purpose of a Contact Page
  • Why it matters:

    1. Provides a simple way for visitors to reach out.

    2. Builds trust and credibility.

    3. Can be a point of lead generation.

  • Key elements to include:

    1. Short, welcoming message.

    2. Contact form.

    3. Alternative contact info (email, phone, social links).

Map or location (if relevant).

Creating a Contact Form in Divi
  • Live demo:

    1. Create a new page called “Contact.”

    2. Add a Contact Form module.

    3. Add form fields (Name, Email, Message).

    4. Adjust field labels, placeholders, and required settings.

    5. Configure email notifications so form submissions go to the right address.

Add a confirmation message or redirect after submission.

Styling the Contact Page
  • Adjust button styles, colors, and fonts to match the site’s design.

  • Add a background image, pattern, or color block for visual interest.

  • Use spacing and alignment for readability.

Optional: Embed a Google Map if the website has a physical location.

Class Activity – Build & Test Your Contact Page
  • Students:

    1. Build their Contact page with a functional form.

    2. Add any alternative contact info.

    3. Test the form by sending themselves a message.

Teacher circulates to help troubleshoot and verify submissions.

Homework

Homework:

  1. Finalize your Contact page design and make sure your form works.

  2. Add a link to your Contact page in both your primary and footer menus.

Take screenshots of your Contact page for your project portfolio.