Scribd
Upload
20 views3 pages

!DOCTYPE HTML

Uploaded by

Support Team
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views3 pages

!DOCTYPE HTML

Uploaded by

Support Team
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

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>
<!-- Bootstrap CSS for styling -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="contact-form">
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="name"
placeholder="Your Name" required>
<label for="name">Your Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="email"
placeholder="Your Email" required>
<label for="email">Your Email</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="subject"
placeholder="Subject" required>
<label for="subject">Subject</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a message
here" id="message" style="height: 100px" required></textarea>
<label for="message">Message</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary w-100 py-3" type="submit">Send
Message</button>
</div>
</div>
</form>

<div id="responseMessage" class="mt-4"></div>


</div>

<!-- jQuery and Bootstrap JS -->


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"></script>

<script>
$(document).ready(function() {
// Submit form via Ajax
$('#contact-form').on('submit', function(e) {
e.preventDefault(); // Prevent default form submission

var formData = {
name: $('#name').val(),
email: $('#email').val(),
subject: $('#subject').val(),
message: $('#message').val()
};

// Ajax request to send data to PHP file


$.ajax({
url: 'contact.php', // Path to PHP script
type: 'POST',
data: formData,
success: function(response) {
$('#responseMessage').html('<div class="alert alert-
success">' + response + '</div>');
$('#contact-form')[0].reset(); // Reset the form after
submission
},
error: function() {
$('#responseMessage').html('<div class="alert alert-
danger">There was an error submitting your form. Please try again.</div>');
}
});
});
});
</script>
</body>
</html>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Capture the form data
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$subject = htmlspecialchars($_POST['subject']);
$message = htmlspecialchars($_POST['message']);

// Email settings
$to = "[email protected]"; // Replace with your email
$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: " . $email . "\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

// Prepare the email body


$body = "<h2>Contact Form Message</h2>";
$body .= "<p><strong>Name:</strong> $name</p>";
$body .= "<p><strong>Email:</strong> $email</p>";
$body .= "<p><strong>Subject:</strong> $subject</p>";
$body .= "<p><strong>Message:</strong> $message</p>";

// Send the email


if (mail($to, $subject, $body, $headers)) {
echo "Thank you for your message! We'll get back to you shortly.";
} else {
echo "Sorry, there was an issue with your submission. Please try again.";
}
} else {
echo "Invalid request.";
}
?>

contact.php

You might also like