Forum

Thread tagged as: Question, Problem, Forum

Perch Forms

Hi,

I found this method of displaying multiple forms on my website and it works with regular forms but I cannot get it to work with Perch Forms. It seems like the display:none style does not work with perch forms.

Any ideas?

<script>
function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}
</script>


<select onchange="changeOptions(this)">
  <option value="" selected="selected"></option>
  <option value="form_1">Form 1</option>
  <option value="form_2">Form 2</option>
  <option value="form_3">Form 3</option>
</select>

<form class="className" name="form_1" id="form_1" style="display:none">
THIS IS FORM 1
</form>

<form class="className" name="form_2" id="form_2" style="display:none">
THIS IS FORM 2
</form>

<form class="className" name="form_3" id="form_3" style="display:none">
THIS IS FORM 3
</form>
Conor Harkins

Conor Harkins 0 points

  • 4 years ago
Jonathan Elliman

Jonathan Elliman 27 points

4 years ago

Make sure your JavaScript and Perch form ids match.
Robert Ketter

Robert Ketter 103 points

4 years ago

Because perch form id's are dynamic it would be hard to have the ID coded into the CSS. I would make sure each form were in a separate div and then use display:none on the containing div.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

The form IDs don't need to be dynamic - you can set the prefix yourself if you need to.
Robert Ketter

Robert Ketter 103 points

4 years ago

Drew McLellan said:

The form IDs don't need to be dynamic - you can set the prefix yourself if you need to.

Ahhh, Yes... I had forgotten this.
Conor Harkins

Conor Harkins 0 points

4 years ago

Hi all,

This is my form... When I place this as in the above example instead of form_1 with the display:none it does not hide. The form ID also changes when I run it on my live website but even when I match both ID's it still does not work.

<perch:form id="form_1" method="post" app="perch_forms" role="form" style="display:none" class="className">
        <div class="row">
            <div class="col-md-6">
                <div class="row control-group">
                    <div class="form-group col-xs-12 controls">
                        <perch:label>Name<span>*</span></perch:label>
                        <perch:input class="form-control" placeholder="Name" id="name" type="text" label="Name" required="true"/>
                        <p class="help-block"></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row control-group">
                    <div class="form-group col-xs-12 controls">
                        <perch:label>Email Address<span>*</span></perch:label>
                        <perch:input class="form-control" placeholder="Email Address" id="email" type="email" label="Email Address" required="true"/>
                        <p class="help-block"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 controls">
                <perch:label>Phone Number</perch:label>
                <perch:input class="form-control" placeholder="Phone Number" id="phone" type="tel" label="Phone Number"/>
                <p class="help-block"></p>
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 controls">
                <perch:label>Contact Type<span>*</span></perch:label>
                <perch:input class="form-control" type="select" options="General Enquiry, Complaint" value="236" id="contacttype" label="Contact Type" required="true" />
            </div>
        </div>
        <div class="row control-group">
            <div class="form-group col-xs-12 controls">
                <perch:label>Message<span>*</span></perch:label>
                <perch:input class="form-control" placeholder="Message" id="message" type="textarea" label="Message" required="true"/>
                <p class="help-block"></p>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="form-group col-xs-12">
                <perch:input class="button btn-lg" type="submit" id="submit" value="Send"/>
            </div>
        </div>
        <perch:success>
        <div align="center" class="alert-success alert">
        <perch:content id="success" type="textarea" size="m" label="Thank you message" markdown="true" editor="simplemde" required="true"/>
        </div>
        </perch:success>
</perch:form>
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

4 years ago

If you want to set the id of the form to conor_contact for example, you need to use the prefix attribute.

<perch:form id="contact" prefix="conor" method="post" app="perch_forms" role="form">

I don't think you can use inline styles on Perch tags. So the style attribute isn't useful here. If you want to apply styling to #conor_contact, why not do this in your .css file(s) where the rest of your styles are?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

style attributes are not passed through from perch:form tags to the corresponding form tags. Both class and data- attributes are, so those would be a much better choice.