Add selected variants to contact form

New Member
3 0 0

Hi everyone,

 

I have a small problem with the contact form. The company I work for are specialized custom industrial lifting products. As they made custom products, we had to replace the add to cart button by a contact form in each product page.  Everything is working super well except for one small thing. We want to see which variant of the product the consumer selected before sending his contact form to the company. Is there any way to automatically add the selected variant to the contact form?

 

Many thanks

 

Capture.PNG

 

0 Likes
Highlighted
New Member
2 0 0

Hi Everyone,

 

I am also chasing a similar request. I am using a product form with variables as a booking request form. I am grabbing the product.title within the contact form to identify what master product they are inquiring about, but as I cannot figure out how to capture variant currently selected I have had to include a drop down menu in the form. I would like to remove the drop down form and have a hidden input that when the form is submitted the variant selected is shows on the contact form email.

 

I have added my code below. It is currently working.

 

I have tried using <input type="hidden" name="contact[|product|]" value="{{ variant.sku }}"> But it does not return a value.

 

Any help would be greatly appreciated.

 

 

<div class="form-vertical">
           {% form 'contact' %}

        {% if form.posted_successfully? %}
          <p class="form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        {{ form.errors | default_errors }}

<div class="grid grid--half-gutters">

  	<input type="hidden" name="contact[|product|]" value="{{ product.title }}">
  
  	<input type="hidden" name="contact[|timestamp|]" value="{{ "now" | date: "%Y-%m-%d %T" }}">
  
         <div class="grid__item medium-up--one-full">
          
         <label for="ContactName"></label>
          <input type="text" id="Contact|Name|" name="contact[|name|]" placeholder="Name" required="required" />
          
          </div>
</div>


<div class="grid grid--half-gutters">
          
          <div class="grid__item medium-up--one-full">
          
          <label for="ContactFormPhone"></label>
          <input type="text" id="ContactFormPhone" name="contact[|phone|]" value="" placeholder="Phone" required="required" />
          
          </div>
</div>


<div class="grid grid--half-gutters">
            
            <div class="grid__item medium-up--one-full"> 
            
            <label for="ContactFormEmail"></label>
			<input type="email" id="email" name="contact[email]" value="" placeholder="Email Address" required="required" />
            
            </div>

</div>
      
 <div class="grid grid--half-gutters">
  
  	<div class="grid__item medium-up--three-fifths">
          <p> I agree to be contacted about marketing and offers</p>
  	</div>
   
  	<div class="grid__item medium-up--two-fifths">
	<label for="ContactFormMarketing"></label>
     	<select id="ContactFormMarketing" name="contact[|marketing|]">
      	<option>Yes</option>
      	<option>No</option>
     	</select>
      	</div>
</div>
           
<div class="grid grid--half-gutters">  
      
            <div class="grid__item medium-up--one-full">
            
            <label for="ContactFormAddress"></label>
            <input type="text" id="ContactFormAddress" name="contact[|address|]" value="" placeholder="Address" required="required" />
           
            </div>

</div>

<div class="grid grid--half-gutters">

            <div class="grid__item medium-up--one-full">
            
            <label for="ContactFormSuburb"></label>
            <input type="text" id="ContactFormSuburb" name="contact[|suburb|]" value="" placeholder="Suburb" required="required" />
            
            </div> 

</div>

<div class="grid grid--half-gutters">

      <div class="grid__item medium-up--one-half">
      <label for="ContactFormPost"></label>
      <input type="text" id="ContactFormPost" name="contact[|postcode|]" value="" placeholder="Postcode" required="required" />
      </div>
        
     
      
      <div class="grid__item medium-up--one-half">
      <label for="ContactFormState"></label>
      <select id="ContactFormState" name="contact[|state|]">
      <option>ACT</option>
      <option>NSW</option>
      <option>NT</option>
      <option>QLD</option>
      <option>SA</option>
      <option>TAS</option>
      <option>VIC</option>
      <option>WA</option>
      </select>
      </div>

</div>
      
