My contact form is not working.

augustindoublet
Tourist
9 0 3

My contact form leads to an error page

Replies 4 (4)

Sam_ian
Shopify Partner
63 3 11

Hello Augustindoublet,

Which contact form are you using?could you please share the landing page?

Thanks

Your COFFEE TIP! Can Create something incredible!
Require Assistance with google Analytics?
EMAIL ME!
Solved? accept it as solution with like
augustindoublet
Tourist
9 0 3
Thecurators.com
augustindoublet
Tourist
9 0 3

I have this in place for certain products with no price like : https://thecurators.com/products/embrace-1

You would be a lifesaver if you could identify what was wrong

here is the code we are using:

 

 

 
 
 
{% if product.price == 0 %}
 
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Inquire</button>
 
  {% form 'contact' %}
 
      {% if form.posted_successfully? %}
        <p class="success-msg">Thanks for contacting us! We'll get back to you as soon as possible.</p>
      {% endif %}
 
      {% if form.errors %}
      <p class="error-msg">
        <ul class="error-list" 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 %}   
          {% if field == 'phone' %}
          <li>Please enter a valid phone number.</li>
          {% endif %}      
 
        {% endfor %}
        </ul>
      </p>
      {% endif %}
 
<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Send an inquiry</h4>
 
        </div>
 
        <div class="modal-body">
      <ul id="contact-form">
        <li class="clearfix type-text">
          <label for="name">Name</label>
          <input type="text" id="name" name="contact[name]" />
        </li> 
        <li class="clearfix type-text{% if form.errors contains 'email' %} has-error{% endif %}">
          <label for="email">Email</label>
          <input required type="email" id="email" class="email" name="contact[email]" />
        </li> 
       
        <li class="clearfix type-text{% if form.errors contains 'phone' %} has-error{% endif %}">      
        <label for="ContactFormBirthday">Phone</label>
        <input type="text" id="ContactFormPhone" name="contact[Phone]"/>
        </li>      
        <li class="clearfix type-text">      
        <label for="ContactFormMakeAnOffer">Make An Offer</label>
        <input type="text" id="ContactFormMakeAnOffer" name="contact[MakeAnOffer]"/>
        </li>        
        <li class="clearfix type-textarea{% if form.errors contains 'body' %} has-error{% endif %}">
          <label for="message">Message</label>
          <textarea id="message" name="contact[body]"></textarea>
        </li>
 
        <li class="clearfix type-text bottom-copy-tho">      
          <div class="in-image-block"><img src="{{ product.featured_image | img_url: 'small' }}" alt="{{ product.featured_image.alt | escape }}"></div>
  <div class="image-na-copy">
  <label for="ContactFormProName">Product</label>
          <input required type="text" id="ContactFormProName" name="contact[ProName]" value="{{ product.title }}" readonly/>
          </div>
        </li>            
        <li class="clearfix type-submit">
          <input type="submit" class="submit btn" value="Send Inquiry" />
        </li>
      </ul>
  {% endform %}   
</div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endif %} `
 
 
 
 
 
 
tim
Shopify Expert
3315 247 1195

There are some problems with your code:

1) Loading entire bootstrap CSS and JS for just one modal is a bit excessive, but I am more worried about bootstrap CSS potential conflicts  with whatever rules you may already have in your theme;

2) Loading a new copy of jQuery is not necessary -- there is already one loaded in head;

3) And the actual problem which prevents your contact from from working is that you have it nested inside product form.
Nesting forms is not allowed.

 

The browser silently removes the <form> tag for contact form and when your visitors click "Send inquiry" they are in fact submitting the product form.

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.