Are you ready to add dynamic features to your contact form with AJAX and take it to the next level? We talked about the basics of making a contact form that doesn’t save information locally or on a server in the last piece. We’ll show you how to make a contact form that not only gets information from users but also sends it to a server so it can be processed without having to reload the page. Let’s jump right in!
Step 1: Setting Up the HTML Structure
First, make the HTML layout for your contact form. Make a new HTML file in your favorite text editor. Include this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form with AJAX</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form id="contact-form">
<input type="text" id="name" placeholder="Your Name" required>
<input type="email" id="email" placeholder="Your Email" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
<div id="response"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 2: Use CSS to style the form
Let’s add some styles to our contact form to make it look better. Add the following CSS code to a new file called style.css:
/* style.css */
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Step 3: Using JavaScript to add AJAX functionality
Let’s add JavaScript so that AJAX can handle form input. Add the following JavaScript code to a new file called script.js:
// script.js
$(document).ready(function() {
$('#contact-form').submit(function(event) {
event.preventDefault();
// Get form data
const formData = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val()
};
// Send data to server
$.ajax({
type: 'POST',
url: 'process.php', // Replace with your server-side processing script
data: formData,
success: function(response) {
$('#response').html(response);
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
$('#response').html('<p>Error occurred. Please try again.</p>');
}
});
});
});
Step 4: Taking care of the form data on the server
You’ll need a server-side script to handle the form data in order to finish the process. Put the following code in a file called process.php:
<?php
// Process form data
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Your processing logic here (e.g., sending email, saving to database)
// Send a response
echo '<p>Thank you! Your message has been received.</p>';
} else {
echo '<p>Method not allowed.</p>';
}
?>
Conclusion
Great job! You’ve successfully used HTML, CSS, JavaScript, and AJAX to make a dynamic contact form that runs on your system. With this method, you can record user input and send it to a server without having to reload the page. This gives your website guests a smooth experience. Try making changes to the form and the processing code to see what works best for you. Have fun coding!
Related:
Leave a Reply