Example of a simple contact form using PHP, Js and CSS

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.

Step 1: HTML Structure (contact.html)

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>

Step 2: CSS Styles (style.css)

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;
}

Step 3: JavaScript Validation (script.js)

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
    }
});

Step 4: PHP Processing Script (process.php)

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.";
}
?>

Notes:

Email Settings: Ensure the email provider settings support sending emails from PHP. If needed, consider using an SMTP library like PHPMailer or configuring your mail server.
Security Measures: This example includes basic validation. For production use, be sure to implement more robust validation, including protection against XSS and CSRF attacks.
Feedback Handling: This code directly echoes feedback in the process.php response. For a better user experience, consider using AJAX calls to send form data asynchronously if you want to avoid page refreshes.

Conclusion

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.