Contact form from product page with url or product id

Ignacio_Garabed
Tourist
33 0 1

Hello guys, I've been trying to add a form to mi product.liquid template because I need a form on every product page but I need that form to include the page url or product id or product title, anything that allows me to recognize where was the form sent from. I have the html form code wich I found on the forum:

I modified the fields because I only need one gap and the mails are arriving to my email account but that's as far as I've come

Pd: Sorry for my bad english

{% form 'contact' %}

  {% if form.posted_successfully? %}
    <div class="successForm feedback">
      {{ 'contact.form.post_success' | t }}
    </div>
  {% endif %}

  {% if form.errors %}
  <div class="errorForm feedback">
    <!-- {{ form.errors.size }} or {{ form.errors | size }} -->
    <p>Your contact form has {{ form.errors | size | pluralize: ‘an error’, ‘a few errors’ }}. To submit your form, make the following changes and try again:</p>
    {% for field in form.errors %}
      <p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
    {% endfor %}
  </div>
  {% endif %}
  
  <div id="contactFormWrapper">
    <p>
      <label>{{ 'DNI' }}</label>
      <textarea required rows="10" id="contactFormMessage" name="contact[body]"></textarea>
    </p>
    <p>
      <input type="submit" id="contactFormSubmit" value="{{ 'contact.form.send' | t }}" />
    </p>
  </div>

  {% endform %}

  <style>
  .contact-form {margin:1em 0}
  .feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}
  .feedback p {padding:0.5em 0 !important;margin:0 !important}
  .successForm {background:#bde0a8;color:green}
  .errorForm {background:#eebdbd;color:red}
  </style>
  

0 Likes
Eric_K_
Shopify Expert
115 22 49

I'm not 100% sure if that form code works from a product template. However, if it does, you can do this - in your code where this appears: 

<input type="submit" id="contactFormSubmit" value="{{ 'contact.form.send' | t }}" />

add these 2 lines right above it:

<input type="hidden" name="contact[product title]" value="{{ product.title }}">
<input type="hidden" name="contact[product url]" value="{{ shop.url }}{{ product.url }}">

This should add the product title and url to each product.

0 Likes
Ignacio_Garabed
Tourist
33 0 1

Thanks a lot. Actually it wasn't working. I'm using this one now:

{% form %}
    
  {% if form.posted_successfully? %}
    <div class="successForm feedback">
      {{ 'contact.form.post_success' | t }}
    </div>
  {% endif %}

  {% if form.errors %}
  <div class="errorForm feedback">
    <!-- {{ form.errors.size }} or {{ form.errors | size }} -->
    <p>Your contact form has {{ form.errors | size | pluralize: ‘an error’, ‘a few errors’ }}. To submit your form, make the following changes and try again:</p>
    {% for field in form.errors %}
      <p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
    {% endfor %}
  </div>
  {% endif %}

  <div id="contactFormWrapper">
    <p>
      <label>{{ 'contact.form.name' | t }}</label>
      <input type="text" required id="contactFormName" name="contact[name]">
    </p>
    <p>
      <label>{{ 'contact.form.email' | t }}</label>
      <input type="text" required id="contactFormEmail" name="contact[email]">
    </p>
    <p>
      <label>{{ 'contact.form.phone' | t }}</label>
      <input type="telephone" id="contactFormTelephone" name="contact[phone]">
    </p>
    <p>
      <label>{{ 'contact.form.message' | t }}</label>
      <textarea required rows="10" id="contactFormMessage" name="contact[body]"></textarea>
    </p>
    <p>
      <input type="submit" id="contactFormSubmit" value="{{ 'Borrar Aviso'}}" />
    </p>
      
  </div>
  
   <div>
      <input type="hidden" name="contact[body]" value="Borrar Aviso {{ product.title | escape }} " />         
    </div>


  {% endform %}

  <style>
  .contact-form {margin:1em 0}
  .feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}
  .feedback p {padding:0.5em 0 !important;margin:0 !important}
  .successForm {background:#bde0a8;color:green}
  .errorForm {background:#eebdbd;color:red}
  </style>

 

 

I figured out about the title id but not the url id wich you told me and I will now incorporate it.

The only problem I have now is that I need the email gap not to be required or necesary to send the form. If I erase that html lines I still get the message of "need an email" when trying to send the form.

Any ideas? Thank you, I'm very new at this

0 Likes
Eclectiques_Bou
New Member
2 0 0

Hello:

Did you ever get the Contact Form code to work for producing both the product title and the product url?

I want to do the same thing for my shopify products.

Any help is greatly appreciated.

Thanks.

Cindy

0 Likes

I have seen that this post is quite old. Nevertheless we had the same request and have written down what we have done see price-on-request form in th Shopify Narrative Theme. Maybe it is helpful to someone who stumples on this post.

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.
0 Likes