Shopifyのお問い合わせフォームをカスタマイズ｜placeholder・必須入力・サンクスページ遷移

読者

placeholderを書いたのに、入力欄へ文字が表示されません。記述方法が間違っているのでしょうか？

木村

HTMLが正しくても、テーマのCSSでplaceholderが透明にされている場合があります。まず属性とCSSの両方を確認します。

読者

お問い合わせ内容を必須にして、送信後は「送信ありがとうございます」というページへ移動できますか？

木村

必須入力はrequired属性、送信後の移動先はformタグのreturn_toで設定できます。テーマごとの差も含めて、順番に確認しましょう。

placeholderを書いたのに、入力欄へ文字が表示されません。記述方法が間違っているのでしょうか？

HTMLが正しくても、テーマのCSSでplaceholderが透明にされている場合があります。まず属性とCSSの両方を確認します。

お問い合わせ内容を必須にして、送信後は「送信ありがとうございます」というページへ移動できますか？

必須入力はrequired属性、送信後の移動先はformタグのreturn_toで設定できます。テーマごとの差も含めて、順番に確認しましょう。

Shopify標準フォームの仕組み

最初に、Shopifyのテーマでお問い合わせが送信される仕組みを確認します。見た目を変更するHTMLと、送信処理を担当するShopifyの機能を分けて考えることが大切です。

contactフォームを利用する

テーマ内では、Liquidの{% form 'contact' %}を使ってお問い合わせフォームを作成します。開始タグと{% endform %}の間へ入力欄と送信ボタンを置くと、Shopifyが送信先や必要なhidden要素を生成します。

メールアドレスは決められた名前を使う

Shopify公式ドキュメントでは、メールアドレス欄にname="contact[email]"を使用します。お名前や電話番号、お問い合わせ内容などの追加項目は、contact[項目名]の形式で指定します。角括弧内の名前は、店舗へ届く通知で項目名として扱われます。

標準フォームを残して調整する

見た目を変えるために通常のHTMLフォームへ置き換えると、Shopify標準の送信処理が使えなくなります。formタグとname属性は残し、placeholderやrequiredなど必要な属性だけを追加する方法が分かりやすく安全です。

フォームの編集場所を確認する

お問い合わせフォームのコードはテーマによって異なります。先に対象ファイルを特定してから、複製テーマで編集します。

テーマコードを開く

Shopify管理画面で「オンラインストア → テーマ」を開き、複製したテーマのメニューから「コードを編集」を選択します。公開テーマを直接変更すると表示中のストアへすぐ影響するため、複製テーマで作業します。

contactを検索する

コードエディターでform 'contact'、ContactForm-email、contact[email]などを検索します。Dawn系のテーマではsections/contact-form.liquidにあることが多いですが、独自テーマでは別名のセクションやブロックへ分けられている場合があります。

既存ファイルを直接増やしすぎない

テーマ更新を考慮する場合は、標準ファイルを複製してカスタム用セクションを作り、ページテンプレートからそのセクションを使う方法もあります。どちらを選ぶ場合も、変更前のファイル名と変更箇所を記録しておくと戻しやすくなります。

placeholderを表示する

placeholderは、入力前の欄へ「山田花子」や「example@email.com」のような入力例を表示する属性です。属性を書いても見えない場合はCSSも確認します。

入力欄へ属性を追加する

各入力要素へplaceholderを追加します。placeholderはラベルの代わりではないため、labelは削除せずに残します。

<label for="ContactForm-name">お名前</label>
<input
  type="text"
  id="ContactForm-name"
  name="contact[お名前]"
  value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
  placeholder="山田花子"
>

<label for="ContactForm-email">メールアドレス</label>
<input
  type="email"
  id="ContactForm-email"
  name="contact[email]"
  value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
  placeholder="example@email.com"
  required
>

CSSで消されていないか確認する

実際の調査では、テーマ標準CSSの.field__input::placeholderにopacity: 0;が指定されていたため、HTMLへplaceholderを書いても見えませんでした。ブラウザーの開発者ツールで入力欄を選択し、::placeholderへ適用されるCSSを確認します。

フォームだけ表示を上書きする

テーマ全体の入力欄へ影響させないよう、お問い合わせフォームの親クラスを付けて範囲を限定します。次の例では.c-contact-form内のplaceholderだけを表示します。

/* お問い合わせフォーム内の入力例だけを表示する */
.c-contact-form .field__input::placeholder {
  color: #757575;
  opacity: 1;
}

標準CSSより先に読み込まれると上書きされないことがあります。カスタムCSSが後から読み込まれていることと、親クラスが実際のHTMLに付いていることも確認してください。

必須入力を設定する

入力必須にしたい項目にはHTMLのrequired属性を追加します。見た目に「必須」と書くだけでは、ブラウザーの未入力チェックは行われません。

textareaへrequiredを付ける

お問い合わせ内容を必須にする場合は、対象のtextareaへrequiredを追加します。入力値を再表示するため、開始タグと終了タグの間にはform.bodyを残します。

<label for="ContactForm-body">お問い合わせ内容 必須</label>
<textarea
  rows="10"
  id="ContactForm-body"
  class="text-area field__input"
  name="contact[お問い合わせ内容]"
  placeholder="商品名やご相談内容をご記入ください"
  required
>{{- form.body -}}</textarea>

メール欄にも必須属性を設定する

メールアドレスはShopify標準フォームで重要な項目です。type="email"、name="contact[email]"、requiredを組み合わせると、未入力と一般的なメール形式をブラウザーが確認します。

requiredだけで安全と判断しない

