Perch Forms Inside Shop Product Template

I am trying to add a perch form into the details of my shop products so that customers can enquire about a product via the form. The form uses a hidden field for the product title so that the email generated by the form is unique to each product. I have done this by adding the form to the product.html template from the shop app.

The form works fine but I have now noticed that it is stopping the products from being added to the cart. Clicking the add to cart button displays the cart and says the cart is empty. If I remove the form the cart starts to work again.

Is what I am trying to achieve possible or should I be looking at an alternative way?

Product.html

<div class="row">   
<div class="col-md-12">

    <div class="page-header">
        <h1 class="text-xs-center text-md-left"><perch:shop id="title" type="text" label="Title" required="true" order="2" /> </h1> 
    </div>
</div>  <!-- /col -->
</div> <!-- /row -->



<div class="row">   
<div class="col-md-5 text-xs-center text-md-left">

<perch:shop id="slug" type="slug" editable="true" indelible="true" label="Slug" for="title sku" order="10" suppress="true" divider-before="Meta data" />




<img src="<perch:shop id="image" type="image" label="Main product image" order="5" width="800" />" alt="<perch:shop id="title" type="text"/>" class="img-responsive img-thumbnail" />



<perch:shop id="image" type="image" label="Main product image" order="5" width="800" suppress="true" />
<perch:shop id="image" type="image" width="80" height="80" density="1.6" crop="true" suppress="true" />



<perch:shop id="status" type="shop_status" label="Status" suppress="true" />


</div>  <!-- /col -->

<div class="col-md-4 text-xs-center text-md-left">







<perch:shop id="catalog_only" type="shop_catalog_only" label="Catalog only" suppress="true" />


<!-- Check for not for online sale products and do not display price -->

<perch:if id="catalog_only" value="0">


<h4>Price: <perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="m" min="0" step="any" /> <small>+VAT</small></h4>
<hr>

<perch:else />
    <h5>Price On Application.</h5>
</perch:if>



<perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="m" min="0" step="any" suppress="true" />
<perch:shop id="trade_price" type="shop_currency_value" label="Trade price" size="m" min="0" step="any" runway="true" suppress="true" />
<perch:shop id="on_sale" type="checkbox" value="1" label="Use sale price" suppress="true" />
<perch:shop id="tax_group" type="shop_tax_group" label="Tax group" required="true" suppress="true" />


<perch:shop id="stock_status" type="shop_stock_status" label="Stock status" divider-before="Stock" required="true" suppress="true" />
<perch:shop id="stock_level" type="number" label="Stock level" size="s" suppress="true" />
<perch:shop id="stock_location" type="shop_stock_location" label="Count stock" suppress="true" />
<perch:shop id="max_in_cart" type="number" label="Max quantity in cart" size="s" suppress="true" />

<perch:shop id="requires_shipping" type="shop_requires_shipping" label="Requires shipping" divider-before="Shipping" suppress="true" />
<perch:shop id="weight" type="number" label="Shipping weight" size="s" />
<perch:shop id="width" type="number" label="Width" size="s" />
<perch:shop id="height" type="number" label="Height" size="s" />
<perch:shop id="depth" type="number" label="Depth" size="s" />

<perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
    <perch:if exists="has_variants">
      <perch:productopts>
        <h4><perch:productopt id="title" /></h4>
        <perch:productvalues>

       <ul class="list-group">

          <perch:before><ul class="list-group text-xs-left"></perch:before>
            <li class="list-group-item">

             <div class="radio custom-control custom-radio">

              <label>
                <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />


                  <span class="custom-control-indicator"></span>


                <perch:productvalue id="valueTitle" />
              </label>
            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>
    <perch:input id="product" type="hidden" env-autofill="false" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
   <perch:input type="submit" value="Add to cart" class="btn btn-pill btn-primary" />










  </perch:form>
<perch:else />
<div class="alert alert-warning" role="alert">This item is not available to buy online. Please call for a custom quote.</div>
</perch:if>

<hr>
<h4>Product Categories</h4>

<perch:categories id="category" set="products" label="Category">
<a href="/../shop/category/<perch:category id="catSlug" />"<button type="button" class="btn btn-xs btn-info-outline"><perch:category id="catTitle" /></button></a>
</perch:categories>



</div>  <!-- /col -->

<div class="col-md-3 m-t-lg"> 
<div class="text-center">   
    <h5>Call Now:</h5>
<a href="tel:08001234567"><button type="button" class="btn btn-pill btn-default"><i class="fa fa-phone" aria-hidden="true"></i> 0800 1234567</button></a>
    <hr>

    <h5>More Information:</h5>








    <!-- Button trigger modal -->


    <button type="button" class="btn btn-pill btn-success" data-toggle="modal" data-target="#myModal">
  Enquire Online
