Shopify Liquid お問い合わせフォームサンプル メモ

{% form 'contact' %}
          {% if form.posted_successfully? %}
            <p class="note form-success">
            お問い合わせありがとうございます。
            </p>
          {% endif %}
          <div class="form-group">
            <input type="text" placeholder="お名前" class="form-control" name="contact[name]" id="name">
          </div>
          
          <div class="form-group">
            <input type="email" placeholder="Email" class="form-control" name="contact[email]" id="email">
          </div>
         
          <div class="form-group">
            <input type="text" placeholder="タイトル" class="form-control" name="contact[subject]" id="subject">
          </div>
          
          <div class="form-group">
            <textarea rows="6" placeholder="メッセージ内容" class="form-control" name="contact[message]" id="message"></textarea>
          </div>
          <div>
            <input type="submit" id="contact-submit" class="btn btn-transparent" value="Submit">
          </div>
{% endform %}

{% form ‘contact’ %} {% endform %} で囲んだ中にフォームを作る。

こんな感じ (*見た目の感じはBootstrapのclassを使っています。)

‘contact’ と指定するとShopifyが自動的にこれはお問い合わせフォームなんだなと理解してくれる。

送信も上のコードのようにsubmitを割り振っていたらShopifyが自動的に判別してフォームから送信してくれるみたいです。

登録してあるショップオーナーのE-mailアドレスにこんな感じで届く。

返信先も自動的に入力したE-mailアドレスになっているみたいです。

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top