2021/03/03
LaunchCartフォーム機能で確認画面を飛ばしたりHTMLを自由に組む方法
LaunchCartのフォーム機能では、タグを設置するだけで簡単にお問い合わせやアンケートのフォームを設置することができます。
ただ、基本的には出力されるHTMLは固定で、バリデーションも必須項目や文字数制限に限られ、海外向けでは敬遠される確認画面への遷移も飛ばすことができません。
簡単に実装したいときは便利ですが、ちょっとカスタマイズしたいときは、特別な方法が必要になってきます。
今回は、LaunchCartのフォーム機能を使いつつ、HTMLをカスタマイズし、確認画面を飛ばす方法をご紹介いたします。
HTMLを独自で組みたい
フォームを準備する
管理画面 > マーケティング > フォーム > 新規追加 から以下のマニュアルに沿ってフォームを作成してください。
フォーム編集・新規登録 | LaunchCart | 越境EC専用カート
フォームを設置したいテンプレートにHTMLでフォームを組む
通常この後はフォームを設置したいテンプレートに
|
1 | {{ enquete_api.getEnqueteHtml(1) }} |
のようなフォーム一覧に表示される「テンプレート用タグ」を設置しますが、
独自のHTMLで設置したい場合はこのタグを配置せず、以下のように任意のHTMLでフォームを設置します。
|
1 2 3 4 5 6 7 8 9 10 11 | <form action="" method="post" id="enquete_form_1"> <dl class="originalForm"> <dt class="originalForm__title">名前</dt> <dd class="originalForm__detail"><input type="text" name="q1" required></dd> <dt class="originalForm__title">メールアドレス</dt> <dd class="originalForm__detail"><input type="email" name="q2" required></dd> <dt class="originalForm__title">お問い合わせ内容</dt> <dd class="originalForm__detail"><textarea name="q3" required></textarea></dd> </dl> <p><button type="submit">送信</button></p> </form> |
ただ、独自と言っても、いくつか抑えて置かなければならないポイントがあります。
- フォームのHTMLは<form>で囲むこと(属性としてaction=””, method=”post”は必須。idは任意のID)
- 配置する<input>、<textarea>、<select>などのフォームのname属性は管理画面で準備した項目の順に、q1, q2, q3… という値を設置し、項目数が一致していること
これらのポイントを押さえていれば、他は自由にHTMLを設定できます。
JavaScriptでアンケートの送信を設定する
自由にHTMLを組む場合、フォームの送信はJavaScriptのAjaxやFetchを使って行います。
jQueryを使う場合（IE11に対応）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function () { var $form = $('#enquete_form_1'); //←フォームに設定したID $form.on('submit', (e) => { e.preventDefault(); $.ajax({ url: '/enquete_result/1', //← テンプレートタグenquete_api.getEnqueteHtml(1)のカッコ内の数字 method: 'POST', data: $form.serialize() }) .then(function () { $form.html('<div><h3>お問い合わせありがとうございました。</h3></div>'); }).fail(function (jqXHR, textStatus, errorThrown) { console.error(textStatus + ': ' + errorThrown); $form.html('<div class="error"><h3>内容の送信に失敗しました。</h3></div>'); }); }); }); |
ES2015(ES6)で記述する場合（IE11非対応）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | (() => { const enqueteFormElement = document.getElementById('enquete_form_1'); //←フォームに設定したID enqueteFormElement.addEventListener('submit', (e) => { e.preventDefault(); let formData = new FormData(enqueteFormElement); fetch('/enquete_result/1', { //← テンプレートタグenquete_api.getEnqueteHtml(1)のカッコ内の数字 method: 'POST', body: formData }) .then(response => response.text()) .then(() => { enqueteFormElement.innerHTML = '<div><h3>お問い合わせありがとうございました。</h3></div>'; }) .catch((error) => { console.error('Error:', error); enqueteFormElement.innerHTML = '<div class="error"><h3>内容の送信に失敗しました。</h3></div>'; }); }); })(); |
これで、確認画面への遷移をスキップし、フォームを送信できるようになります。
HTMLを自由に設定できるので、HTML5の仕様に準じたバリデーションの配置や（詳しい方法はこちら→クライアント側のフォームデータ検証 – ウェブ開発を学ぶ | MDN）、完了の表示などが自由に操作できるようになります。
LaunchCartのフォーム機能でフォームをカスタマイズしたい場合にこの方法がお役に立てますと幸いです。
Author Profile
SHARE
