How to set up a mail form in bootstrap
To set up a mail form in Bootstrap, you can follow these steps:
Step 1: Create the HTML structure
Create an HTML file and add the following code:
<form id="contactForm" name="contactForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
This code creates a basic form with three fields: name, email, and message.
Step 2: Add Bootstrap CSS and JavaScript
Add the following code to the head section of your HTML file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
This code links to the Bootstrap CSS and JavaScript files.
Step 3: Add form validation
To add form validation, you can use the required
attribute on the input fields and the pattern
attribute to specify a regular expression for the email field. You can also use JavaScript to validate the form on submit.
Here's an example of how you can add form validation:
<script>
$(document).ready(function() {
$('#contactForm').submit(function(event) {
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
if (name === '' || email === '' || message === '') {
alert('Please fill out all fields');
return false;
}
if (!validateEmail(email)) {
alert('Invalid email address');
return false;
}
// Send the form data to the server
$.ajax({
type: 'POST',
url: 'your-server-side-script.php',
data: $(this).serialize(),
success: function(data) {
alert('Form submitted successfully');
}
});
});
});
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
This code adds a submit event listener to the form and validates the form data before sending it to the server. It also uses a regular expression to validate the email address.
Step 4: Add server-side script
Create a server-side script (e.g. PHP) to handle the form submission. This script should receive the form data, validate it, and send a response back to the client.
Here's an example of how you can create a server-side script in PHP:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Validate the form data
if (empty($name) || empty($email) || empty($message)) {
echo 'Please fill out all fields';
exit;
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo 'Invalid email address';
exit;
}
// Send a response back to the client
echo 'Form submitted successfully';
}
?>
This script receives the form data, validates it, and sends a response back to the client.
That's it! With these steps, you should have a basic mail form set up in Bootstrap.