<div class="grid grid--half-gutters">
  
      <div class="grid__item medium-up--one-full">
      
      <label for="ContactFormService">Choose a Service</label>
      <select id="ContactFormService" name="contact[|service|]">
      
      <option>Shock - Full Service</option>
        
      </select>
      
      </div>

</div>
        
<div class="grid grid--half-gutters">
        
      <div class="grid__item medium-up--one-half">
      
      <label for="ContactFormWarranty">Warranty Request</label>
      <select id="ContactFormWarranty" name="contact[|warranty|]">
      <option>No</option>
      <option>Yes</option>
      </select>
      </div>
      
      <div class="grid__item medium-up--one-half">
      
      <label for="ContactFormDateofPurchase">Date of Purchase</label>
      <input type="date" id="ContactDateofPurchase" name="contact[|pop|]" value="" placeholder="Date of Purchase" />
      </div>
  
 </div>
 
 
<div class="grid__item medium-up--one-full">
  <p>Proof of Purchase must be supplied with your warranty request</p>
  <p>Any delays in supplying Proof of Purchase will delay your repair</p>
</div>
        
  

<div class="grid grid--half-gutters">
        
        <div class="grid__item medium-up--one-half">
        
        <label for="ContactFormBikeMake"></label>
        <input type="text" id="ContactFormBikeMake" name="contact[|make|]" value="" placeholder="Bike Make" required="required" />
        
        </div>
            
        
        <div class="grid__item medium-up--one-half">
        
        <label for="ContactFormBikeModel"></label>
        <input type="text" id="ContactFormBikeModel" name="contact[|model|]" value="" placeholder="Bike Model" required="required" />
        
        </div>
        
</div>
        

<div class="grid grid--half-gutters">
        
        <div class="grid__item medium-up--one-half">
        
        <label for="ContactFormWeight"></label>
        <input type="text" id="ContactFormWeight" name="contact[|weight|]" placeholder="Rider Weight">  
        
        </div>

        
        <div class="grid__item medium-up--one-half">
        
        <label for="ContactFormService"></label>
        <select id="ContactFormRiderStyle" name="contact[|style|]">
        <option>Rider Style - Please Select</option>
        <option>Cross Country</option>
        <option>Trail</option>
        <option>Enduro</option>
        <option>Downhill</option>
        <option>E-Bike</option>
		</select>
  
        </div>
        
</div>


<div class="grid grid--half-gutters">

          <div class="grid__item medium-up--one-half">
         
          
          <input maxlength="4" id="ContactID Code" name="contact[|ID Code|]" placeholder="ID Code" >  
          
          </div>
        
          <div class="grid__item medium-up--one-half">
          <p> 
            </p>
            <p>
            <h4>
          <div style="text-align: center;"> 
            <span style="color: #ff2a00;">
          <a href="https://cdn.shopify.com/s/files/1/0018/3818/6557/files/4digitcode.jpg?18206483373746615021" title="https://cdn.shopify.com/s/files/1/0018/3818/6557/files/4digitcode.jpg?18206483373746615021" target="_blank" rel="noopener noreferrer">
            Where is my ID Code?</a></span></div></h4>
            </p>
            
          </div>
       
</div>
        
<div class="grid grid--half-gutters">
          
          <div class="grid__item medium-up--one-full">  
          
          <label for="ContactFormMessage" ></label>
          <textarea rows="4" id="ContactFormMessage" name="contact[|Models|]" placeholder="Please List Fork/Shock/Post Model">{% if form.body %}{{ form.body }}{% endif %}</textarea>
          
          </div>
</div>

<div class="grid grid--half-gutters">
          
  		<div class="grid__item medium-up--one-full">
  
          <label for="ContactFormMessage" ></label>
          <textarea rows="10" id="ContactFormMessage" name="contact[|Request|]" placeholder="Description of Service Request">{% if form.body %}{{ form.body }}{% endif %}</textarea>
  		</div>
  
  
</div>



        <p>By Submitting this form you are agreeing to the Service <a href="/pages/service-terms-and-conditions">Terms and Conditions</a> of SOLA Sport</p>
        <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
      {% endform %}
  </div>

 

 

0 Likes