Trigger different contact forms through radio buttons

Shopify Discussion
1

Hello everyone,

I am currently using mulptiple contact forms on my website, and on my home page, I would like to display one of those forms based on the input of a user in a radio button group. So, if a user clicks radio button one, the website should display contact form 1, radio button 2 → contact form 2, etc. I tried some things with event listeners in javascript. They do “listen” to the radio button inputs, but I don’t know how to use these event listeners to display different html content. An example of how I want my site to work roughly: https://www.spxflow.com/contact (this is not my site, but I would like it to work the same way.

2

@Anachristian I would love some help! Thank you

3

Hi @ljonker1

Yes, you can definitely use event listeners in JavaScript to achieve this. Essentially, you need to set up an event listener that listens for the ‘change’ event of the radio button group. This will trigger a function whenever the user selects a different radio button. Inside this function, you can use conditional statements to check which radio button has been selected and then display the corresponding contact form accordingly.

You can use a combination of HTML and JavaScript code to achieve this. Here’s a basic outline of what you need to do:

  1. Add a radio button group to your HTML page with the different contact forms as options.
  2. Set up an event listener that listens for the ‘change’ event of the radio button group.
  3. Inside the event listener function, use a conditional statement to check which radio button has been selected.
  4. Depending on the result of the conditional statement, display the corresponding contact form on the page.
    Here is an example of how to set up the event listener and conditional statement:

// Add event listener to the radio button group
document.getElementById(“radio-group”).addEventListener(“change”, handleChange);

// Function to handle the change event
function handleChange(e) { // Get the value of the selected radio button var selectedValue = e.target.value;

// Use a conditional statement to check which radio button was selected
if (selectedValue === “contact-form-1”) {
// Display contact form 1 if the condition is true
// Add code here
} else if (selectedValue === “contact-form-2”) {
// Display contact form 2 if the condition is true
// Add code here
}
// Add additional else if conditions for other contact forms
}

Hope this helps!

4

Hi @Designhawk ,

Thank you for your reply, you helped me a lot with this code already! However, I seem to be having problems with the code needed within the if statements mentioned in your message. I tried making a form element in the html code which can, in theory, be used by the javascript to “inject” the right contact form. Am I on the right way? Because I haven’t got it to work so far and it feels like there should be a more efficient way.

Thank you!

5

Please try this code and let us know if you face any issues.