【Shopify】liquidを編集してコンタクトフォームをカスタマイズする方法

#概要

Shopifyでは、コンタクトフォームをデフォルト機能で簡単に実装することができます。しかし、デフォルト機能で実装することができるコンタクトフォームは、名前・電話番号・メールアドレス・メッセージ必要最低限の情報を入力する欄しかありません。

そこで、今回はliquidファイルを編集して、コンタクトフォームを編集する方法を解説します。




#クイックスタート

今回は、すでに作成済みのデモサイトを用いて解説します。使用テーマは「Debut」です。使用しているテーマによってコードは若干異なります。基本的な構成は同じなので、流用は可能です。

![スクリーンショット 2020-12-03 19.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/3cce3452-4e5c-1828-8c7f-4764f366a6eb.png)

なお、コンタクトフォームの実装方法については、省略します。詳しい実装方法が知りたい方は、こちらの記事をご覧ください。

[【Shopifyマスターへの道】#11 コンタクトフォームを作成しよう](https://www.unreact.jp/blog/roadmap-create-contact-form)

Shopifyマスターへの道は、Shopifyの構築を網羅的に解説しているシリーズ連載になリます。興味があれば、そちらも覗いてみてください。

編集するliquidファイルは、`page.contact.liquid`です。

![スクリーンショット 2020-12-03 18.54.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/4e003300-2862-5c91-a5e7-a392a715ebbd.png)

ここにコードを追加することで、コンタクトフォームに入力欄を追加していきます。




#`page.contact.liquid`の構造について

まず、`page.contact.liquid`の構造について理解します。まずコードの全体像をみます。

```.liquid
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
    </div>
  </div>
</div>

```

コードを読んでみると、`page.contact.liquid`は主に３つのブロックからなっています。

- タイトルを表示させるブロック
- コンテンツの内容を表示させるブロック
- コンタクトフォームを表示させるブロック

それぞれのコードをみましょう。

##タイトルを表示させるブロック

次のコードで、ページを作成する際に入力したタイトルを表示させています。

```.liquid
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
```

`<h1>`タグのなかで`{{ page.title }}`を呼び出しています。




##コンテンツの内容を表示させるブロック

次のコードで、ページを作成した際に入力したコンテンツの内容を表示しています。

```.liquid
      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}
```

`{% if page.content.size > 0 %}`でコンテンツの内容が入力されているか判定しています。`true`の場合、`{{ page.content }}`コンテンツの内容を呼び出して表示しています。




##コンタクトフォームを表示させるブロック

次のコードで、コンタクトフォームの表示を実装しています。

```.liquid
      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
```

`{% form 'contact', id: formId %}`から`{% endform %}`までが。ストアに送信される部分になります。
この部分には、4つの`<input>`タグがあり、それぞれ名前・Eメール・電話番号・メッセージを受け取ることができます。

つまり、この`{% form 'contact', id: formId %}`から`{% endform %}`の間に、`<input>`タグなどを増やすことで、コンタクトフォームをカスタマイズすることができます。




#名前のフリガナの入力欄を作成する

シンプルな入力欄を増やします。フリガナを入力するための`<input>`タグを書きます。`<input>`タグの書き方は、HTMLの知識になってくるので、ここでの詳しい説明は割愛します。

名前の横に配置したいので、名前の`<div>`タグとEメールの`<div>`タグの間に記述します。`<div class="grid__item medium-up--one-half">`という`<div>`タグで囲うことで、半分のカラム幅の入力欄を実装できます。

以下のコードを追記しましょう。

```.liquid
<div class="grid__item medium-up--one-half">
  <label for="{{ formId}}-furigana">フリガナ</label>
  <input type="text" id="{{ formId}}-furigana" name="contact[フリガナ]" >
</div>
```

![スクリーンショット 2020-12-04 10.18.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/519fabd2-0fbc-9e88-c420-a5039eb1bec5.png)

このように追記できたら、一旦コードを保存しプレビュー画面で確認します。

![スクリーンショット 2020-12-04 10.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/e1a640f8-fd2e-e5f5-6246-158e56810f8a.png)

このように実装できました。Eメールの隣が空いてしまっているので、そこに新たな入力欄を追加します。




#性別の選択欄を作成する

`<select>`タグを用いて、性別の選択欄を作成します。`<select>`タグを用いると、ドロップダウン式の選択欄を作成することができます。`<select>`タグの中に`<option>`タグで選択肢を指定していきます。

以下のコードをEメールの入力欄の後ろに記述してください。

```.liquid
<div class="grid__item medium-up--one-half">
  <label for="{{ formId}}-sex" >性別</label>
  <select id="{{ formId}}-sex" name="contact[性別]">
    <option>--選択してください--</option>
    <option>男性</option>
    <option>女性</option>
    <option>その他</option>
  </select>
</div>
```
![スクリーンショット 2020-12-04 14.21.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/adfc8ced-00f3-635f-a65d-798c5a28b9ba.png)

追記したらコードを保存し、プレビュー画面で確認しましょう。

![スクリーンショット 2020-12-04 14.22.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/a26a69d9-d0e1-679a-32b7-3b3ed2cbfa1c.png)




#電話番号の入力欄を削除する

元からある入力欄を削除してみましょう。例として電話番号の入力欄を削除してみます。

以下のコードを削除してください。

```.liquid
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">       　　
```

削除したら保存し、プレビュー画面で確認します。

![スクリーンショット 2020-12-04 14.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/b1f4e3d0-b237-2f5c-956b-d260c0442876.png)

問題なく削除することができました。

#チェックボックスを作成する

次に、`<input>`タグの`type="checbox"`属性を使って、チェックボックスを実装します。

以下のコードを追記します。

```.liquid
<p>お問い合わせ内容を選択してください（複数選択可）</p>
<label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="お仕事のご依頼">お仕事のご依頼</label>
label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="無料相談">無料相談</label>
<label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="その他">その他</label><br>
```
![スクリーンショット 2020-12-04 14.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/90bbaeed-ec07-8113-9308-881a6f4018bb.png)

コードを保存して、確認しましょう。
![スクリーンショット 2020-12-04 14.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/eb37f120-da37-5fb9-f21b-6258d026c9d1.png)

このようにチェックボックスを実装することができました。

以上で、フォームの編集は終了です。


#送信できることを確認する

送信フォームが正常に送信することができるか、確認します。作成したコンタクトフォームで、必要事項を入力し送信します。
![スクリーンショット 2020-12-04 14.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/1f1e1ad8-6b5c-3e23-152e-c2c5a41d5d8a.png)


以下のようなメッセージが表示されれば送信は、正常に完了しています。
![スクリーンショット 2020-12-04 14.55.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/d693eb10-1c34-649e-3140-95f767dd79b6.png)

実際に届いたメールはこのようになっています。
![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/36e45c21-8bb1-c2ce-98c5-0878b7afae24.png)


最後まで読んでいただきありがとうございました。