Multiple Contact Forms in Shopify

Recently, I was tasked with a Shopify project, built primarily from scratch, using the Minimal theme as a base. I was provided a design, and my goal was to replicate this design, even though multiple aspects are not conducive to the standard Shopify usage. One of these aspects, was having more than one contact form on the same page. This is something that I noticed around the forums a lot of people wishing to do, but having some difficulty.

I came up with a relatively simple solution, that requires only a bit of jQuery to handle things.

First, you will want to create your forms. In reality, you will want to only create one form, but with two buttons. The first button does not actually process the form, but instead, activates the “real” submit input, to process the form. I did this using the trigger(‘click’) function.

Here is how I setup my forms:

{% form 'contact' %}
{% if form.posted_successfully? %}
<div class="successForm feedback">
<p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
{% endif %}

{% if form.errors %}
<div class="errorForm feedback">
<p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}. Please correct the following and submit again:</p>
{% for field in form.errors %}
<p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
{% endfor %}
{% endif %}
<div class="inline-content"><!-- BEGIN INLINE CONTENT -->
<div id="contact-form-left"><!--- BEGIN CONTACT FORM LEFT -->
<div id="contactFormWrapper">
<!--<div id="bord1"></div>-->
<div ></div>
<!--<p id="extrapad">--><p>We want you to be happy. If you can't decide on a color, we have color samples to send your way. It's easy and free.</p>
<div class="label"><div class="contact-icon1" id="name-icon"></div><div class="contact-label" id="name-label">Name</div></div>
<input type="text" id="contactFormName1" name="contact[name]" value=""/>
<div class="label"><div class="contact-icon2" id="email-icon"></div><div class="contact-label" id="email-label">Email</div></div>
<input type="email" id="contactFormEmail1" name="contact[email]" value=""/>
<div class="label"><div class="contact-icon3" id="color-icon"></div><div class="contact-label" id="color-label">Color</div></div>
<input type="telephone" id="contactFormTelephone" name="contact[phone]" value=""/>
<div class="label"><div class="contact-icon5" id="address-icon"></div><div class="contact-label" id="address-label">Address</div></div>
<textarea rows="15" cols="75" id="contactFormMessage1" name="contact[body]"></textarea>
<input type="submit" id="contactFormSubmit1" value="Send" class="btn" />
</div><!-- END CONTACT FORM LEFT -->
<div id="contact-form-right"><!-- BEGIN CONTACT FORM RIGHT -->
<div id="contactFormWrapper">
<!--<div id="bord2"></div>-->
<p>Want to personalize your product? No problem. Just let us know how you'd like to customize your product and we'll respond within 24 hours.</p>
<div class="label"><div class="contact-icon1" id="name-icon2"></div><div class="contact-label" id="name-label2">Name</div></div>
<input type="text" id="contactFormName2" name="contact[name]" value=""/>
<div class="label"><div class="contact-icon2" id="email-icon2"></div><div class="contact-label" id="email-label2">Email</div></div>
<input type="email" id="contactFormEmail2" name="contact[email]" value=""/>
<div class="label"><div class="contact-icon4" id="message-icon2"></div><div class="contact-label" id="message-label2">Message</div></div>
<textarea rows="15" cols="75" id="contactFormMessage2" name="contact[body]"></textarea>
<input type="submit" id="contactFormSubmit" value="Send" class="btn" />
{% endform %}

Next, we will want to implement some basic jQuery to alter the attributes of the fields of the forms, so that the processor doesn’t confuse which is which.

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){ $('#contactFormSubmit1').click(function(){ event.preventDefault(); if($('#contactFormName2').val()=='' && $('#contactFormName1').val()!=''){ $('#contactFormName1').attr('name','contact[name]'); $('#contactFormName2').attr('name','contact[name2]'); } if($('#contactFormEmail2').val()=='' && $('#contactFormEmail1').val()!=''){ $('#contactFormEmail1').attr('name','contact[email]'); $('#contactFormEmail2').attr('name','contact[email2]'); } if($('#contactFormMessage2').val()=='' && $('#contactFormEmail1').val()!=''){ $('#contactFormMessage1').attr('name','contact[body]'); $('#contactFormMessage2').attr('name','contact[body2]'); } $('#contactFormSubmit').trigger('click'); }); });
// ]]></script>

As you can see, we are still using the Name and Email fields, in each form, but we swap out the name attribute (which is what’s used for validation). I can’t see any particular flaw in this method, and hopefully it will help someone else out who is attempting to achieve the same thing.

It would also be possible to accomplish the same thing by using independent field values for each field, and then populating the name and email fields (both of which MUST be filled out in order for the form to process).

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>