In terms of gathering structured inputs from users in a user-friendly way, it can be said that it is a good method to Create a multi-step Form with Validation in JavaScript and PHP.
Above all, It will give us good quality data, removing invalid data.
Moreover, the characteristics which we will produce in the process of developing a multi-step form alongside Validation, in both JavaScript and PHP, are –
- Multi-Steps to go through the Next and Previous Buttons.
- JavaScript Validation at the Front-end.
- Last Submission into the PHP Script.
- Neat and Pretty HTML/CSS Structure.
- Success Message on Submission.
Check Out Our More Technical Blogs Now.
Folder Structure to Create a Multi-Step Form with Validation in Javascript and PHP
We have to create a folder naming “multi-step-form” and under which we have to some files which along working are mentioned below –
| Files Name | Purpose |
| index.html | This file will have the logic to create the frontend of our multi-step form. |
| style.css | There will be styling to make our multi-step form looks good. |
| script.js | Here, all the controls and Validations logic will be available. |
| process.php | This is the PHP Handler which will do all the backend functionality. |
Developing Frontend of our Multi-step Form
Further, we have to create a HTML File in which will create a raw structure of out multi-step form. So, the logic for creating the Multi-step form is mentioned below –
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Multi-Step Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <form id="multiStepForm" action="process.php" method="POST" onsubmit="return validateStep(3)"> <!-- Step 1 --> <div class="step" id="step1"> <h2>Step 1: Personal Info</h2> <input type="text" name="fullname" id="fullname" placeholder="Full Name"> <input type="email" name="email" id="email" placeholder="Email"> <button type="button" onclick="nextStep(1)">Next</button> </div> <!-- Step 2 --> <div class="step" id="step2" style="display:none;"> <h2>Step 2: Address</h2> <input type="text" name="city" id="city" placeholder="City"> <input type="text" name="country" id="country" placeholder="Country"> <button type="button" onclick="prevStep(2)">Previous</button> <button type="button" onclick="nextStep(2)">Next</button> </div> <!-- Step 3 --> <div class="step" id="step3" style="display:none;"> <h2>Step 3: Message</h2> <textarea name="message" id="message" placeholder="Your Message"></textarea> <button type="button" onclick="prevStep(3)">Previous</button> <button type="submit">Submit</button> </div> </form> <script src="script.js"></script> </body> </html>
In this code, we have three sections respectively for Personal Information, Address, and Message with buttons of Next and Previous.
The interface of the form will look like this as mentioned in the image below.
Adding Styles to our Multi-Step form
The most important thing in developing no matter what, the main thing is the UI/UX because the attractiveness is very important to target a user.
We have to make a separate file naming style.css in our directory and have to write the mentioned CSS code in the same.
body {
font-family: Arial, sans-serif;
padding: 40px;
}
form {
width: 300px;
margin: auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
}
button {
padding: 10px 15px;
margin: 10px 5px 0 0;
cursor: pointer;
}
Adding Validations to Our Multi-Step form With Validations
We have to make a file naming script.js and have to include it in the HTML file as mentioned in the HTML Form.
Hence, this logic will add validations to the HTML Form which will filter the user data.
function nextStep(step) {
if (validateStep(step)) {
document.getElementById("step" + step).style.display = "none";
document.getElementById("step" + (step + 1)).style.display = "block";
}
}
function prevStep(step) {
document.getElementById("step" + step).style.display = "none";
document.getElementById("step" + (step - 1)).style.display = "block";
}
function validateStep(step) {
let valid = true;
if (step === 1) {
const fullname = document.getElementById("fullname").value.trim();
const email = document.getElementById("email").value.trim();
if (fullname === "") {
alert("Please enter full name.");
valid = false;
} else if (!validateEmail(email)) {
alert("Please enter valid email.");
valid = false;
}
} else if (step === 2) {
const city = document.getElementById("city").value.trim();
const country = document.getElementById("country").value.trim();
if (city === "" || country === "") {
alert("City and Country are required.");
valid = false;
}
} else if (step === 3) {
const message = document.getElementById("message").value.trim();
if (message === "") {
alert("Please enter a message.");
valid = false;
}
}
return valid;
}
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
The errors and validations when hit will look like as mentioned.
Inserting or Sending Data to Database from our multi-step form With validations
We have to make a file naming process.php and include it in the HTML form with the “Action” parameter.
Moreover, the code will add the functionality from where we can receive the form inputs and can insert in database as well.
The code initiating the functionality is mentioned below –
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$fullname = htmlspecialchars($_POST['fullname']);
$email = htmlspecialchars($_POST['email']);
$city = htmlspecialchars($_POST['city']);
$country = htmlspecialchars($_POST['country']);
$message = htmlspecialchars($_POST['message']);
// Here you can do database insertion or email sending
echo "<h2>Form Submitted Successfully!</h2>";
echo "<p><strong>Name:</strong> $fullname</p>";
echo "<p><strong>Email:</strong> $email</p>";
echo "<p><strong>City:</strong> $city</p>";
echo "<p><strong>Country:</strong> $country</p>";
echo "<p><strong>Message:</strong> $message</p>";
} else {
echo "Invalid Request.";
}
?>
How our Multi-Step Form with Validations works?
Above all, This is how our Multi-step form with validations works because the JavaScript code operates the input validation of each field of the HTML Form, which consists of three steps that may be toggled according to the user.
Therefore, the final info will be posted with the form method attribute in HTML, allowing the PHP Script to get the results in the form of method=POST.
Further, the validateStep() function ensures each step has the necessary fields before being able to proceed to the next page or forward because the first page of the form must be filled out.
Moreover, to implement the abovementioned functions, we can extend the functionality of the Multi-step form with the Validations option:
- Providing the Progress bar to indicate the progress in filling the form.
- Keep the form data in sessions to get a step-by-step progress.
- Is able to input the form into the database.
- We can display the input form in the WordPress Admin Dashboard.
Conclusion
To sum up, it could be said that the procedure of retrieving the data on our Multi-step form with validations is an obligatory one in which we can retrieve the necessary and validated data of the user.
What will save us is the scammer users and bots against our form. But then, here is our Integration of Google Recaptcha v2 with an HTML form.
You have now customised a responsive Dot Com at Rs. 7,999 with one year of domain and hosting validity. Contact Us Now.
