❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

LaunchCartフォーム機能で確認画面を飛ばしたりHTMLを自由に組む方法

テクニック

LaunchCartフォーム機能で確認画面を飛ばしたりHTMLを自由に組む方法

LaunchCartのフォーム機能では、タグを設置するだけで簡単にお問い合わせやアンケートのフォームを設置することができます。

ただ、基本的には出力されるHTMLは固定で、バリデーションも必須項目や文字数制限に限られ、海外向けでは敬遠される確認画面への遷移も飛ばすことができません。

簡単に実装したいときは便利ですが、ちょっとカスタマイズしたいときは、特別な方法が必要になってきます。

今回は、LaunchCartのフォーム機能を使いつつ、HTMLをカスタマイズし、確認画面を飛ばす方法をご紹介いたします。

HTMLを独自で組みたい

フォームを準備する

管理画面 > マーケティング > フォーム > 新規追加 から以下のマニュアルに沿ってフォームを作成してください。
フォーム編集・新規登録 | LaunchCart | 越境EC専用カート

フォームを設置したいテンプレートにHTMLでフォームを組む

通常この後はフォームを設置したいテンプレートに

のようなフォーム一覧に表示される「テンプレート用タグ」を設置しますが、
独自のHTMLで設置したい場合はこのタグを配置せず、以下のように任意のHTMLでフォームを設置します。

ただ、独自と言っても、いくつか抑えて置かなければならないポイントがあります。

  • フォームのHTMLは<form>で囲むこと(属性としてaction=””, method=”post”は必須。idは任意のID)
  • 配置する<input>、<textarea>、<select>などのフォームのname属性は管理画面で準備した項目の順に、q1, q2, q3… という値を設置し、項目数が一致していること

これらのポイントを押さえていれば、他は自由にHTMLを設定できます。

JavaScriptでアンケートの送信を設定する

自由にHTMLを組む場合、フォームの送信はJavaScriptのAjaxやFetchを使って行います。

jQueryを使う場合(IE11に対応)

ES2015(ES6)で記述する場合(IE11非対応)

これで、確認画面への遷移をスキップし、フォームを送信できるようになります。

HTMLを自由に設定できるので、HTML5の仕様に準じたバリデーションの配置や(詳しい方法はこちら→クライアント側のフォームデータ検証 – ウェブ開発を学ぶ | MDN)、完了の表示などが自由に操作できるようになります。

LaunchCartのフォーム機能でフォームをカスタマイズしたい場合にこの方法がお役に立てますと幸いです。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。