Creating a contact form can be done using different methods depending on your needs, such as a simple form for a website or a more complex one integrated with databases and email notifications. Here's a general guide to creating a contact form:
1. Using HTML and CSS (Basic Contact Form for Websites)
<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}
.contact-form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.contact-form input, .contact-form textarea, .contact-form button {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.contact-form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form class="contact-form" action="submit_form.php" method="POST">
<h2>Contact Us</h2>
<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" rows="5" required></textarea>
<button type="submit">Send</button>
</form>
</body>
</html>
2. Add Backend (PHP to Send Email)
Create a submit_form.php file to handle the form submission and send an email:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$to = "your-email@example.com";
$subject = "New Contact Form Submission";
$body = "Name: $name\nEmail: $email\nMessage: $message";
$headers = "From: $email";
if (mail($to, $subject, $body, $headers)) {
echo "Thank you for contacting us!";
} else {
echo "There was an error sending your message.";
}
}
?>
3. No-Code Platforms (If you don't want to code)
You can also use tools that allow you to build and embed contact forms easily:
Google Forms (for simple forms)
Typeform (for interactive forms)
JotForm (for customizable forms)
Microsoft Forms (integrates with Office tools)
Formspree (for email integration without backend)
4. Embedding Contact Forms
You can embed the form into your website using an iframe or directly in the HTML.
.jpg)
0 Comments