In the digital landscape, a contact us form is not just an optional feature; it’s a vital component for fostering communication between your website visitors and your business. In this guide, we’ll walk through the process of building an SEO-friendly contact us form using HTML, CSS, and PHP, ensuring seamless integration and optimal user experience.
HTML Setup:
The HTML structure provides the foundation for our contact us form. Each input field is carefully crafted to ensure ease of use and accessibility. With appropriate labels and placeholders, users can effortlessly navigate through the form, providing essential information such as their name, email address, phone number, and message.
<!DOCTYPE html>
<!-- Created By WPHotShot -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Contact us Form | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="container">
<div class="text">Responsive Contact us Form with PHP Mailer</div>
<form action="mail_script.php" method="post">
<div class="form-row">
<div class="input-data">
<input type="text" name="fname" required />
<div class="underline"></div>
<label for="">Full Name</label>
</div>
<div class="input-data">
<input type="text" name="subject" required />
<div class="underline"></div>
<label for="">Subject</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" name="email" required />
<div class="underline"></div>
<label for="">Email Address</label>
</div>
<div class="input-data">
<input type="number" name="phone" maxlength="10" required />
<div class="underline"></div>
<label for="">Phone No.</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<textarea rows="8" cols="80" name="message" required></textarea>
<br />
<div class="underline"></div>
<label for="">Write Your Message</label>
<br />
</div>
</div>
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" value="submit" />
</div>
</div>
</form>
</div>
</body>
</html>
CSS Styling:
The CSS styling enhances the visual appeal and responsiveness of our contact form. Through meticulous design choices, we prioritize readability and user engagement. The form’s layout adapts seamlessly to various screen sizes, guaranteeing a consistent and pleasing experience across devices.
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.container {
max-width: 800px;
background: #fff;
width: 800px;
padding: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.container .text {
text-align: center;
font-size: 35px;
font-weight: 600;
background: -webkit-linear-gradient(
right,
#56d8e4,
#9f01ea,
#56d8e4,
#9f01ea
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container form {
padding: 30px 0 0 0;
}
.container form .form-row {
display: flex;
margin: 32px 0;
justify-content: center;
}
form .form-row .input-data {
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
form .form-row .textarea {
height: 70px;
}
.input-data input,
.textarea textarea {
display: block;
width: 100%;
height: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data input:valid ~ label,
.textarea textarea:valid ~ label {
transform: translateY(-20px);
font-size: 14px;
color: #3498db;
}
.textarea textarea {
resize: none;
padding-top: 10px;
}
.input-data label {
position: absolute;
pointer-events: none;
bottom: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.textarea label {
width: 100%;
bottom: 40px;
background: #fff;
}
.input-data .underline {
position: absolute;
bottom: 0;
height: 2px;
width: 100%;
}
.input-data .underline:before {
position: absolute;
content: "";
height: 2px;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before {
transform: scale(1);
}
.submit-btn .input-data {
overflow: hidden;
height: 45px !important;
width: 25% !important;
}
.submit-btn .input-data .inner {
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(
right,
#56d8e4,
#9f01ea,
#56d8e4,
#9f01ea
);
transition: all 0.4s;
}
.submit-btn .input-data:hover .inner {
left: 0;
}
.submit-btn .input-data input {
background: none;
border: none;
color: #fff;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
position: relative;
z-index: 2;
}
@media (max-width: 700px) {
.container .text {
font-size: 30px;
}
.container form {
padding: 10px 0 0 0;
}
.container form .form-row {
display: block;
}
form .form-row .input-data {
margin: 35px 0 !important;
}
.submit-btn .input-data {
width: 40% !important;
}
}
PHP Backend:
Behind the scenes, PHP powers the functionality of our contact form. Upon form submission, PHP scripts validate the user input and handle the email sending process. Error handling ensures that users receive prompt feedback, guiding them to provide accurate information and preventing submission errors.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get form data
$fname = $_POST["fname"];
$subject = $_POST["subject"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$message = $_POST["message"];
// Validate form data
if (empty($fname) || empty($subject) || empty($email) || empty($phone) || empty($message)) {
echo "Please fill in all fields.";
exit;
}
// Email recipient
$contact_email = "email@example.com"; //your email to receive emails
// Check if email address is valid
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "The email address you entered is not valid.";
exit;
}
// Email headers
$headers = "From: $fname <$email>\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Content-type: text/html\r\n";
// Email subject and body
$email_subject = "New message: $subject";
$email_body = "<h3>You have received a new message from the contact form:</h3>";
$email_body .= "<p><strong>First Name:</strong> $fname</p>";
$email_body .= "<p><strong>Subject:</strong> $subject</p>";
$email_body .= "<p><strong>Email:</strong> $email</p>";
$email_body .= "<p><strong>Phone No.:</strong> $phone</p>";
$email_body .= "<p><strong>Message:</strong><br>$message</p>";
// Send email
if (mail($contact_email, $email_subject, $email_body, $headers)) {
echo "Thank you for your message. Your form is submitted successfully";
} else {
echo "Oops! Something went wrong. Please try again later.";
}
}
?>
SEO Optimization:
Optimizing our contact form for search engines is crucial for increasing visibility and attracting potential customers. By incorporating relevant keywords in form labels, meta tags, and content, we improve the form’s discoverability and enhance its chances of ranking higher in search engine results.
Uses of Contact Us Form:
The contact us form serves as a direct communication channel between businesses and website visitors. Its versatility extends beyond simple inquiries, catering to various purposes such as:
- Customer Support: Enable customers to seek assistance or report issues conveniently.
- Feedback Collection: Gather valuable feedback and suggestions to improve products or services.
- Lead Generation: Capture leads by allowing visitors to request quotes, demos, or consultations.
- Partnership Inquiries: Facilitate collaboration opportunities with potential partners or affiliates.
- Job Applications: Streamline the recruitment process by accepting job applications and resumes.
Demo:
Conclusion:
In conclusion, implementing a user-friendly contact us form is paramount for any website aiming to enhance user engagement and facilitate communication. By following the steps outlined in this guide and optimizing for SEO, you can create a seamless and effective contact form that serves as a bridge between your business and your audience.
With a focus on user experience and search engine visibility, your contact us form becomes not only a functional tool but also a valuable asset in driving growth and fostering meaningful connections with your website visitors.
Building a robust contact us form empowers your business to interact with customers seamlessly, gather valuable insights, and ultimately, thrive in the digital landscape.
