Back to Unit 6

Unit 6 Website Development - Tutorial 4

4.3 Build a Contact Form

First add the HTML in small steps. Then style the form afterwards using small CSS chunks.

How To Use This Tutorial

Work through each step in order. Add the code shown, check the expected output, then move to the next step. The final code is visible at the bottom so you can compare your finished work.

Steps

  1. Create the project files
  2. Add the basic HTML page structure
  3. Link the external CSS file
  4. Add the main area HTML
  5. Add the form section HTML
  6. Add the form heading HTML
  7. Add the form introduction HTML
  8. Add the form tag HTML
  9. Add the full name field HTML
  10. Add the email field HTML
  11. Add the subject field HTML
  12. Add the message field HTML
  13. Add the submit button HTML
  14. Style the body
  15. Centre the form inside main
  16. Add height and padding to main
  17. Style the form section box
  18. Style the form heading
  19. Style the form introduction
  20. Make the form use flex
  21. Style the labels
  22. Style the inputs and textarea
  23. Style the textarea
  24. Style the button
  25. Add the button hover effect
Step 1

Step 1 Create the project files

Where to put this code Create these files inside a new project folder. This step is not typed into the HTML file.

Code

contact-form
|
|-- index.html
`-- style.css

What this does

  • contact-form is the project folder.
  • index.html will contain the webpage structure.
  • style.css will contain the CSS styling rules.

Expected output

No webpage output yet. You have only created the files.
Step 2

Step 2 Add the basic HTML page structure

Where to put this code Add this code into index.html. This creates the starting HTML page.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
</head>

<body>

</body>
</html>

What this does

  • DOCTYPE html tells the browser this is an HTML5 webpage.
  • head stores information about the webpage.
  • body is where the visible webpage content will go.

Expected output

The page is blank because no visible content has been added yet.
Step 3

Step 3 Link the external CSS file

Where to put this code Replace the current head section in index.html with this updated head section.

Code

<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

  • link connects the HTML file to another file.
  • rel tells the browser the linked file is a stylesheet.
  • href tells the browser the name of the CSS file.

Expected output

The page is still blank because there is no visible content yet.
Step 4

Step 4 Add the main area HTML

Where to put this code Add the main tag inside the body tag in index.html.

Code

<main>

</main>

What this does

  • main creates the main content area.
  • main will hold the contact form section.

Expected output

The main area is empty, so there is still no visible content yet.
Step 5

Step 5 Add the form section HTML

Where to put this code Add the section tag inside the main tag in index.html.

Code

<section class="form-section">

</section>

What this does

  • section creates a separate section inside main.
  • class gives the section a name so CSS can style it later.
  • form-section is the class name used for the form container.

Expected output

The form section is empty, so there is still no visible text.
Step 6

Step 6 Add the form heading HTML

Where to put this code Add the h1 tag inside the form-section section.

Code

<h1>Contact Us</h1>

What this does

  • h1 creates the main heading inside the form section.
  • Contact Us is the heading text shown above the form.

Expected output

Contact Us

Step 7

Step 7 Add the form introduction HTML

Where to put this code Add the p tag inside the form-section section, under the h1 tag.

Code

<p>Complete the form below and we will get back to you soon.</p>

What this does

  • p creates paragraph text inside the form section.
  • Introduction text explains what the form is for.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 8

Step 8 Add the form tag HTML

Where to put this code Add the form tag inside the form-section section, under the paragraph.

Code

<form>

</form>

What this does

  • form creates an area for input fields and a submit button.
  • form will contain the labels, inputs, message box and button.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 9

Step 9 Add the full name field HTML

Where to put this code Add this code inside the form tag.

Code

<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name">

What this does

  • label adds text that tells the user what to type.
  • for connects the label to the input with the matching id.
  • input creates a field where the user can type.
  • placeholder shows hint text inside the input field.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 10

Step 10 Add the email field HTML

Where to put this code Add this code inside the form tag, under the full name input.

Code

<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email address">

What this does

  • label adds text for the email field.
  • type uses email so the browser understands this field should contain an email address.
  • id connects the input to the matching label.
  • name gives the field a name for form data.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 11

Step 11 Add the subject field HTML

Where to put this code Add this code inside the form tag, under the email input.

Code

<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Enter a subject">

What this does

  • label adds text for the subject field.
  • input creates another single-line text box.
  • type uses text because the subject is normal text.
  • placeholder shows hint text inside the input.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 12

Step 12 Add the message field HTML

Where to put this code Add this code inside the form tag, under the subject input.

Code

<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Write your message here"></textarea>

What this does

  • label adds text for the message field.
  • textarea creates a larger box for a longer message.
  • id connects the textarea to the matching label.
  • placeholder shows hint text inside the message box.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 13

Step 13 Add the submit button HTML

Where to put this code Add this code inside the form tag, under the textarea.

Code

<button type="submit">Send Message</button>

What this does

  • button creates a clickable button.
  • type sets the button as a submit button.
  • Send Message is the text shown on the button.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 14

Step 14 Style the body

Where to put this code Add this code into style.css.

Code

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #eeeeee;
}

What this does

  • body selects the whole visible webpage.
  • margin-top removes the browser gap at the top.
  • font-family changes the font used on the webpage.
  • background-color changes the page background to light grey.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 15

Step 15 Centre the form inside main

Where to put this code Add this code into style.css under the body CSS.

Code

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

What this does

  • main selects the main content area.
  • display turns main into a flex container.
  • justify-content centres the form horizontally.
  • align-items centres the form vertically when main has height.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 16

Step 16 Add height and padding to main

Where to put this code Add these lines inside the existing main CSS rule in style.css.

Code

main {
    min-height: 100vh;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

What this does

  • min-height makes main at least the full height of the browser window.
  • 100vh means 100 percent of the viewport height.
  • padding adds space inside main.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 17

Step 17 Style the form section box

Where to put this code Add this code into style.css under the main CSS.

Code

.form-section {
    background-color: white;

    border-width: 2px;
    border-style: solid;
    border-color: red;

    border-radius: 10px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    width: 400px;
}

What this does

  • .form-section selects the section with the class name form-section.
  • background-color changes the form section background to white.
  • border-color changes the border colour to red.
  • border-radius rounds the corners.
  • padding adds space inside the form section.
  • width sets the form section width to 400 pixels.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 18

Step 18 Style the form heading

Where to put this code Add this code into style.css under the .form-section CSS.

Code

.form-section h1 {
    margin-top: 0;
    color: #8b0000;
    text-align: center;
}

What this does

  • .form-section h1 selects only the h1 inside the form section.
  • margin-top removes extra space above the heading.
  • color changes the heading text to dark red.
  • text-align centres the heading text.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 19

Step 19 Style the form introduction

Where to put this code Add this code into style.css under the .form-section h1 CSS.

Code

.form-section p {
    text-align: center;
    color: #444444;
    margin-bottom: 25px;
}

What this does

  • .form-section p selects only the paragraph inside the form section.
  • text-align centres the paragraph text.
  • color changes the paragraph text to dark grey.
  • margin-bottom adds space below the paragraph.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 20

Step 20 Make the form use flex

Where to put this code Add this code into style.css under the .form-section p CSS.

Code

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

What this does

  • form selects the form area.
  • display turns the form into a flex container.
  • flex-direction controls the direction of the form items.
  • column places each label, input and button on a new line.
  • gap adds space between each form item.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 21

Step 21 Style the labels

Where to put this code Add this code into style.css under the form CSS.

Code

label {
    font-weight: bold;
    color: #333333;
}

What this does

  • label selects all labels on the page.
  • font-weight makes the label text bold.
  • color changes the label text to dark grey.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 22

Step 22 Style the inputs and textarea

Where to put this code Add this code into style.css under the label CSS.

Code

input,
textarea {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    border-width: 1px;
    border-style: solid;
    border-color: #999999;

    border-radius: 6px;

    font-size: 16px;
    font-family: Arial, sans-serif;
}

What this does

  • input selects all input boxes.
  • textarea selects the message box.
  • padding adds space inside the fields.
  • border-color changes the border colour to grey.
  • border-radius rounds the corners of the fields.
  • font-size changes the text size inside the fields.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 23

Step 23 Style the textarea

Where to put this code Add this code into style.css under the input and textarea CSS.

Code

textarea {
    min-height: 120px;
    resize: vertical;
}

What this does

  • textarea selects only the message box.
  • min-height makes the message box at least 120 pixels tall.
  • resize allows the user to resize the message box vertically.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 24

Step 24 Style the button

Where to put this code Add this code into style.css under the textarea CSS.

Code

button {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    background-color: red;
    color: white;

    border-width: 0;
    border-style: none;
    border-color: transparent;

    border-radius: 6px;

    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

What this does

  • button selects the submit button.
  • padding adds space inside the button.
  • background-color changes the button background to red.
  • color changes the button text to white.
  • border-width removes the visible border.
  • border-radius rounds the button corners.
  • cursor changes the mouse pointer to a hand.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Step 25

Step 25 Add the button hover effect

Where to put this code Add this code into style.css under the button CSS.

Code

button:hover {
    background-color: #8b0000;
}

What this does

  • button:hover selects the button when the mouse moves over it.
  • background-color changes the button background to dark red on hover.
  • hover helps users see that the button is interactive.

Expected output

Contact Us

Complete the form below and we will get back to you soon.

Move your mouse over the button. It should turn dark red.

Final code

Final index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main>
        <section class="form-section">
            <h1>Contact Us</h1>
            <p>Complete the form below and we will get back to you soon.</p>

            <form>
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" placeholder="Enter your full name">

                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" placeholder="Enter your email address">

                <label for="subject">Subject</label>
                <input type="text" id="subject" name="subject" placeholder="Enter a subject">

                <label for="message">Message</label>
                <textarea id="message" name="message" placeholder="Write your message here"></textarea>

                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>

</body>
</html>

Final style.css

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #eeeeee;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

.form-section {
    background-color: white;

    border-width: 2px;
    border-style: solid;
    border-color: red;

    border-radius: 10px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    width: 400px;
}

.form-section h1 {
    margin-top: 0;
    color: #8b0000;
    text-align: center;
}

.form-section p {
    text-align: center;
    color: #444444;
    margin-bottom: 25px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

label {
    font-weight: bold;
    color: #333333;
}

input,
textarea {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    border-width: 1px;
    border-style: solid;
    border-color: #999999;

    border-radius: 6px;

    font-size: 16px;
    font-family: Arial, sans-serif;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

button {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    background-color: red;
    color: white;

    border-width: 0;
    border-style: none;
    border-color: transparent;

    border-radius: 6px;

    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background-color: #8b0000;
}