フォームコンポーネント

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

まず、コンポーネントは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でオブジェクトを追加することで増やせます。