Below is an example of a simple contact form using PHP, CSS, and JavaScript. This form allows users to input their name, email, subject, and message, and upon submission, sends the data to the server where it can be processed.
This HTML snippet defines the contact form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Contact Form</title>
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form id="contactForm" action="process.php" method="POST">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" rows="5" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
<div id="formFeedback"></div>
</div>
<script src="script.js"></script>
</body>
</html> Add some basic styles for your form.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background: #007bff;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
#formFeedback {
margin-top: 15px;
font-weight: bold;
} You can include simple client-side validation, if necessary.
document.getElementById("contactForm").addEventListener("submit", function(event) {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let subject = document.getElementById("subject").value;
let message = document.getElementById("message").value;
if (name === "" || email === "" || subject === "" || message === "") {
alert("All fields are required.");
event.preventDefault(); // Prevent form from submitting
}
}); This PHP script processes the form data and can send an email or save the data as needed.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Validate and sanitize inputs
$name = htmlspecialchars(strip_tags(trim($_POST['name'])));
$email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
$subject = htmlspecialchars(strip_tags(trim($_POST['subject'])));
$message = htmlspecialchars(strip_tags(trim($_POST['message'])));
// Check if the email is valid
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format.";
exit;
}
// Set the recipient email address
$to = "your-email@example.com"; // Change to your email address
// Set the email subject
$email_subject = "New contact form submission: $subject";
// Build the email content
$email_body = "You have received a new message from the contact form.\n\n";
$email_body .= "Name: $name\n";
$email_body .= "Email: $email\n";
$email_body .= "Subject: $subject\n";
$email_body .= "Message:\n$message\n";
// Send the email
if (mail($to, $email_subject, $email_body)) {
echo "Message sent successfully!";
} else {
echo "Message could not be sent.";
}
} else {
echo "Invalid request.";
}
?> process.php response. For a better user experience, consider using AJAX calls to send form data asynchronously if you want to avoid page refreshes.This example provides a simple contact form that collects user information and sends it to an email address using PHP. You can enhance it further based on your specific requirements, such as adding additional validation, integrating a CAPTCHA, or using databases for storage.
WordPress development has evolved significantly, and modern tooling plays a crucial role in creating efficient…
I. Project Overview The goal is to automate the process of notifying search engines (like…
1. Database Structure (MySQL) We'll need a database table to store information about our website's…
This explanation aims to provide a solid foundation for understanding the process and implementing your…
Okay, here's a comprehensive guide on building a real-time website chat script using PHP, HTML,…
Comprehensive guide on creating a simple website analytics system using PHP, HTML, CSS, JavaScript, and…