Implementing conditional logics in Shopify Forms

[Mert4]

Hey everyone, 

i used the app Shopify forms to integrate an form on my website, where customers can share several information. 

The challenge i am facing is creating conditional logics between the questions. E.g. only if the customer decides to choose the option A in the first question, then the second question should show the specific dropdown selection for option A (of the first question) and if the customer chooses option 3 in the second question the specific third dropdown selection for option 3 (of the second question) should be displayed. 

The page with the form has the following URL: https://www.photon-systems.de/pages/anmeldung/anmeldung-und-inbetriebnahme

In this example my first question is called: 

"Abschnitt des Hauptwirtschaftszweiges" (Option A)

the second question is called 

"Abteilung des Hauptwirtschaftszweiges Abschnitt A"

and the final question is called 

"Gruppe des Hauptwirtschaftszweiges A Fischerei und Aquakultur"

Can i fix this by editing the code of the form or anything like that? I could not find it until now...

Thank you very much for your support!

[Gabe]

Hey @Mert4 

Implementing conditional logic in forms, such as the one you described on your Shopify website, usually involves adding JavaScript to dynamically show or hide form elements based on the user's selections. Shopify forms can be customized to include this logic, but it requires access to the form's HTML and the ability to inject custom JavaScript code to handle the logic.

Here's a high-level approach on how you can achieve this:

1. Access the Form's HTML Code: You need to locate the HTML code for the form on your Shopify site. This might involve editing the theme's code directly or through a Shopify app that allows form customization.

2. Identify Form Elements: Identify the select elements (dropdowns) for your questions:

   • "Abschnitt des Hauptwirtschaftszweiges" (Option A)
   • "Abteilung des Hauptwirtschaftszweiges Abschnitt A"
   • "Gruppe des Hauptwirtschaftszweiges A Fischerei und Aquakultur"

3. Inject Custom JavaScript: Write JavaScript code that listens for changes to the first and second dropdowns. Based on the selected option, you would show or hide the relevant subsequent dropdowns.

A simplified example of how the JavaScript might look:

document.addEventListener("DOMContentLoaded", function() {
  // Assuming 'select1', 'select2', 'select3' are the IDs of your dropdowns
  const sectionDropdown = document.getElementById('select1');
  const divisionDropdown = document.getElementById('select2');
  const groupDropdown = document.getElementById('select3');

  // Initially hide the second and third dropdown
  divisionDropdown.style.display = 'none';
  groupDropdown.style.display = 'none';

  sectionDropdown.addEventListener('change', function() {
    // Show/Hide the second dropdown based on selection in the first
    if(this.value === 'OptionA') { // Replace 'OptionA' with the actual value for option A
      divisionDropdown.style.display = 'block';
    } else {
      divisionDropdown.style.display = 'none';
    }
    // Ensure the third dropdown is hidden if the first changes
    groupDropdown.style.display = 'none';
  });

  divisionDropdown.addEventListener('change', function() {
    // Show/Hide the third dropdown based on selection in the second
    if(this.value === 'Option3') { // Replace 'Option3' with the actual value for option 3
      groupDropdown.style.display = 'block';
    } else {
      groupDropdown.style.display = 'none';
    }
  });
});

So to implement conditional logic for your Shopify form, there are several approaches and tools you can use. One effective way is through the use of Shopify apps that enhance product options with conditional logic capabilities. Here are some insights and methods based on information from various sources:

1. Understanding Conditional Logic: Conditional logic in Shopify forms allows you to create a dynamic experience where certain options are shown or hidden based on the user's previous selections. This can significantly enhance the user experience by simplifying product customization and ensuring customers only see relevant options​​.

2. Real-life Application: For example, in a furniture store, you might offer a sofa in various materials like leather or linen, each with their own set of color options. Conditional logic ensures that when a customer selects a material, only the relevant color options for that material are displayed​​.

3. Setting Up Conditional Logic: To set up conditional logic, you might need to use a Shopify app like Hulk Product Options or InkyBay – Shopify Product Personalizer. These apps allow you to create options for your products easily and apply conditional logic without needing to code​​​​.

4. Benefits of Using Conditional Logic: Implementing conditional logic not only improves the shopping experience by making it easier for customers to find and customize products but also helps in applying your business rules more flexibly. For instance, if you sell phone cases, you can display only the models of the selected phone brand, thus simplifying the customer's choice process​​.

5. Implementing Without Coding: If you're not technically skilled or prefer not to edit the Shopify theme code directly, using an app is the most convenient option. Apps like InkyBay allow you to set up conditional logic with just a few clicks, offering capabilities to create millions of product variations, track inventory, and apply conditional logic easily​​.

6. Shopify Apps for Conditional Logic: Explore Shopify's app store for apps like Hulk Product Options or InkyBay, which are designed to facilitate conditional logic in product customization. These apps often come with support and tutorials to help you set up and manage conditional logic in your store​​​​.

Using these methods, you can enhance your Shopify store with conditional logic, making it more user-friendly and efficient. Remember, the key to a successful implementation is choosing the right tool that fits your store's needs and spending some time configuring it to match your product options and business rules.

Hope that helps! 😉

[Mert4]

Hi Gabe, 

thank you very much for the very detailed and understandable help. In the past i used Hulk but i dont want to integrate an app for collecting personal data of my customers. I use the newest version of the ride Theme in the basic plan. 

I expected the code of the form that i created with the application Shopify forms in the theme.js. But sadly there are just a theme.liquid and a theme-editor.js.. Safly both files dont contain any code related to my form. 

Do you have an idea, where the code of the form could be located so that i can implement the javascript code as you have recommended?

Thanks in advance!

[Gabe]

Hey @Mert4 

My pleasure and when it comes to locating the code for a form created with the Shopify Forms app, it's not typically found within the theme.liquid or theme-editor.js files. The Shopify Forms app operates within the Shopify admin and doesn't store its form configurations as editable code in the same way that theme files do.

However, if you're looking to insert or modify a form created with the Shopify Forms app, you might be able to use a Liquid form tag with the form's ID in your Shopify theme files to reference it. This tag can be used to include forms in your templates dynamically. To use the form tag, you would typically structure it as follows in your Liquid template files:

{% form 'type', object %}
  <!-- code for input fields and labels -->
{% endform %}

The 'type' in the form tag corresponds to a specific form type, like customer_login or contact. If you're trying to add specific logic or interactivity beyond what the Shopify Forms app offers, you might need to implement custom Liquid code or JavaScript.

If you're facing difficulties finding the form ID or integrating it into your site, it may be helpful to reach out to one of our certified Shopify Partners for guidance on the code and working with the Forms app.

Hope that helps! 😉