Signup Process with Swiper.js

Optimize your signup process with Swiper.js to provide users with smooth and intuitive navigation. Learn how to implement Swiper.js to guide users through the signup journey seamlessly.

Enhance your website's user experience with an engaging signup process using Swiper.js. This tutorial will guide you through the process of creating and customizing a multi-step signup form with smooth transitions using HTML, CSS, JavaScript, and Swiper.js.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML, CSS, and JavaScript code snippets for the signup process. This snippet includes the structure and basic styles required to create a functional and interactive signup form.

Step 2: Link CSS and Swiper.js

  • Ensure the styles.css file and Swiper.js library are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and Swiper.js library:
  • <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
  • Also, add the following <script> tags before the closing </body> tag to link Swiper.js and your custom JavaScript file:
  • <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>

Step 3: Customize and Make it Yours

  • Customize the signup process to match your website's theme and functionality requirements. Modify the HTML structure to include additional steps or fields, adjust CSS styles (styles.css) for colors, sizes, and form element designs, and enhance JavaScript logic (script.js) for form validation and submission handling.

By following these steps, you can implement and personalize a multi-step signup process using Swiper.js with HTML, CSS, and JavaScript, creating an engaging and interactive user experience on your website.

Code Explanation

HTML Code

Outer Container (<div class="card">):
  • This div acts as the container for the card component, which includes the swiper and its slides.
Swiper Container (<div class="swiper">):
  • This div houses the Swiper component, a JavaScript library for creating carousels and sliders.
Swiper Wrapper (<div class="swiper-wrapper">):
  • This div acts as the main container for all the slides in the Swiper component.
Swiper Slide 1 (<div class="swiper-slide">):
  • Contains the first slide elements:
    • An image (<img>) with a welcome illustration.
    • A heading (<h2>) with the text "Welcome".
    • A subheading (<h3>) with the text "Let's create your username".
    • An input field (<input>) for the username, with attributes for disabling spellcheck, handling input events (oninput), specifying the type (type="text"), and providing a placeholder.
    • A button (<button>) for navigating to the next slide, initially disabled and with an onclick handler to trigger the gotoSlide(1) function.
Swiper Slide 2 (<div class="swiper-slide">):
  • Contains the second slide elements:
    • A wrapper div for the image.
    • An image (<img>) with a security illustration.
    • A heading (<h2>) with the text "Security".
    • A subheading (<h3>) with the text "Enter a strong password".
    • An input field (<input>) for the password, with an oninput event handler to validate input, specifying the type (type="password"), and providing a placeholder.
    • A button (<button>) for navigating to the next slide, initially disabled and with an onclick handler to trigger the gotoSlide(2) function.
Swiper Slide 3 (<div class="swiper-slide">):
  • Contains the third slide elements:
    • A wrapper div for the image.
    • An image (<img>) with a completion illustration.
    • A heading (<h2>) with the text "Finish".
    • A subheading (<h3>) with the text "You're all good to go".
    • A submit button (<button type="submit">) to complete the signup process.
    • A secondary button (<button class="secondary">) to restart the process, with an onclick handler to trigger the restart() function.
Swiper Pagination (<div class="swiper-pagination">):
  • This div serves as the container for pagination controls provided by the Swiper library, enabling navigation between slides.

CSS Code

Overall Styles
html,
body {
  height: 100%;
}
  • Sets the height of the html and body elements to 100% of the viewport height, allowing for full-page centering and layout control.
* {
  box-sizing: border-box;
}
  • Applies box-sizing: border-box to all elements. This ensures that padding and border are included in the element's total width and height, making layout calculations easier.
Body Styles
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #faf8ff;
  font-family: "poppins";
  text-align: center;
}
  • margin: 0;: Removes default margin.
  • display: grid; place-items: center;: Centers its content both horizontally and vertically.
  • background: #faf8ff;: Sets a light purple background color.
  • font-family: "poppins";: Sets the font family to "Poppins".
  • text-align: center;: Centers text horizontally.
Card Styles
.card {
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 490px;
  padding: 80px 0 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 20px 150px rgb(0 0 0 / 5%);
  margin: 20px 0;
}
  • display: flex; flex-direction: column;: Creates a flexible container with a vertical layout.
  • width: 360px; height: 490px;: Sets the dimensions of the card.
  • padding: 80px 0 0;: Adds padding to the top.
  • border-radius: 10px;: Rounds the corners of the card.
  • background: #ffffff;: Sets a white background color.
  • box-shadow: 0 20px 150px rgb(0 0 0 / 5%);: Adds a subtle shadow effect.
  • margin: 20px 0;: Adds vertical margin.
