Forum

Thread tagged as: Question, Problem, Forms

Best way to conditionally load a form within a template

Context: I'm making a site for an animal shelter. Each dog/cat has its own detail page using a two page list/detail technique from the Perch Docs. Each cat/dog detail page will have a different contact form depending on who the animal's foster parent is. There are a total of four foster parents, so there's four unique forms total.

Problem: Using the Forms App, how do I conditionally load a form from within a template?

What I've been trying to do is conditionally load the forms from within the detail template using <perch:if> tags:

    <perch:if id="foster_parent" value="Mai">
      <perch:template path="forms/contact_mai.html" />
    </perch:if>

    <perch:if id="foster_parent" value="Linda">
      <perch:template path="forms/contact_linda.html" />
    </perch:if>

    <perch:if id="foster_parent" value="Stephanie">
      <perch:template path="forms/contact_stephanie.html" />
    </perch:if>

    <perch:if id="foster_parent" value="Mary">
      <perch:template path="forms/contact_mary.html" />
    </perch:if>

The id="foster_parent" is a <perch:content> tag from the detail page. So, if Linda is the foster parent, I fill out her name in the admin and only her contact form shows up.

This approach hasn't been working consistently. I somehow got it to work once, but what usually ends up happening is that only one form will submit and the rest won't.

Thanks - matt

My diagnostics report:

HEALTH CHECK

Perch is up to date
PHP 7.0.0 is up to date
MySQL 5.5.42 is up to date
Image processing available
SUMMARY INFORMATION

Perch: 2.8.24, PHP: 7.0.0, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: 7e72f9690b1498a1bead7a637c33a831c0d2f655 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.24), assets (2.8.24), categories (2.8.24), perch_events (1.9.2), perch_forms (1.8.3), perch_gallery (2.8.6)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_events', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/matthewsanchez/Dropbox/narf-local/perch
PERCH_CORE: /Users/matthewsanchez/Dropbox/narf-local/perch/core
PERCH_RESFILEPATH: /Users/matthewsanchez/Dropbox/narf-local/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: dc1fef2ad0fcd9f943c02ebb43d85dbc
Resource folder writeable: Yes
HTTP_HOST: localhost:8888
DOCUMENT_ROOT: /Users/matthewsanchez/Dropbox/narf-local
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Matt Sanchez

Matt Sanchez 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Do the forms all have different IDs?
Matt Sanchez

Matt Sanchez 0 points

5 years ago

Yes, all the forms have different IDs.

Here are two of the forms:

Form 1

<section class="w-dynamic-form">
  <div class="l-form" id="success-position">
    <h3>Send Stephanie a message</h3>
    <perch:form id="contact-stephanie" method="post" app="perch_forms" role="form" action="#success-position">
      <perch:input type="hidden" label="Dog" id="name-hidden" value="<perch:content id="name" type="text" />" />

      <perch:error for="name-stephanie" type="required">
        <div class="l-form-error">Please enter your name</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="name-stephanie">Your name</perch:label>
        <perch:input id="name-stephanie" required="true" type="text" label="Name" placeholder="required"/>
      </div>

      <perch:error for="email-stephanie" type="required">
        <div class="l-form-error">Please enter your email address</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="email-stephanie">Your email</perch:label>
        <perch:input id="email-stephanie" required="true" type="email" label="Email" placeholder="required" />
      </div>

      <perch:error for="phone-stephanie" type="required">
        <div class="l-form-error">Please enter your phone number</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="phone-stephanie">Your phone number</perch:label>
        <perch:input id="phone-stephanie" required="true" type="text" label="Phone number" placeholder="required" />
      </div>

      <perch:error for="message-stephanie" type="required">
        <div class="l-form-error">Please enter a question</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="message-stephanie">Ready to adopt? Have questions?</perch:label>
        <perch:input id="message-stephanie" required="true" type="textarea" label="Message" placeholder="required" />
      </div>

      <div class="l-form-group">
        <div class="replace-1"></div>
        <perch:input class="l-form-submit-dog" type="submit" id="submit-stephanie" value="Send" />
        <perch:success>
          <div class="l-form-success">Message received</div>
        </perch:success>
      </div>

    </perch:form>
  </div><!-- l-form -->
</section><!-- w-dynamic-form -->

<div class="dynamic-alternate">or</div>

<section class="w-dynamic-phone">
  <div class="dynamic-phone">
    <h3>Call Stephanie directly</h3>
    <div class="dynamic-phone-number">(408) 224-6273</div>
  </div><!-- dynamic-phone -->
