アニメーショントグルフォームの作成方法

はじめに

アニメーション切り替えフォームを作成しませんか？これは非常にシンプルで簡単に、少しのCSSで実現できます。このチュートリアルでは、税務準備クライアント受付フォームテンプレートを使用して、これを正確に行う方法を順を追って説明します。

フォームの作成

まず、フォームテンプレート税務準備クライアント受付フォームテンプレートに基づいた新しいフォームを作成することから始めます。これを実現するには、WordPress管理画面からWPForms » フォームテンプレートに移動し、テンプレートを検索フィールドにtaxと入力するとテンプレートが表示されます。このテンプレートにカーソルを合わせると、フォームを作成をクリックします。

このテンプレートは、メインのチェックボックスセクションのいずれかをクリックしたときにフォームのセクションを表示および非表示にするための条件付きロジックが既に設定されています。これらにアニメーションを適用することで、条件付きロジックがトリガーされたときの遷移がよりスムーズになります。

CSSの追加

次に、トランジションを適用するCSSを追加する時間です。カスタムCSSの追加方法と場所についてサポートが必要な場合は、このチュートリアルをご覧ください。

#wpforms-form-3342 .wpforms-conditional-show {
  display: block;
  animation: fade-in 1s;
}

#wpforms-form-3342 .wpforms-conditional-hide {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

CSSでは、フォームID3342をターゲットにしています。このIDはご自身のフォームIDに合わせて更新する必要があります。フォームIDの見つけ方についてサポートが必要な場合は、この役立つガイドを確認してください。

これで完了です！税務準備クライアント受付フォームテンプレートを使用して、アニメーション切り替えフォームを作成しました。フォーム送信時に紙吹雪アニメーションを追加することもできますか？確認メッセージに紙吹雪アニメーションを追加する方法に関するチュートリアルをご覧ください。