Multi-Step Form using HTML & CSS

0

Multi-Step Form using HTML & CSS

 Hello developers, today in this blog you will learn to create a Multi-Step Form using HTML and CSS.

A Multi-Step Form is a long-form that has more than one step to fill the form. This type of form asked you to enter your details step by step before submitting your form. The multiform consists of some details to fill in like, name, email, mobile number about the user.

In this blog (Multi-Step Form), on the webpage, the form contains details like names have to be filled by the user in the three formats like First Name, Last Name, and Nick Name. There is a button named Next. When you click on the Next button, then another form is visible, in this form, there are two input fields called Email and Mobile Number where the user can fill in their details. In this form, you have two buttons named Previous and Next Button. Where you can go to the previous page and next page and you can also edit the details of yourself. On the last page, there are three input fields named Country, City, and Pincode. On this page, there are two buttons as Previous and Submit. The Submit button is used to submit the form.

The source code of this Multi-Step Form using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Multi-Step Form using HTML & CSS on your projects.

Multi-Step Form [Source Code]

To make this website (Multi-Step Form), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Multi Step Form || Learningrobo</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="container"> <form> <div class="step step-1 active"> <div class="form-group"> <input type="text" id="firstName" name="first-name" placeholder="First Name"> </div> <div class="form-group"> <input type="text" id="lastName" name="last-name" placeholder="Last Name"> </div> <div class="form-group"> <input type="text" id="nickName" name="nick-name" placeholder="Nick Name"> </div> <button type="button" class="next-btn">Next</button> </div> <div class="step step-2"> <div class="form-group"> <input type="text" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <input type="number" id="phone" name="phone-number" placeholder="Mobile Number"> </div> <button type="button" class="previous-btn">Prev</button> <button type="button" class="next-btn">Next</button> </div> <div class="step step-3"> <div class="form-group"> <input type="text" id="country" name="country" placeholder="Country"> </div> <div class="form-group"> <input type="text" id="city" name="city" placeholder="City"> </div> <div class="form-group"> <input type="text" id="postCode" name="post-code" placeholder="Pincode"> </div> <button type="button" class="previous-btn">Prev</button> <button type="submit" class="submit-btn">Submit</button> </div> </form> </div> </section> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension. 


    * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Poppins", sans-serif; 
  background: #00C9A7; 
 }  
 
 section {  
  min-height: 90vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;   
 }  
 .container {  
  max-width: 380px;  
  width: 90%;  
  padding: 20px;  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;  
  background: #12192c;  
  color: #fff;
  font-size: 20px;
 }  
 .step {  
  display: none;  
 }  
 .step.active {  
  display: block;  
 }  
 .form-group {  
  width: 100%;  
  margin-top: 20px;  
 }  
 .form-group input {  
  width: 100%;       
  margin-top: 8px;  
  margin-bottom: 10px;
  border-radius: 4px;  
  background: #12192c;
  border: 1px solid #e1d9ec;
  border-bottom-width: 2px;
  padding: 10px 45px;
  font-size: 18px;
  background: none;
  color: #e1d9ec;
 }  
 button.next-btn,  
 button.previous-btn,  
 button.submit-btn {  
  float: right;     
  border: none;  
  outline: none;  
  font-size: 18px;   
  width: 100px;
  height: 50px;
  margin-top: 30px;
  color: #fff;
  padding: 0;
  border: none;
  background: #00C9A7;
  cursor: pointer;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  border-radius: 5px;
 }  
 button.previous-btn {  
  float: left;  
 }  
 .credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
}
We hope you would like this Multi-Step Form using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Multi-Step Form using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome