Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Let’s recreate the multistep form from the previous tutorial with Alpine.js. but with JavaScript and 4th extra step!
A multistep form is a form that has multiple steps, each with its own set of fields and validation rules. It’s commonly used in forms that require more than one step to complete, such as a wizard or a registration form.
This is the structure of the project: Understanding the code:
id="multiStepForm"
: This is the id of the form.id="step1"
: This is the id of the first step.class="step"
: This is the class of the first step.style="display: block;"
: This is the style of the first step.id="nextStep1"
: This is the id of the button that moves to the next step.id="step2"
: This is the id of the second step.class="step"
: This is the class of the second step.style="display: block;"
: This is the style of the second step.id="prevStep2"
: This is the id of the button that moves to the previous step.id="nextStep2"
: This is the id of the button that moves to the next step.id="step3"
: This is the id of the third step.class="step"
: This is the class of the third step.style="display: block;"
: This is the style of the third step.id="prevStep3"
: This is the id of the button that moves to the previous step.id="submitForm"
: This is the id of the button that submits the form.id="step4"
: This is the id of the fourth step.class="step"
: This is the class of the fourth step.style="display: block;"
: This is the style of the fourth step.Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.
<div>
<div
id="multiStepForm">
<!-- Step 1 -->
<div
id="step1"
class="step"
style="display: block;">
<h2>
Step 1: Personal Information
</h2>
<div>
<label
for="name"
>Name</label
>
<input
type="text"
id="name"
placeholder="Enter your name"
/>
</div>
<div>
<label
for="email"
>Email</label
>
<input
type="email"
id="email"
placeholder="Enter your email"
/>
</div>
<div>
<button
id="nextStep1"
>Next</button
>
</div>
</div>
<!-- Step 2 -->
<div
id="step2"
class="step"
style="display: none;">
<h2>
Step 2: Account Information
</h2>
<div>
<label
for="username"
>Username</label
>
<input
type="text"
id="username"
placeholder="Choose a username"
/>
</div>
<div>
<label
for="password"
>Password</label
>
<input
type="password"
id="password"
placeholder="Enter your password"
/>
</div>
<div>
<button
id="prevStep2"
>Previous</button
>
<button
id="nextStep2"
>Next</button
>
</div>
</div>
<!-- Step 3 -->
<div
id="step3"
class="step"
style="display: none;">
<h2>Step 3: Confirmation</h2>
<div >
<p>Name: <span id="confirmName"></span></p>
<p>Email: <span id="confirmEmail"></span></p>
<p>Username: <span id="confirmUsername"></span></p>
</div>
<div>
<button
id="prevStep3"
>Previous</button
>
<button
id="submitForm"
>Submit</button
>
</div>
</div>
<!-- Step 4 -->
<div
id="step4"
class="step"
style="display: none;">
<h2>Step 4: Submitted</h2>
<div>
<p>Your form has been submitted successfully!</p>
</div>
</div>
</div>
</div>
document.addEventListener("DOMContentLoaded", function() {
: This sets up an event listener that waits for the DOM content to be fully loaded before executing the provided function.const formData = {
: This initializes an object named formData
which will store the data from the form inputs.name: "",
: Initializes the name
property of formData
with an empty string as its initial value.email: "",
: Initializes the email
property of formData
with an empty string as its initial value.username: "",
: Initializes the username
property of formData
with an empty string as its initial value.password: "",
: Initializes the password
property of formData
with an empty string as its initial value.const steps = document.querySelectorAll(".step");
: Selects all elements with the class “step” and stores them in the steps
variable.let currentStep = 0;
: Initializes a variable currentStep
to keep track of the current step in the form.function showStep(stepIndex) {
: Defines a function named showStep
that takes a stepIndex
parameter.steps.forEach((step, index) => {
: Iterates over all steps using forEach
, and for each step:if (index === stepIndex) {
: Checks if the current step index matches the specified stepIndex
.step.style.display = "block";
: If matched, displays the step by setting its CSS display property to “block”.else {
: If the index does not match:step.style.display = "none";
: Hides the step by setting its CSS display property to “none”.showStep(currentStep);
: Calls the showStep
function to display the initial step based on the currentStep variable.nextStep1
): Updates formData
with name and email, increments currentStep
, and shows the next step.prevStep2
): Decrements currentStep
and shows the previous step.nextStep2
): Updates formData
with username and password, displays confirmation details, increments currentStep
, and shows the next step.prevStep3
): Decrements currentStep
and shows the previous step.submitForm
): Increments currentStep
, assuming form submission would be handled elsewhere. document.addEventListener("DOMContentLoaded", function() {
const formData = {
name: "",
email: "",
username: "",
password: "",
};
const steps = document.querySelectorAll(".step");
let currentStep = 0;
function showStep(stepIndex) {
steps.forEach((step, index) => {
if (index === stepIndex) {
step.style.display = "block";
} else {
step.style.display = "none";
}
});
}
showStep(currentStep);
document.getElementById("nextStep1").addEventListener("click", function() {
formData.name = document.getElementById("name").value;
formData.email = document.getElementById("email").value;
currentStep++;
showStep(currentStep);
});
document.getElementById("prevStep2").addEventListener("click", function() {
currentStep--;
showStep(currentStep);
});
document.getElementById("nextStep2").addEventListener("click", function() {
formData.username = document.getElementById("username").value;
formData.password = document.getElementById("password").value;
document.getElementById("confirmName").textContent = formData.name;
document.getElementById("confirmEmail").textContent = formData.email;
document.getElementById("confirmUsername").textContent =
formData.username;
currentStep++;
showStep(currentStep);
});
document.getElementById("prevStep3").addEventListener("click", function() {
currentStep--;
showStep(currentStep);
});
document
.getElementById("submitForm")
.addEventListener("click", function() {
currentStep++;
showStep(currentStep);
});
});
In this tutorial, we learned how to create a multistep form using Tailwind CSS and JavaScript. We covered the basics of Tailwind CSS, including its features and how to use them to style our form. We also learned how to use JavaScript to handle form data and navigation between steps. By following these steps, you can create a multistep form that is both visually appealing and functional. Do not forget to make it fully responsive and accessible for all users.
Hope you enjoyed this tutorial and have a nice day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!