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.
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:
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.
HTML stands for HyperText Markup Language and is widely used for creating web pages.
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>
<html> element informs the browser that the document is, in fact, an HTML document.
<head> element is a container for all the head elements, these include the document's title, scripts, styles, meta information, and more.
<title> element is used to define a comprehensive title for the HTML document.
<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 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>
A form allows your visitors to send you data via your website.
<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 to specify the inputs for the user and enclose them within the
Different input types exist, you can pick and mix these to suit your needs, some sample input type options are:
<textarea> element defines a multi-line text input control.
<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
<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>
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.
Three things are necessary when you use Formspark:
<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.
In this short beginner-friendly tutorial learned some of the basics of HTML and built your first contact form integrated with Formspark.