Image Styles
img {
  margin: 0 auto 30px;
  width: 140px;
  height: 140px;
  object-fit: contain;
}
  • margin: 0 auto 30px;: Centers the image and adds a bottom margin.
  • width: 140px; height: 140px;: Sets the dimensions of the image.
  • object-fit: contain;: Ensures the image maintains its aspect ratio and fits within the given dimensions.
Heading Styles
h2 {
  color: #2f2e41;
  margin: 0 0 6px;
}

h3 {
  color: #69687a;
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 14px;
  align-self: stretch;
}
  • h2:
    • color: #2f2e41;: Sets the text color.
    • margin: 0 0 6px;: Adds a bottom margin.
  • h3:
    • color: #69687a;: Sets the text color.
    • margin: 0 0 24px;: Adds a bottom margin.
    • font-weight: 400;: Sets the font weight.
    • font-size: 14px;: Sets the font size.
    • align-self: stretch;: Stretches the heading to fill the container.
Input and Button Styles
input,
button {
  display: block;
  height: 48px;
  width: 270px;
  margin: 0 40px;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  text-align: center;
}
  • display: block;: Makes the elements block-level.
  • height: 48px; width: 270px;: Sets the dimensions.
  • margin: 0 40px;: Adds horizontal margin.
  • border-radius: 4px;: Rounds the corners.
  • font-size: 16px;: Sets the font size.
  • font-family: inherit;: Inherits the font family from the parent.
  • outline: none;: Removes the outline on focus.
  • text-align: center;: Centers the text.
Input Specific Styles
input {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.16);
  padding: 12px;
  margin-bottom: 8px;
}

input::placeholder {
  color: rgba(0, 0, 0, 0.24);
}
  • border-width: 1px; border-color: rgba(0, 0, 0, 0.16);: Sets the border properties.
  • padding: 12px;: Adds padding.
  • margin-bottom: 8px;: Adds bottom margin.
  • input::placeholder: Styles the placeholder text.
Button Specific Styles
button {
  background: #9563ff;
  color: #f9f9f9;
  border: 0;
  cursor: pointer;
  transition: 0.175s;
}

button:disabled {
  background: #e1e0e8;
  color: #bbbac5;
  cursor: not-allowed;
}

button.secondary {
  background: transparent;
  color: #7e7d8a;
}

button[type="submit"] {
  margin-bottom: 8px;
}
  • button:
    • background: #9563ff;: Sets the background color.
    • color: #f9f9f9;: Sets the text color.
    • border: 0;: Removes the border.
    • cursor: pointer;: Changes the cursor to a pointer.
    • transition: 0.175s;: Adds a transition effect.
  • button:disabled
    • background: #e1e0e8; color: #bbbac5; cursor: not-allowed;: Styles for the disabled state.
  • button.secondary:
    • background: transparent; color: #7e7d8a;: Styles for secondary buttons.
  • button[type="submit"]:
    • margin-bottom: 8px;: Adds bottom margin.
Swiper Styles
.swiper {
  width: 100%;
}
  • width: 100%;: Ensures the Swiper component takes the full width of its container.

JavaScript Code

Swiper Initialization
const swiper = new Swiper(".swiper", {
  speed: 500,
  allowTouchMove: false,
});
  • Swiper: Initializes a new Swiper instance on the element with the class .swiper.
  • speed: 500: Sets the transition speed between slides to 500 milliseconds.
  • allowTouchMove: false: Disables touch interactions for slide navigation.
Function Definitions

gotoSlide

const gotoSlide = (index) => {
  swiper.slideTo(index);
};
  • gotoSlide: A function that takes an index and navigates the Swiper to the specified slide.
  • swiper.slideTo(index): Uses Swiper's slideTo method to jump to the slide at the given index.

restart

const restart = () => {
  const inputs = document.querySelectorAll("input");
  const buttons = document.querySelectorAll("button[type=button]");
  buttons.forEach((button) => {
    button.disabled = true;
  });
  inputs.forEach((input) => {
    input.value = "";
  });
  gotoSlide(0);
};
  • restart: A function to reset the form and navigate back to the first slide.
  • document.querySelectorAll("input"): Selects all input elements.
  • document.querySelectorAll("button[type=button]"): Selects all buttons of type button (excluding submit buttons).
  • buttons.forEach((button) => { button.disabled = true; }): Disables all buttons.
  • inputs.forEach((input) => { input.value = ""; }): Clears the value of all input fields.
  • gotoSlide(0): Navigates to the first slide.

checkValid

const checkValid = (event) => {
  event.target.nextElementSibling.disabled = !event.target.value.length;
};
  • checkValid: A function to validate user input and enable/disable the next button.
  • event.target: The element that triggered the event (the input field).
  • event.target.nextElementSibling: The next sibling element of the input (assumed to be the next button).
  • disabled = !event.target.value.length: Enables the next button if the input has a value, otherwise disables it.