requiredはブラウザー側の入力補助であり、迷惑送信を防ぐセキュリティ機能ではありません。実際の送信はShopify標準のcontactフォームへ任せ、必要に応じてShopifyのスパム対策やフォームアプリも検討します。

サンクスページへ移動する

送信後の案内には、同じページへ完了メッセージを表示する方法と、専用のサンクスページへ移動する方法があります。サイトの構成に合わせて選びます。

標準の完了メッセージを表示する

form.posted_successfully?を使うと、送信に成功したときだけフォーム内へ完了メッセージを表示できます。別ページを用意しない場合に向いています。

{% if form.posted_successfully? %}
  <p class="form-status" tabindex="-1" autofocus>
    お問い合わせを受け付けました。
  </p>
{% elsif form.errors %}
  {{ form.errors | default_errors }}
{% endif %}

return_toで移動先を指定する

専用ページへ移動する場合は、contactフォームの開始タグへreturn_toを追加します。次の例では、送信後の移動先を/pages/contact-thanksにしています。

{% form 'contact', id: 'ContactForm', class: 'contact-form', return_to: '/pages/contact-thanks' %}
  <!-- 入力欄と送信ボタンを記述する -->
{% endform %}

return_toには相対パスを指定できます。URLを直接書く代わりに、サイト内のURL設計に合わせて変更してください。

完了ページを先に作成する

管理画面で「オンラインストア → ページ → ページを追加」を開き、「お問い合わせありがとうございます」などの固定ページを作成します。URLハンドルがcontact-thanksになっていることを確認し、必要であれば専用のページテンプレートを割り当てます。コードのURLと実際のページハンドルが一致していないと、送信後に404ページが表示されます。

フォーム全体を組み立てる

ここまでの設定を一つのフォームへまとめます。使用中のテーマへそのまま置き換えるのではなく、既存のクラス名や翻訳処理を残しながら必要な部分を取り入れてください。

基本の実装例

次の例では、お名前・メールアドレス・電話番号・お問い合わせ内容を用意し、メールと本文を必須にしています。送信後はサンクスページへ移動します。

<div class="c-contact-form">
  {% form 'contact', id: 'ContactForm', class: 'contact-form', return_to: '/pages/contact-thanks' %}
    {% if form.errors %}
      {{ form.errors | default_errors }}
    {% endif %}

    <label for="ContactForm-name">お名前</label>
    <input
      type="text"
      id="ContactForm-name"
      class="field__input"
      name="contact[お名前]"
      value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
      placeholder="山田花子"
    >

    <label for="ContactForm-email">メールアドレス 必須</label>
    <input
      type="email"
      id="ContactForm-email"
      class="field__input"
      name="contact[email]"
      value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
      placeholder="example@email.com"
      required
    >

    <label for="ContactForm-phone">電話番号（任意）</label>
    <input
      type="tel"
      id="ContactForm-phone"
      class="field__input"
      name="contact[電話番号]"
      value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
      placeholder="090-1234-5678"
    >

    <label for="ContactForm-body">お問い合わせ内容 必須</label>
    <textarea
      id="ContactForm-body"
      class="text-area field__input"
      name="contact[お問い合わせ内容]"
      rows="10"
      placeholder="商品名やご相談内容をご記入ください"
      required
    >{{- form.body -}}</textarea>

    <button type="submit">送信する</button>
  {% endform %}
</div>

既存のエラー表示を残す

テーマにメールアドレス用のエラー表示やアクセシビリティ属性がある場合は削除せず、既存コードへplaceholderとrequiredを追加します。フォーム全体を短いサンプルへ置き換えるより、現在のテーマが持つ機能を残せます。

テーマ固有のクラスを合わせる

サンプルのfield__inputやc-contact-formは例です。使用中のテーマに同じクラスがなければ、既存の入力欄クラスへ読み替えます。CSSを追加するときは、ブラウザーの開発者ツールで実際の親要素と入力欄を確認します。

送信前後の動作を確認する

コードを保存しただけでは完了ではありません。入力前、入力エラー、送信成功の状態を複製テーマのプレビューで確認します。

入力前の表示を確認する

• お名前・メール・電話番号・本文のplaceholderが表示される
• placeholderと入力文字の色が見分けられる
• labelが残っていて、項目名を確認できる
• スマートフォンでも入力欄が画面からはみ出さない

未入力の状態を確認する

メールアドレスとお問い合わせ内容を空欄にして送信ボタンを押し、ブラウザーの必須入力メッセージが表示されることを確認します。無効なメール形式でも送信されないことを確認します。

送信成功と通知を確認する

• 正しい内容で送信するとサンクスページへ移動する
• 移動先が404ページにならない
• 店舗側へ通知メールが届く
• 通知メールに追加した項目が分かる名前で記載される
• 戻る操作をしても同じ内容が意図せず再送信されない

テスト送信はストアの受信先へ実際の通知を発生させます。テストであることが分かる内容を入力し、必要に応じて運営担当者へ事前に共有してください。

まとめ

Shopify標準のお問い合わせフォームを維持しながら、入力例・必須入力・送信後の案内を調整する方法を解説しました。

• お問い合わせフォームはLiquidのform 'contact'を利用する
• メールアドレスのname属性はcontact[email]にする
• placeholderが見えないときはHTMLだけでなく::placeholderのCSSも確認する
• CSSはフォームの親クラスを付けて影響範囲を限定する
• 必須項目には見た目の「必須」表示とrequired属性の両方を設定する
• 専用の完了ページへ移動するときはreturn_toとページのURLハンドルを一致させる
• 入力前・エラー・送信成功・通知メールまで一通り確認する

テーマごとにクラス名やファイル構成は異なります。まず既存フォームの送信処理を残し、必要な属性とCSSだけを小さく追加することから始めてください。