Shopifyでオリジナルテーマを作成しよう～No.7[お問い合わせフォームの作成]～

こんな方におすすめ

Shopifyでオリジナルテーマを作成したい
Shopifyでお問い合わせフォームを作成したい

はじめに

Shopifyオリジナルテーマを作成しよう、の第7回は「お問い合わせフォームの作成」です。

下の画像のようなページを作成します

なお、今回はアプリなどを使わず、コードのみで作成していきます。
そのため、高性能な機能は付けず、送信、自動返信機能のみつけます。

今回のコードは下記リンクにまとめてあるので参考にしてみてください。（branch：no7）

https://github.com/masa-ino/shopify-training/tree/no7

また、今回のテーマのもとのhtmlは第１回の記事に公開してあるので、そちらからダウンロードをお願いします。

https://agata-code.com/programming/original-no1/

お問い合わせフォームを作成しよう

固定ページの作成

まず、お問い合わせのページを作成します。

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 %}

それでは実際に送信してみましょう。