Bjorn Krols
May 17 2019

Building your first contact form

Every website needs a contact form.

It is the perfect tool for your visitors and potential customers to reach out for questions and support without having to leave your site.

In this short beginner-friendly tutorial you'll learn some of the basics of HTML and build your first contact form.

Planning your form

Content

Start by formulating the questions that you intend to ask.

This will help you gain a clear understanding of what kind of input fields will be necessary for each question.

Example questions for a contact form:

  • πŸ‘‹ What is your name?
  • πŸ“¬ What is your email address?
  • πŸ’¬ What is your message?

Structure

Plan the structure of your form before coding it, this will help you detect issues and additional questions early.

You can use pen and paper to sketch out your form's structure or use a specialized tool like Balsamiq Wireframes.

balsamiq form mockup

A very short introduction to HTML

HTML stands for HyperText Markup Language and is widely used for creating web pages.

Elements

Before you start coding your form, you must familiarize yourself with some of the elements of an HTML document.

<p>             <!-- Opening paragraph element tag -->
  Hello, World  <!-- Paragraph element content     -->
</p>            <!-- Closing paragraph element tag -->
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

The <html> element informs the browser that the document is, in fact, an HTML document.

The <head> element is a container for all the head elements, these include the document's title, scripts, styles, meta information, and more.

The <title> element is used to define a comprehensive title for the HTML document.

The <body> element contains the content that needs to be displayed by the browser. This could include an image, video, text or any form of content that you desire.

Attributes

Attributes are special words used inside the opening tag to control an element's behavior.

An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.

<!-- The <a> element's href attribute specified the address of the link -->
<a href="https://byteboomers.com">Byteboomers link</a>

The form element

A form allows your visitors to send you data via your website.

The <form> element's most important attribute is the action attribute, it specifies the action that needs to be performed upon the submission of the form.

<form action="<link-to-web-server>">
  <!-- Form content will be added here-->
</form>

Input elements

Use the <input> elements to specify the inputs for the user and enclose them within the <form> element.

Different input types exist, you can pick and mix these to suit your needs, some sample input type options are:

  • ✍ <input type="text">
  • πŸ“§ <input type="email">
  • πŸ”— <input type="url">
  • πŸ“… <input type="date">

The special <textarea> element defines a multi-line text input control.

A <button> with a type attribute set to submit defines a button for submitting the form data to a form-handler (specified in the form's action attribute).

<form action="<link-to-web-server>">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Your name" />
  <label for="email">Email address</label>
  <input
    type="email"
    id="email"
    name="email"
    placeholder="Your email address"
  />
  <label for="message">Message</label>
  <textarea id="message" name="message" placeholder="Your message"></textarea>
  <button type="submit">Submit</button>
</form>

Connecting your form to a server

Now that your HTML form is ready, the next step is to connect it to a server that will collect its submissions.

Instead of writing server-side code (Node, PHP, Java, etc..), installing and managing a server and setting up a database, you'll be integrating a fully managed service called Formspark.

  1. To get started, register for a free account.
  2. Create a new Formspark Form.
  3. Copy the Form's action attribute.
formspark new form

Three things are necessary when you use Formspark:

  • Make sure your form contains a button element of type submit.
  • Ensure that all fields in the form have a value for the name attribute.
  • The form’s action attribute must be set to the value specified by Formspark.
<!DOCTYPE html>
<html>
  <head>
    <title>Enter your name</title>
  </head>
  <body>
    <form action="https://submit-form.com/<your-form-id>">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Your name" />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

You can now start reviewing all incoming submissions on the form's feed.

Formspark also provides you with simple analytics that make it much easier for you to analyze and interpret the responses that you have received.

Conclusion

In this short beginner-friendly tutorial learned some of the basics of HTML and built your first contact form integrated with Formspark.

Links

Get in touch