This tutorial will cover the basic elements of a contact form, including input fields for the user’s name, email, and message, and a submit button. We’ll also include some basic CSS to style the form.<\/p>\n\n\n\n
In this tutorial, you will learn how to create a basic HTML contact form that can be embedded on any website. This form will include fields for a user’s name, email address, and a message. It’s a great way to allow your site visitors to communicate with you directly.<\/p>\n\n\n\n
First, create a new HTML file named Inside the Here, the Create a CSS file named We have created a form generator that you can use to build your own contact forms and copy\/paste into your own website with ease. They are free to download and can be used on your personal or commercial projects. Click here to check out our free contact form generator \u2197\ufe0f<\/a><\/p>\n\n\n\n PHP script that can be used to handle the form data submitted from the HTML contact form we created. This script will process the form inputs and could be used to send an email or save the information to a database. For now, we’ll keep it simple and just display the submitted data.<\/p>\n\n\n\n Create a file named This should give you a good foundation for handling contact form data with PHP!<\/p>\n\n\n\n Open your Congratulations! You’ve successfully created a basic HTML contact form with styling. This form can be further customized and integrated into your website as needed.<\/p>\n\n\n\n Feel free to add more fields or include advanced features like validation to enhance your form’s functionality.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" This tutorial will cover the basic elements of a contact form, including input fields for the user’s name, email, and message, and a submit button. We’ll also include some basic CSS to style the form. Tutorial: How to Create an HTML Contact Form Introduction In this tutorial, you will learn how to create a basic … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":45,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[5,16,12,42,43,4,22,20],"_links":{"self":[{"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42"}],"collection":[{"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":2,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions\/44"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/media\/45"}],"wp:attachment":[{"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fydo.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}contact.html<\/code>. You can do this using any text editor.<\/p>\n\n\n\n<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Contact Form<\/title>
<link rel=\"stylesheet\" href=\"styles.css\">
<\/head>
<body>
<!-- We will add our form here in the next steps -->
<\/body>
<\/html>
<\/code><\/pre>\n\n\n\nStep 2: Create the HTML Form<\/h4>\n\n\n\n
<body><\/code> tag of your HTML file, add the following HTML to create a form.<\/p>\n\n\n\n<form action=\"submit_form.php\" method=\"POST\">
<label for=\"name\">Name:<\/label>
<input type=\"text\" id=\"name\" name=\"name\" required>
<label for=\"email\">Email:<\/label>
<input type=\"email\" id=\"email\" name=\"email\" required>
<label for=\"message\">Message:<\/label>
<textarea id=\"message\" name=\"message\" required><\/textarea>
<button type=\"submit\">Send<\/button>
<\/form>
<\/code><\/pre>\n\n\n\naction<\/code> attribute should point to the script that will process the form data. We’re using submit_form.php<\/code> as a placeholder.<\/p>\n\n\n\nStep 3: Add Some Styles with CSS<\/h4>\n\n\n\n
styles.css<\/code> and add the following styles to make your form look better.<\/p>\n\n\n\nbody {
font-family: Arial, sans-serif;
margin: 40px;
}
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
label {
margin-top: 10px;
display: block;
}
input[type=\"text\"],
input[type=\"email\"],
textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
<\/code><\/pre>\n\n\n\nBonus: Free HTML5 Contact Form Generator<\/h3>\n\n\n\n
Step 4: Create the PHP File<\/h4>\n\n\n\n
submit_form.php<\/code> in the same directory as your HTML file. This PHP script will handle the form submission.<\/p>\n\n\n\n<?php
\/\/ Check if the form is submitted
if ($_SERVER[\"REQUEST_METHOD\"] == \"POST\") {
\/\/ Retrieve the form data
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
\/\/ Simple validation
if (!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)) {
\/\/ Process your form (e.g., send an email, save to a database, etc.)
\/\/ For now, we'll just display the data.
echo \"<h1>Thank you for your message, $name!<\/h1>\";
echo \"<p>We will get back to you at <strong>$email<\/strong>.<\/p>\";
echo \"<p>Your message: $message<\/p>\";
} else {
echo \"Please enter a valid email address.\";
}
} else {
\/\/ Not a POST request, redirect to the form
header('Location: contact.html');
exit;
}
?>
<\/code><\/pre>\n\n\n\nExplanation of the PHP Script<\/h4>\n\n\n\n
\n
$_POST<\/code> superglobal. The htmlspecialchars()<\/code> function is used to prevent XSS (Cross-site Scripting) attacks by converting special HTML characters to their HTML entities.<\/li>\n\n\n\nfilter_var()<\/code> with FILTER_VALIDATE_EMAIL<\/code>.<\/li>\n\n\n\ncontact.html<\/code> page.<\/li>\n<\/ol>\n\n\n\nNext Steps<\/h4>\n\n\n\n
\n
mail()<\/code> function in PHP. You’ll need to configure your server to send mail for this function to work.<\/li>\n\n\n\nStep 5: Testing<\/h3>\n\n\n\n
contact.html<\/code> file in a web browser to see your form in action. Fill out the fields and press the “Send” button to ensure everything is set up correctly.<\/p>\n\n\n\nConclusion<\/h4>\n\n\n\n