こんな方におすすめ
- Shopifyでオリジナルテーマを作成したい
- Shopifyでお問い合わせフォームを作成したい
はじめに
Shopifyオリジナルテーマを作成しよう、の第7回は「お問い合わせフォームの作成」です。
下の画像のようなページを作成します

なお、今回はアプリなどを使わず、コードのみで作成していきます。
そのため、高性能な機能は付けず、送信、自動返信機能のみつけます。
今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no7)
また、今回のテーマのもとのhtmlは第1回の記事に公開してあるので、そちらからダウンロードをお願いします。
お問い合わせフォームを作成しよう
固定ページの作成
まず、お問い合わせのページを作成します。
page.contact.liquidがデフォルトで用意されているため、それを管理画面でページに関連付けます。
Aboutページと同様に
「ページ」→「Contact」をクリックし、テンプレートを「page.contact」に変更してください。

変更できたら保存をしてください。
コードを編集
Shopifyでは公式がお問い合わせフォームのテンプレートが用意されています。
page.contact.liquidを開くと下記コードが出てきます。
<h1>{{ page.title }}</h1>
{% form 'contact' %}
//送れたか判断
{% if form.posted_successfully? %} Thank you for your contact {% endif %}
//エラー表示
{{ form.errors | default_errors }}
<label for="ContactFormName">name</label>
<input type="text" id="ContactFormName" name="contact[name]">
<label for="ContactFormEmail">email</label>
<input type="email" id="ContactFormEmail" name="contact[email]">
<label for="ContactFormPhone">phone</label>
<input type="tel" id="ContactFormPhone" name="contact[phone]">
<label for="ContactFormMessage">message</label>
<textarea rows="10" id="ContactFormMessage" name="contact[body]"></textarea>
<input type="submit" value="send">
{% endform %}
このコードの解説をしていきます。
まず、お問い合わせフォームを作る際は下記コードで囲う必要があります。
{% form 'contact' %}
{% endform %}
これが<form>の代わりになります。
続いて、正常に送れたかどうかを下記コードで判断できます。
{% if form.posted_successfully? %} {% endif %}
エラーを表示するためには下記コードで表示できます。
{{ form.errors | default_errors }}
そして、input要素に、
name="contact[name]"
のように contact[任意の名前]
と指定するだけで送ることができます。非常に簡単ですね!
では、オリジナルのデザインにするために、page.contact.liquidを下記コードに変更してください。
{% section 'contact-header' %}
{% render 'breadcrumbs' %}
<div class="main">
<div class="container">
<h3 class="text-center mb-5 f36">お問い合わせ</h3>
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="text-center">
お問い合わせありがとうございます。
</p>
{% endif %}
<div class="form-group">
<label for="name">名前</label>
<input type="text" class="form-control" id="name" placeholder="" name="contact[name]">
</div>
<div class="form-group">
<label for="email">メール</label>
<input type="email" class="form-control" id="email" placeholder="" name="contact[email]">
</div>
<div class="form-group">
<label for="tel">電話番号</label>
<input type="tel" class="form-control" id="tel" placeholder="" name="contact[phone]">
</div>
<div class="form-group">
<label for="content">お問い合わせ内容</label>
<textarea class="form-control" id="content" rows="4" name="contact[body]"></textarea>
</div>
<button type="submit" class="d-block mx-auto btn btn-secondary">送信する</button>
{% endform %}
</div>
</div>
これで送信することができます。
なお、sectionsフォルダにcontact-header.liquid を追加し、下記コードを貼り付けてください。
<div class="subpage_bg_img d-flex justify-content-center align-items-center" style="background-image: url('{{section.settings.contact_header_image | img_url: '1920x'}}');">
<h2 class="f36">CONTACT</h2>
</div>
{% schema %}
{
"name": "Contact Header Image",
"settings": [
{
"type": "image_picker",
"id": "contact_header_image",
"label": "Contact Header Image"
}
]
}
{% endschema %}
それでは実際に送信してみましょう。



メールもショップ運営者側に届きました。

この送信先のメールアドレスは管理画面から
「設定」→「一般設定」の送信元のメールアドレスから変更できます。

スパムフィルタについて
shopifyにはデフォルトでスパムフィルタ機能がついています。
先ほどのコードの下記部分の内容から判断してくれます。
name="contact[body]"
そのため、お問い合わせ内容などは name="contact[body]" を使うと良いでしょう。
オススメアプリ紹介
オススメのアプリは下記記事がわかりやすかったので添付します。
まとめ
今回はお問い合わせフォームをアプリなどを使わずコードのみで作成する方法を学習しました。
wordpressのようにアプリを入れなくてもお問い合わせメールを取得できるので便利ですね。
今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no7)
なお、質問や要望がありましたら、お問い合わせフォームまたはコメント欄によろしくお願いします。
次回はコレクションページを作成していきます。
参考文献
・お問い合わせフォームの作成
https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form
・お問い合わせフォームの基本的な機能の説明(日本語)
https://help.shopify.com/ja/manual/online-store/os/using-themes/change-the-layout/add-contact-form
・アプリ紹介
https://shopify-guide.net/shopify-inquiry-forms/
ページ一覧
全体像の確認
https://agata-code.com/programming/original-no1/
開発環境のセット
https://agata-code.com/programming/original-no2/
ヘッダーの作成
https://agata-code.com/programming/original-no3/
フッターの作成
https://agata-code.com/programming/original-no4/
トップページの作成
https://agata-code.com/programming/original-no5/
Aboutページの作成
https://agata-code.com/programming/original-no6/
お問い合わせフォームの作成
https://agata-code.com/programming/original-no7/
コレクションページの作成
https://agata-code.com/programming/original-no8/
個別商品ページの作成
https://agata-code.com/programming/original-no9/
カートページの作成
https://agata-code.com/programming/original-no10/
ブログの作成
https://agata-code.com/programming/original-no11/
ログイン機能の実施