HTML/CSS/JavaScriptを使用した素晴らしいステッパーフォーム

もともと投稿my blog
ステッパーまたは多段階のフォームは、長いフォームを扱うときに便利な機能です.それはよりユーザーフレンドリーなフォーム形式でユーザーエクスペリエンスを向上させます.このチュートリアルでは、HTML、CSS、JavaScriptを使用してステッパーフォームを作成します.
あなたはライブでそれをチェックすることができますCodepen : Stepper Form
始めましょう!

マークアップ

ご覧のように、HTMLファイルは比較的簡単です.

    <main>
      <div class="stepper">
        <div class="step--1 step-active">Step 1</div>
        <div class="step--2">Step 2</div>
        <div class="step--3">Step 3</div>
        <div class="step--4">Finish</div>
      </div>
      <form class="form form-active">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Personal Info
          </h1>

          <p class="form--header-text">
            Tell us more about you.
          </p>
        </div>
        <input type="text" placeholder="Name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button class="form__btn" id="btn-1">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Company Info
          </h1>

          <p class="form--header-text">
            Tell us more about your company.
          </p>
        </div>

        <input type="text" placeholder="Company Name" />
        <input type="text" placeholder="Job title" />
        <input type="text" placeholder="Location" />
        <button class="form__btn" id="btn-2-prev">Previous</button>
        <button class="form__btn" id="btn-2-next">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Social account
          </h1>

          <p class="form--header-text">
            Tell us more about your social account.
          </p>
        </div>
        <input type="text" placeholder="Linkedin" />
        <input type="text" placeholder="Twitter" />
        <input type="text" placeholder="Github" />
        <button class="form__btn" id="btn-3">Submit</button>
      </form>
      <div class="form--message"></div>
    </main>

その他main タグを定義するdiv これはステッパー要素を保持します.では3つを使いますforms 異なるボタンでid これはすぐにJavaScriptの助けを借りてステッパー効果を行います.
これにより、現在CSSでプロジェクトを作成できます.

スタイリング

ここでは、いくつかのリセットを開始しfont-family and background-color のプロパティbody タグ.

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f5f6f7;
  font-family: 'Nunito', sans-serif;
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

次に、flex 値main タグを中心に、要素をbody タグ.

.stepper {
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
}

.step--1,
.step--2,
.step--3,
.step--4 {
  width: 5rem;
  padding: 0.5rem 0;
  background: #fff;
  color: #666;
  text-align: center;
}
.step--1,
.step--2,
.step--3 {
  border-right: 1px solid #666;
}

ステッパー要素については、CSSフレックスボックスを横に並べてスタイルを追加するクラス名を使用します.

