Contact HTML
What is a Contact Form?
Contact forms are undoubtedly essential for any website and business. Contact us forms offer an appropriate communication method, much like a happy hostess receiving guests and offering assistance.
This page on a website is called a Contact Us page. A contact form is an online form that can be filled out and submitted. By typing in, for example, their message, phone number, email address, and maybe their name, users can kick-start communication with a company.
Contact forms guarantee accuracy, engagement, and security for businesses. Additionally, it is a fantastic chance to grow your audience by adding qualified leads to your mailing list.
What does a Contact Us Form Do?
In brief, visitors provide contact information and reasons for contacting us using a Contact Us form. It also uses a uniform format to do this.
Contact us forms allow visitors to know what information is actually needed, saving them from having to phone or email us with incomplete information.
Accordingly, the name, email address, and message fields should be the minimum number of fields on a Contact Us form.
Still, depending on your business strategy, you may require additional fields. For example, you may require visitors to supply you with specific details about a product or to select from a dropdown menu why they are contacting you. Having the ability to personalize your contact forms is really beneficial.
Contact Us forms also give you the opportunity to grow your audience. Visitors whose email addresses are valid can be nurtured into leads and, ideally, devoted clients.
One of the many useful outcomes of having contact forms on your website is a strong mailing list of qualified leads.
How to Create a Contact Us Form?
Creating a contact form on any word processor was an uphill task in the early days of paperless forms. Everything would come to an end if a single key were wrongly clicked. Downloadable templates for Contact Us forms appeared to be a boon until you contracted a computer virus.
Then brave people arrived and created contact forms using HTML from the ground up. We can run now with form builders because those individuals walked.
Creating a Contact Form in HTML
A well-designed contact form is a great way to get messages from your website's users and collect leads.
Create the HTML markup
Creating the HTML code for a simple contact form that has the necessary input fields for Name, Email, and Message is the first step. We employ the following two input types:
- Text: This component is used to type short text, such as an email address or name.
- Textarea: This component allows you to type long texts, such as messages.
The simple HTML contact form will be styled and given a good appearance using the CSS script once the HTML markup has been built. Our initial output is a monolithic contact form that needs to be visually appropriate for contemporary websites. And then, we'll begin our work with CSS to improve its look.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label class="required" for="name">Your name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
<span id="name_validation" class="error_message"></span>
</div>
<div class="row">
<label class="required" for="email">Your email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
<span id="email_validation" class="error_message"></span>
</div>
<div class="row">
<label class="required" for="message">Your message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
<span id="message_validation" class="error_message"></span>
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
Style Your Contact Form with CSS
A basic contact form with "Name", "Email", and "Message" boxes can be used to gather user information. Further fields, including Dropdown and Single Choice fields with specialized coding, can be added later.
You can use the programming language CSS, which stands for cascading style sheets, to enable and best design your contact form. Pair the HTML tags for the background color, font family, font size, and other style factors by creating a CSS file for the form.
<style>
#contact_form {
background-color: #405d27;
padding-top: 20px;
padding-bottom: 20px;
}
.row label{
color: #FFFFFF;
font-size: 18px;
margin-left: 10px;
}
input[type=text], textarea {
text-align: center;
background-color: #82b74b;
border-radius: 10px;
margin: auto 0;
color: #FFFFFF;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 5px 5px 10px #3e4444;
}
input[type=text] {
height: 25px;
}
input[type=submit] {
background-color: #ff7b25;
color: #FFFFFF;
border-radius: 10px;
font-size: 18px;
margin-left: 10px;
box-shadow: 5px 5px 5px #3e4444;
}
</style>
Add the PHP Contact Form Script
A PHP script is essential to validating and processing the contact form you create for your website. You can download this script to process the inputs from your HTML contact form.
You can use jQuery in addition to HTML and PHP code to validate fields and display error messages when a form is submitted. Although optional, it will assist users of your HTML contact form in understanding their mistakes and ensure that the information you collect is formatted correctly.
<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
{
?>
<form action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Your name:<br>
<input name="name" type="text" value="" size="30"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Send email"/>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($email=="")||($message==""))
{
echo "All fields are required, please fill <a href=\"\">the form</a> again.";
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject=" Message sent using your contact form";
mail("[email protected]", $subject, $message, $from);
echo "Email sent!";
}
}
?>
Security Measures for Your HTML Contact Form
Ensure that your HTML contact form is inside a secured site or utilize SSL certificates for security. Also don't forget about CAPTCHA because it helps to prevent deployment of the bots that may be used to abuse your form by spammers.
We also set up additional security measures like SPF and DKIM in a compliance environment to make sure that your forms are safe and that they are not open to hacking. Password protection and multi-factor authentication are options for managing visitors' sensitive data.