お問い合わせフォームの追加

参考
http://wiki.shopify.com/How_to_add_a_contact_form_to_your_shop

  1. 右上「Theme」 → 「Template Editor」を選択
  2. Templatesの項目に「page.contact.liquid」があるか探す
    (2013年1月15日現在の初期テンプレートでは「page.contact.liquid」はあります)
    無い場合は以下を実行。ある場合は無視

    1. 同画面「Template Editor」左のTemplatesの項目下の「add a new template」をクリック
    2. セレクトボックスで「page」を選択し、下のボックスに「contact」を入力し、「Create template」 ボタンを押す
    3. 右の編集エリアで以下のコードを探す
      {{ page.content }}
    4. そのコードの下に以下のコードを挿入
        {% form 'contact' %}
      
          {% if form.posted_successfully? %}
            <p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
          {% endif %}
      
          {% if form.errors %}
          <p>
            <ul style="color:#E0360F">
            {% for field in form.errors %}
              {% if field == 'body' %}
              <li>Your message cannot be blank.</li>
              {% endif %}
              {% if field == 'email' %}
              <li>Please enter a valid email address.</li>
              {% endif %}        
            {% endfor %}
            </ul>
          </p>
          {% endif %}
      
          <ul id="contact-form">
            <li>
              <label for="name">Name</label>
              <input type="text" id="name" name="contact[name]" />
            </li> 
            <li>
              <label for="email">Email</label>
              <input type="email" id="email" name="contact[email]" />
            </li>   
            <li>
              <label for="message">Message</label>
              <textarea id="message" name="contact[body]"></textarea>
            </li>
            <li>
              <input type="submit" value="Send" />
            </li>
          </ul>
        {% endform %}
  3. 上部メニュー「Blogs & Pages」を選択
  4. 「Create a new page」で新しいページを作る
  5. Title を入力して(今回の場合は「Contact Us」)「Create page」ボタンを押す

以上
これで、http://ホームページURL/pages/contact-us にアクセスすると、コンタクトフォームが表示されます。

 

にほんブログ村 IT技術ブログ IT技術メモへ
ブログランキングならblogram

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です