二十三年の雑記

新年のあいさつ

あけましておめでとうございます。

暇つぶしに適当なものを作りました

いわゆるステップ毎に回答するタイプのフォームコンポーネントです。
どういった内容かを記載します。

まず、コンポーネントは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形式のファイルを読み込ませます。
伴って、WordpressとかのCMSでも流用できます。
ステップは回答によって分岐も行えますが、jsonの管理が面倒くさくなるので1分岐のみです。

最終的にはjsonで指定したURLにPOSTしますが、jsonの構造はユーザー入力部分の回答と、フォーム回答部分のオブジェクトです。
ユーザーが入力するメールアドレスなどはデフォルトですが、propsでオブジェクトを追加することで増やせます。
面倒くさかったので、チェックボックス以外のフォーマットに対応し、必須可否もオブジェクトに記載することで対応可能です。