【Shopify】基本のメルマガ（ニュースレター）登録フォームの作り方

今回はメールマガジン（ニュースレター）の登録フォームの作り方を解説していきます。

実際にニュースレターの登録フォームを作ってみよう！

公式にサンプルのコードが掲載されているので、それをベースに解説していきます。

{% form 'customer' %}

  {{ form.errors | default_errors }}

  {% if form.posted_successfully? %}
    <p>Thanks for signing up!</p>
  {% else %}
    <p>Find out when we open:</p>
    <input type="hidden" name="contact[tags]" value="prospect, password page">
    <label for="email">Email address</label>
    <input type="email" name="contact[email]" id="email" placeholder="Your email">
    <input type="submit" value="Submit">
  {% endif %}

{% endform %}

引用元：https://shopify.dev/docs/themes/theme-templates/password-liquid

{% form ‘customer’ %}

まずメルマガ登録のためのフォームタグを設置するためにform ‘customer’のタグで一番外側を囲います。

{% if form.posted_successfully? %}

メルマガの登録フォームの送信が成功した場合の処理を書きます。
一番シンプルなメッセージであれば「メールマガジンの登録が完了しました」
承認メールが届く場合は「本登録用のメールを入力したメールアドレス宛に送信しました。」
などでしょうか。
メッセージは普通にpタグで書いてしまって大丈夫です。

入力フォームと送信ボタンを設置する

以下の形で入力フォームと送信ボタンを設置します。

<input type="email" name="contact[email]" id="email" placeholder="Your email">
<input type="submit" value="Submit">

入力フォームはinputタグでnameが”contact[email]”になっていればOK。placeholderは適宜変更して下さい。

ちなみに上記サンプルはパスワードページ作成用のコードのため、カスタマータグの記述がありますが、通常ページのフォームであれば、これは削除してしまっても構いません。

{{ form.errors | default_errors }}

最後にエラーが発生した場合の処理を書きます。
サンプルでは、fault_errorsでフィルターをかけることで、ループ処理をすることなく、デフォルトのエラーメッセージが読み込まれるようになっています。
オリジナルのメッセージを表示させたい場合は、以下のような形で別途指定をする必要があります。

{% if form.errors %}
　{% for error in form.errors %}
    {{ error }}
　{% endfor %}
{% endif %}

この辺り詳しくは公式のformオブジェクトのページを見ると分かりやすいと思います。
https://shopify.dev/docs/themes/liquid/reference/objects/form

Shopifyでメルマガ登録フォームを作る方法まとめ

基本的な登録フォームであれば上記サンプルのコードをベースにカスタマイズができると思います。ちなみに、メールだけでなく氏名や住所まで取得をしたい場合はinputタグを適切なnameで追加してあげればOKです。（アカウント登録ページなどと同じ）

「この記事が参考になった！」という方はTwitterをフォローして頂けると嬉しいです！ここまで読んでいただきありがとうございました！