.form {
  background: #fff;
  text-align: center;
  position: absolute;
  width: 25rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  display: none;
  border-radius: 1rem;
  overflow: hidden;
}
.form--header-container {
  background: linear-gradient(to right, rgb(51, 51, 51), #919191);
  color: #fff;
  height: 6rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form--header-title {
  font-size: 1.4rem;
}

.form--header-text {
  padding: 0.5rem 0;
}

input[type='text'] {
  padding: 0.8rem;
  margin: auto;
  margin-top: 0.5rem;
  width: 20rem;
  display: block;
  border-radius: 0.5rem;
  outline: none;
  border: 1px solid #bdbdbb;
}

.form__btn {
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 0.5rem 0.7rem;
  width: 7rem;
  margin: 1rem auto;
  border-radius: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.form--message-text {
  width: 25rem;
  background: #fff;
  color: #444;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  animation: fadeIn 0.8s;
  border-radius: 1rem;
}

初めに、我々はすべての3つのフォームを非表示になります.クラスを含むフォームのみactive class が表示されます.
にform--header-container クラス使用linear-gradient フォームヘッダーをスタイル設定するには.
次はform--message-text クラスを追加するanimation プロパティをフォームが正常に送信されたときにフェードインします.

.form-active {
  z-index: 1000;
  display: block;
}
.form-active-animate {
  animation: moveRight 1s;
}
.form-inactive {
  display: block;
  animation: moveLeft 1s;
}

.step-active {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}

我々はform-active 現在のフォームを表示するクラス.また、プロパティz-index フォームを他の要素の上に配置する.
次に、form-active-animate クラスは、右から左に素敵なアニメーションの入り口を作る.クラス名もありますform-inactive これは、前のフォームを非表示に役立ちます.

@keyframes moveRight {
  0% {
    transform: translateX(-27rem) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(27rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ここで見ることができますkeyframes アニメーションを作る.
最初のアニメーションmoveRight プロパティを使用して左から右へ要素を移動しますtransform .
番目のアニメーションでは、これは相対的に同じプロセスです.ただし、要素が右側に移動します.
最後の動画fadeIn , フェードインフェイズインエフェクトが表示されます.

ジャバスクリプト

ここで見ることができるように、我々はClickイベントを聞いて、それからgotoNextForm 関数を処理する.

const formBtn1 = document.querySelector('#btn-1');
const formBtnPrev2 = document.querySelector('#btn-2-prev');
const formBtnNext2 = document.querySelector('#btn-2-next');
const formBtn3 = document.querySelector('#btn-3');

DOMと対話するには、querySelector メソッド.

// Button listener of form 1
formBtn1.addEventListener('click', function(e) {
  gotoNextForm(formBtn1, formBtnNext2, 1, 2);
  e.preventDefault();
});

// Next button listener of form 2
formBtnNext2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn3, 2, 3);
  e.preventDefault();
});

// Previous button listener of form 2
formBtnPrev2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn1, 2, 1);
  e.preventDefault();
});

// Button listener of form 3
formBtn3.addEventListener('click', function(e) {
  document.querySelector(`.step--3`).classList.remove('step-active');
  document.querySelector(`.step--4`).classList.add('step-active');
  formBtn3.parentElement.style.display = 'none';
  document.querySelector('.form--message').innerHTML = `
   <h1 class="form--message-text">Your account is successfully created </h1>
   `;
  e.preventDefault();
});

ここでは、フォームIDをパラメータとして渡し、メソッドを使用しますpreventDefault() ページの再読み込みを防ぐイベント.
聞き手formBtn3 ユーザーにメッセージを表示しなければならないので、少し異なります.だからこそ私たちはinnerHTML コンテンツを追加するには

const gotoNextForm = (prev, next, stepPrev, stepNext) => {
  // Get form through the button
  const prevForm = prev.parentElement;
  const nextForm = next.parentElement;
  const nextStep = document.querySelector(`.step--${stepNext}`);
  const prevStep = document.querySelector(`.step--${stepPrev}`);
  // Add active/inactive classes to both previous and next form
  nextForm.classList.add('form-active');
  nextForm.classList.add('form-active-animate');
  prevForm.classList.add('form-inactive');
  // Change the active step element
  prevStep.classList.remove('step-active');
  nextStep.classList.add('step-active');
  // Remove active/inactive classes to both previous an next form
  setTimeout(() => {
    prevForm.classList.remove('form-active');
    prevForm.classList.remove('form-inactive');
    nextForm.classList.remove('form-active-animate');
  }, 1000);
};

ここでは、DOMを使ってDOMを横断しますparentElement 選択したprevformとnextform変数のプロパティform 要素.
次に、ステッパー要素からフォームステップを選択するために変数を使用します.
その後、クラスを追加しますform-active and form-active-animate 次のフォーム要素に素敵なアニメーション効果を持っている.
次は削除form-active , form-inactive and form-active-animate settimeout ()を使用して1秒後のフォームからのクラスです.

すごい!我々は、HTML、CSS、およびJavaScriptで素晴らしいステッパーフォームを構築して行われます.
あなたは、新しい記事が公開されたときに通知を得るために私に従うことができます.
読書ありがとう!
BLOG
NEWSLETTER
GITHUB
CODEPEN