Help with multiple form loading on single page based on dropdown select

[Pixelwerx]

I'm hoping someone on here has done something similar and has some advice for me.

I am working on a contact us page where we have a dropdown selection that shows different forms for different types of inquiries. Currently the 6 forms are embedded in hidden divs, and the dropdown will show and hide the divs. This seems less than ideal to load a bunch of forms at once, and makes the page heavy HTML wise, and the page is slower to load than I'd like.

I have tried some (probably pretty hacky) code that almost works, but at some point it breaks and doesn't load the right form, and it looks wrong. See photo examples (first image is correct, second is wrong, and pulling the wrong form, even though the option selected is the same).

Right

Messed up

Here is the code I have so far:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2-legacy.js" defer></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/v2.js" defer></script>
<script type="text/javascript">
  function update() {
    var optionList = $('#formsSel option:selected').val();
    $('#forms').removeClass('hide');
    $('#mobile').addClass('hide');
    $('#ops').addClass('hide');
    $('#vault').addClass('hide');
    if (optionList == 'project') {
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else if (optionList == 'mobile') {
      $('#mobile').removeClass('hide');
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else if (optionList == 'operations') {
      $('#ops').removeClass('hide');
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else if (optionList == 'parts') {
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else if (optionList == 'hr') {
      $('#vault').removeClass('hide');
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else if (optionList == 'general') {
      hbspt.forms.create({
        portalId: 'XXXX',
        formId: 'XXXX',
        target: '#forms',
        css: ''
      });
    } else {
      $('#forms').addClass('hide');
    }
    return;
  }

  update();
</script>

And the dropdown code if helpful:

<form id="form_id" method="get">
          <div class="input">
            <select id="formsSel" class="type-toggle w-100" data-target="#contactForms" onchange="update()">
              <option value="" data-show="">How Can We Help You?</option>
              <option value="project" data-show=".project">Project or Product Inquiry</option>
              <option value="mobile" data-show=".mobile">Mobile and Temporary Equipment</option>
              <option value="operations" data-show=".operations">Plant Operations and Services</option>
              <option value="parts" data-show=".parts">Parts, Field Service, and Rebuilds</option>
              <option value="hr" data-show=".hr">Human Resources</option>
              <option value="general" data-show=".general">All Other Inquiries</option>
            </select>
          </div>
        </form>

I'm sure there is a better way to do this, but I am not a JavaScript genius, and I haven't been able to grok anything from the Forms API documentation that would lead me to a better solution. Any ideas for how to do this would be greatly appreciated. Let me know if I need to provide more details.

Thank you,

Oliver

[Pixelwerx]

Anyone have any ideas about the form getting loaded screwy? Any other options for doing what I'm trying to do?

Thank you in advance for taking a look.

Oliver

[dennisedson]

@prosa , maybe you have some ideas?

[Teun]

Hi Oliver,

Your JavaScript solution is not a bad one. Could you share an URL so we can see what is happening?

[Pixelwerx]

Thank you Teun for willingness to help. I have published a test page to our staging. See here: https://www-westech-inc-com.sandbox.hs-sites.com/about/contact

Oliver