Shopify テーマ作成 プログラミング

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

この記事は約 11 分で読めます。

こんな方におすすめ

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

はじめに

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

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

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

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

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

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

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

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

ロボットかどうか聞かれます

 

送信できました!

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

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

スパムフィルタについて

shopifyにはデフォルトでスパムフィルタ機能がついています。

先ほどのコードの下記部分の内容から判断してくれます。

name="contact[body]"

そのため、お問い合わせ内容などは name="contact[body]" を使うと良いでしょう。

オススメアプリ紹介

オススメのアプリは下記記事がわかりやすかったので添付します。

https://shopify-guide.net/shopify-inquiry-forms/

まとめ

今回はお問い合わせフォームをアプリなどを使わずコードのみで作成する方法を学習しました。

wordpressのようにアプリを入れなくてもお問い合わせメールを取得できるので便利ですね。

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

https://github.com/masa-ino/shopify-training/tree/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/

ログイン機能の実施

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

-Shopify, テーマ作成, プログラミング

© 2021 AGATA CODE Powered by AFFINGER5