What is a web form?

So far we have created lots of static content, but this does not allow users to interact with our web site. Perhaps we would like them to upload data or simply send us a message.

Typically creating web forms requires us to have a programmable web server – which we don’t have – but fortunately there is a cloud web service called FormSpree that can process the form for us and send us the details as an email. To proceed with this section you will need to have an accessible email address.

Contact Me form

We are now going to create contact me web form that will allow our site visitors to send us message as an email. You can see an example of how it will look below.

To create this form add the following HTML to your web page and change YOUR@EMAIL.COM on the first line to your own email address.

<div id="contact-me">
    <form action="//formspree.io/YOUR@EMAIL.COM" method="POST">
        <label for="contact-name">Your name</label>
        <input type="text" id="contact-name" name="name" placeholder="Type your name here">
        <label for="contact-name">Your email address</label>
        <input type="email" name="_replyto" placeholder="Type your email address here">
        <label for="contact-name">Your message</label>
        <textarea name="message" rows="8" placeholder="Type your message here"></textarea>
        <input type="submit" value="Send">
    </form>
</div>

To make this form look more friendly we need to add the following CSS to our style.css file...

#contact-me form { max-width: 600px; padding: 0 18px; margin: auto; margin-bottom: 64px; }
#contact-me form label { display: block; margin-top: 18px; }
#contact-me form input[type=text], #contact-me form input[type=email], #contact-me form textarea { width: 100%; margin-bottom: 8px; }
#contact-me form input[type=submit] { display: block; margin: auto; padding: 4px 24px; }

The very first time you click the send button you will see a message instructing you to Confirm your email. To continue, log into your email account and click the confirmation link to validate your email address.

Each time a user on your site fills in this form you should receive an email with their message and you can respond by simply replying to that email.