いわゆるステップ毎に回答するタイプのフォームコンポーネントです。

まず、コンポーネントはVueを用いて読み込ませます。
あとは、HTML側にコンポーネントを貼り付けて設置します。

該当ファイル

<stepform
  title="StepForm"
  description="This is a demo of StepForm."
  url="/demo.json"
  post="/test.php"
  :inputs="[
    {
      name: '住所',
      type: 'text',
      required: false,
      placeholder: '番地まで'
    },
    {
      name: '性別',
      type: 'radio',
      required: true,
      child: ['男', '女', '該当なし']
    }
  ]"
  :words="{
    name: 'お名前',
    email: 'メールアドレス',
    input: 'お客様情報の入力',
    next: '次のステップへ',
    prev: '前のステップへ',
    return: '入力画面に戻る',
    send: '内容を送信する',
    alert: '項目を選択してください',
    required: '必須',
    formAlert: 'は必須項目です',
    formEmail: 'の入力情報は無効です'
  }">
  <div class="btn">Click!</div>
</stepform>

各ステップは別途json形式のファイルを読み込ませます。
ステップは回答によって分岐も行えますが、jsonの管理が面倒くさくなるので1分岐のみです。

最終的にはjsonで指定したURLにPOSTしますが、jsonの構造はユーザー入力部分の回答と、フォーム回答部分のオブジェクトです。
ユーザーが入力するメールアドレスなどはデフォルトですが、propsでオブジェクトを追加することで増やせます。

2014年のスケジュール表

↑ こんな感じです。

2022年のスケジュール表

↑ こんな感じです。

今回は非同期処理に変更し、コントラストをかなり落とした見た目です。
特に大きな機能追加もないシンプルなスケジュール管理システムです。

↑ 動作イメージ

2022年1月10日改訂
ガイドラインの日本語訳です。
サイトの利用について、注意事項をこのページに記載しています。
また、本サイトは英語での構築を行なっていますが、一部ページ、およびブログでは日本語での記述となります。

特記事項

サイト内の英語訳は、重要な箇所のみ翻訳して頂いています。
また、作品内の文章は外部サービスによる翻訳が殆どです。
(デザインやソースコードは、実物を見ることでおおよその質が判断できるため。)

お問い合わせ

基本的にお送り頂いたメールは拝見しておりますが、
業務の依頼や提携などは全て無視していますので、予めご理解ください。
また、内容によっては返信を控える可能性も御座います。

SNSについて

個人としてTwitterやFacebookなどSNSを利用していますが、開発用APIを取得するだけのアカウントとなります。
そのため、更新を行うことはありませんし、今後方針を変えることはありません。

ポリシー

このWebサイトでは、運営を通じて得た個人情報の重要性を認識し、その保護を責務と考え個人情報の適切な取り扱いに努めます。

Cookieについて

このサイト内で用いられるCookieはドメイン内でのみ機能し、外部での広告や解析に用いられることはありません。
また、当サイトではアクセス解析ツール「Google Analytics」を利用しトラフィックデータ収集しています。
トラフィックデータは匿名で収集されており、個人を特定するものではありません。