Display or hide form fields based on dropdown selection

juliewitmermaps
Excursionist
30 0 3

Hi,

I've spent a few hours today trying to figure out how to create conditional form logic in liquid with javascript, to look similar to this form: 

https://juliewitmermaps.myshopify.com/pages/contact

It works with a third-party solution, but I would very much like to know how to do it with liquid. I use the Debut theme. This is about the 10th iteration, and I've been googling and trying everything I can think of. I've found solutions that should work, but they don't and I don't know why. 

Any help would be greatly appreciated. As mentioned, I have a third-party form for now, but I want to know how to do this myself. Even a link to something that does work with Shopify would be fantastic. Thanks!

---------------

HTML:

        <label for="ContactFormReason">What would you like to talk about? (required)</label>
  <select required id="ContactFormReason" name="contact[Reason]">
          <option value="">-- select one --</option>
            <option value="project" onchange="ShowHideDiv(this.value)">I have a map project</option>
            <option value="question" onchange="ShowHideDiv(this.value)">I have a question</option>
    <option value="feedback" onchange="ShowHideDiv(this.value)">I have website feedback</option>
            <option value="other" onchange="ShowHideDiv(this.value)">Other</option>            
  </select>
  
<div id="div1">
          <textarea required rows="10" id="{{ formId }}-description" placeholder="Describe your project (required)" name="contact[{{ 'contact.form.description' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </div>
<div id="div2">
          <textarea required rows="10" id="{{ formId }}-message" placeholder="Message (required)" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </div>

-------------

in Theme.JS:

$ContactFormReason.on('change', function(ShowHideDiv) {

var Reason = document.getElementById("ContactFormReason"); {
if (Reason == 'project')
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
else
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block";
}

--------------

0 Likes

Hello,

You wouldn't be able to do this with liquid only since Liquid is rendered only on page load and can't watch changes, unlike Javascript.

I reckon that your current logic is the best bet.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire a reliable Shopify developer? Same day response: ezfycode@gmail.com.
0 Likes
juliewitmermaps
Excursionist
30 0 3

Hi,

Thanks, I want to use javascript to watch changes, that's why I put it in the theme.js. Seems like there's javascript in there for some of the product pages. How can I make the code I included in my previous post work? It doesn't work now.

 

0 Likes
juliewitmermaps
Excursionist
30 0 3

I've tried a couple of other things, and pared down the form to just one field and two display blocks to make this as easy as possible to troubleshoot.

I created a new contact page template and put all the code in it (based on a suggestion elsewhere in the forum about adding javascript to forms). So this is the entire content of my test form. Can anyone see any reason why it won't work? Do I need to call javascript in the page? I thought that by putting it in the page I wouldn't need to call an external asset.

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}

<select required id="ContactFormReason" name="contact[Reason]" onchange="ShowHideDiv()">
<option value="other">Other</option>            
<option value="project">I have a map project</option>
 </select>

<div id="div1" style="none">
<textarea required rows="10" id="{{ formId }}-message" placeholder="Message (required)" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>

<div id="div2">
<textarea required rows="10" id="{{ formId }}-description" placeholder="Describe your project (required)" name="contact[{{ 'contact.form.description' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>
               
  <script>
function ShowHideDiv() {
  var x = document.getElementById("ContactForm")["contact[Reason]"].value;
    if (x === "project" | {
        document.getElementById("div1").style.display = "block";
        document.getElementById("div2").style.display = "none";
    }else {
        document.getElementById("div2").style.display = "block";
        document.getElementById("div1").style.display = "none";  
        }
}
</script>
        <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
    </div>
  </div>
</div>
 

 

0 Likes
Chris_Orr
New Member
4 0 0

Hi Julie,

Did you ever get this to work? I am looking to do something similar on the shipping and delivery page, where I could show custom information depending on which country they select from a dropdown menu.

0 Likes
juliewitmermaps
Excursionist
30 0 3

Hi,

No, I didn't get it to work. I'm using Hulkapps Form Builder instead. I managed to make conditional option selections in some of my products, but now can't find the code for that. You can look through the code on one of my tote bag products - maybe you'll be able to figure out what I did and how to apply it to your situation.

https://juliewitmermaps.com/products/tote-bag-blues-world?variant=36810250944669

I added code somewhere so that when someone selects the Basic style or the Urban style, only the strap colours available with that style will be shown.

If I can ever find the link with the instructions again, I'll post it here.

Julie

0 Likes
juliewitmermaps
Excursionist
30 0 3

Here's the tutorial I used to created linked product options. That may work for you - but I haven't found anything similar to work with a contact form.

https://community.shopify.com/c/Shopify-Design/Variants-Link-product-options/m-p/615156?ref=out-of-t...

 

0 Likes
Chris_Orr
New Member
4 0 0

Thank you so much, will definitely look into hulk apps.

I have been doing more research and am thinking about using javascript to achieve this.

I've found this Skillshare class quite useful for learning about javascript in Shopify but I will update here if I ever get it working.

https://skl.sh/3ciz0sk

 

0 Likes