</button>   

</div>      


<!-- Modal -->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Make an Enquiry</h4>
      </div>
      <div class="modal-body">
        <p>For more information about: <strong><perch:shop id="title" type="text" label="Title" /></strong> please complete this form</p>



       <perch:form id="contact" method="post" app="perch_forms">

<perch:content id="introtext" type="textarea" label="Form Intro Text" textile="true" editor="markitup" />

<div class="form-group">
    <perch:label for="name">Name</perch:label>
    <perch:input type="text" id="name" required="true" class="form-control" placeholder="Name" label="Name" /> 
    <perch:error for="name" type="required"><div class="alert alert-danger">Please add your name</div></perch:error>
</div>

<div class="form-group">
    <perch:label for="email">Email address</perch:label>
    <perch:input type="email" id="email" required="true" class="form-control" placeholder="you@example.com" label="Email" />



    <perch:error for="email" type="format">
    <div class="alert alert-danger">Please check email format.</div>
    </perch:error>
</div>

<div class="form-group">
    <perch:label for="phone">Phone Number</perch:label>
    <perch:input type="text" id="phone" class="form-control" label="phone" placeholder="01254123456" />
    <perch:error for="name" type="required"><div class="alert alert-danger">Please add your phone number</div></perch:error>
</div>

<div class="form-group">

    <perch:input type="hidden" id="product" value="<perch:shop id="title" type="text" label="Product Name" />" class="form-control" label="product" />
</div>

<div class="form-group">
    <perch:label for="message">Your Enquiry Details</perch:label>
    <perch:input type="textarea" id="message" class="form-control" label="Message" placeholder="Your Message" />
</div>





<perch:success>
<div class="alert alert-success">
    Your Enquiry Has Been Sent
</div>
</perch:success>





      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

       <perch:input type="submit" value="Submit" class="btn btn-primary"/>

        </perch:form>
      </div>
    </div>
  </div>
</div>





<hr>    
<div class="text-center">   
    <h5>Share This Product</h5>

    <div class="ssk-group">
    <a href="" class="ssk ssk-facebook"></a>
    <a href="" class="ssk ssk-twitter"></a>
    <a href="" class="ssk ssk-google-plus"></a>
    <a href="" class="ssk ssk-tumblr"></a>
    <a href="" class="ssk ssk-email"></a>
    </div>
</div>  
    <hr>





</div>  <!-- /col -->

</div> <!-- /row -->


<div class="row m-t-lg">    
<div class="col-md-12">

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#details" aria-controls="details" role="tab" data-toggle="tab">Details</a></li>
    <li role="presentation"><a href="#specification" aria-controls="specification" role="tab" data-toggle="tab">Specification</a></li>
    <li role="presentation"><a href="#downloads" aria-controls="downloads" role="tab" data-toggle="tab">Downloads</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active m-a" id="details">
        <p><strong>SKU:</strong> <perch:shop id="sku" type="text" label="SKU" required="true" order="1" /></p>
        <p><strong>Manufacturer:</strong> <perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" /></p>
        <p><strong>Manufacturers Product Code:</strong> <perch:shop id="mfr_code" type="text" label="Manufacturer Code" order="3"/></p>
        <div class="well well-sm">
            <h6>Product Description</h6>
            <p><perch:shop id="description" type="textarea" label="Description" editor="markitup" order="4" markdown="true" size="s" /></p>
        </div>
    </div>

    <div role="tabpanel" class="tab-pane fade m-a" id="specification">

            <p><perch:shop id="specification" type="textarea" label="specification" editor="markitup" order="6" markdown="true" size="l" /></p>


    </div>
    <div role="tabpanel" class="tab-pane fade" id="downloads"><p>test downloads</p></div>

  </div>

</div>


</div>  <!-- /col -->

</div> <!-- /row -->

Diagnostic:

Perch Runway: 2.8.32, PHP: 7.0.10, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: 241ae00989d1995ffcbbf63d579943635faf9972 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.32), assets (2.8.32), categories (2.8.32), perch_blog (5.0), perch_forms (1.8.3), perch_shop_orders (1.0.9), perch_shop_products (1.0.9), perch_shop (1.0.9), perch_members (1.5)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_blog', 'perch_members', 'perch_shop', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/greg/Sites/millers/trunk/perch
PERCH_CORE: /Users/greg/Sites/millers/trunk/perch/core
PERCH_RESFILEPATH: /Users/greg/Sites/millers/trunk/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
HTTP_HOST: millers
DOCUMENT_ROOT: /Users/greg/Sites/millers/trunk
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php