[Shopify]コンタクトフォームに新項目を追加する、必須項目にする方法

 Shopify お問い合わせフォーム 新規項目追加

 

Shopifyのデフォルトコンタクトフォームは、項目数が少ないなぁ。

名前、メールアドレス、電話番号、問い合わせ内容。

4項目しかありません。しかも必須項目も少ない。

ちょっとデザインいじっていますが、みなさんの初期コンタクトフォームもおおまかこんな感じなのではないでしょうか。

shopify コンタクトフォーム 項目数 少ない

 

比較的シンプルなビジネスであれば良いかも知れませんが、もっと多くの項目を追加したい、必須項目を増やしたい。といった流れはビジネスが大きくなるに連れて必然の流れかと思います。

なので、今回はコンタクトフォームにおける新規項目の追加、必須項目の設定方法についてまとめていきます。

 

Contact Formを編集する場所・ファイル

編集するファイルは、初期設定であればpage.contact.liquidファイルになります。

Shopify Contact Form 項目追加 対象ファイル

 

このファイルにたどり着くには、管理画面→オンラインストア→テーマ→現在のテーマ→コード編集→templatesフォルダ→page.contact.liquidに移動します。

Shopify 管理画面 コンタクトフォーム

 

そのpage.contact.liquidが今回編集していくファイルになります。

(今回Debutの無料テーマを使用していますが、テーマによって多少名前が変わっているかも知れません。)

その中でも、今回項目を追加していく、必須項目にしていく際に編集する場所は、下記Formタグの中になります。

 

{% form 'contact', id: formId %}
・・・・・・・・・・・・・・・
いろいろな項目入っています
・・・・・・・・・・・・・・・
{% endform %}
この中に入れないとお問い合わせフォーム提出の際に値が拾えないのでご注意ください。

 

Contact Form新規項目の追加方法

そして、本題の項目の追加です。

今回は、上記コンタクトフォームに、

  • 個人か法人かを選ぶボタン
  • 既存サイトURL入力欄

を追加していきます。

 

個人か法人かを選ぶボタンを追加する

 

それでは、早速個人か法人かを選ぶボタンを追加します。 

 

<label>個人・法人</label><br />
<input
type="radio"
id="ContactFormKojin”
name="contact[個人・法人]”
value=“個人”
/>
法人<br />
<input
type="radio"
id="contactFormHoujin”
name="contact[個人・法人]”
value=“法人”
/>
法人 

 

 こんな感じです。

ちょっと説明すると、、、

name="contact[項目名]"
id="項目に準じた任意の文字列"
value="項目が選択された場合の値"

 

 になっています。

 

デザイン調整必要ですが、ボタン自体はちゃんと入りましたね。

Shopify お問い合わせ 項目追加

 

既存サイトURL入力欄

 

次に既存サイト(あれば)入力していただくテキストボックスを設置していきます。

編集する場所は、先ほどと同じくformタグの内側です。

 

<label for="ContactFormUrl">サイトURL(お持ちの場合)</label>
<input
type="text"
id="ContactFormUrl"
name="contact[URL]"
/>

 

 今回入れるコードはこんな感じで、id, nameは先ほど説明した通りです。

このコードを入れると、、、

Shopify url テキストボックス追加 お問い合わせ

 

ちゃんとテキスト入力ボックスが追加されました!

 

Contact Form項目入力を必須にする方法

 

次に、お問い合わせフォーム内の項目を必須にする方法です。

 

こちらの方が比較的簡単なので、非エンジニアの方でもパパッとできるかも知れません。

試しに先ほど作成したURL入力欄を必須項目にしてみましょう。

<label for="ContactFormUrl">サイトURL(お持ちの場合)</label>
<input
required
type="text"
id="ContactFormUrl"
name="contact[URL]"
/>

 

違いはわかりましたか? 

<input>タグの中に、requiredを入れただけです。

これで必須項目にすることができました。

入力されずにお問い合わせボタンを押そうとすると、、

Shopify お問い合わせ エラー 必須項目

 

 

[Shopify]お問い合わせフォームに新項目を追加する、必須項目にする方法 まとめ

 

以上、いかがだったでしょうか。

項目の追加や必須項目の設定。軽くみられがちですが、大切なことですよね。

(必要な情報が無いと、問い合わせしてくれた人と何回もやりとりしなければならなかったり、お互いにとって手間になってしまいます。)

と言っていますが、私のEC Penguinサイトもお問い合わせフォーム完璧では無いので、もうちょっと作り込みます笑

それでは本日も良い1日を!