</section><!-- w-dynamic-phone -->

Form 2

<section class="w-dynamic-form">
  <div class="l-form" id="success-position">
    <h3>Send Mai a message</h3>
    <perch:form id="contact-mai" method="post" app="perch_forms" role="form" action="#success-position">
      <perch:input type="hidden" label="Dog" id="name-hidden" value="<perch:content id="name" type="text" />" />

      <perch:error for="name-mai" type="required">
        <div class="l-form-error">Please enter your name</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="name-mai">Your name</perch:label>
        <perch:input id="name-mai" required="true" type="text" label="Name" placeholder="required"/>
      </div>

      <perch:error for="email-mai" type="required">
        <div class="l-form-error">Please enter your email address</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="email-mai">Your email</perch:label>
        <perch:input id="email-mai" required="true" type="email" label="Email" placeholder="required" />
      </div>

      <perch:error for="phone-mai" type="required">
        <div class="l-form-error">Please enter your phone number</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="phone-mai">Your phone number</perch:label>
        <perch:input id="phone-mai" required="true" type="text" label="Phone number" placeholder="required" />
      </div>

      <perch:error for="message-mai" type="required">
        <div class="l-form-error">Please enter a question</div>
      </perch:error>
      <div class="l-form-group">
        <perch:label for="message-mai">Ready to adopt? Have questions?</perch:label>
        <perch:input id="message-mai" required="true" type="textarea" label="Message" placeholder="required" />
      </div>

      <div class="l-form-group">
        <div class="replace-1"></div>
        <perch:input class="l-form-submit-dog" type="submit" id="submit-mai" value="Send" />
        <perch:success>
          <div class="l-form-success">Message received</div>
        </perch:success>
      </div>

    </perch:form>
  </div><!-- l-form -->
</section><!-- w-dynamic-form -->

<div class="dynamic-alternate">or</div>

<section class="w-dynamic-phone">
  <div class="dynamic-phone">
    <h3>Call Mai directly</h3>
    <div class="dynamic-phone-number">(408) 224-6273</div>
  </div><!-- dynamic-phone -->
</section><!-- w-dynamic-phone -->

What's been happening is that they'll all work at first and then only one will be able to submit (not sure what causes them to stop working). Right now, only the first form will submit: id="contact_stephanie". I know it's not something to do with that particular form template because it's just a copy of the others - they're all identical except for the IDs (there's one ID that's shared across the forms: id="name-hidden").

The pages are live if you'd like to look. You can even try submitting.

Page with the form that works:

Stephanie's form

Pages with the forms that don't work:

Mai's form

Linda's form

Another thing I've noticed that might hint at the cause is in the 'Form Options' admin panel. When I go to select the 'Email address field', all of the form IDs for every form will show up. Here's a pic:

Email address field

This is why I had to adopt a naming convention for the IDs that made each one unique.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Is it always the first form that continues to work?
Matt Sanchez

Matt Sanchez 0 points

5 years ago

I reordered the <perch:if> statements a few times and it turns out it's the last form that continues to work. So, the only form that is currently working is Stephanie's, since it's listed last:

    <perch:if id="foster_parent" value="Stephanie">
      <perch:template path="forms/contact_stephanie.html" />
    </perch:if>

There's actually a template include that comes after Stephanie's, forms/contact_mary.html, but that one doesn't include a form - just HTML markup. It doesn't seem to have an effect on the problem and I even deleted the file and removed its include, and the problem persisted just the same.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok. It's obviously quite an unusual situation, so I'll need to set something up to replicate it and hammer it out to see what's causing that. It could well be that this combination of factors results in a bug. I don't know at this point, and I don't have an immediate solution for you.
Matt Sanchez

Matt Sanchez 0 points

5 years ago

Thanks for taking the time to look into it, Drew. My client said they'd be fine with just listing an email address in lieu of the form, but we'll go back to using forms if a solution pops up.
Mike Harrison

Mike Harrison 37 points

5 years ago

This may not be the solution, but you have some dashes in your form id's, and for some of the inputs too. I would try switching these out for underscores, so for example:

<perch:form id="contact-stephanie" method="post" app="perch_forms" role="form" action="#success-position">

Would be

<perch:form id="contact_stephanie" method="post" app="perch_forms" role="form" action="#success-position">

Worth a try, Perch doesn't do well with dashes in id's, I have found that removing them sometimes fixes issues