Forum

Thread tagged as: Question, Problem, Forms

Form broken once switching to perch

Hi, I'm pretty new to perch so please bare with me.

I set up a pretty lengthy contact form which allows users to select from a lot of options in the form of checkboxes and radio buttons. The labels styling indicate if a checkbox or radio button is checked, I do this using some JS when it detects a change to the related input and then adds or removes a class from it's parent which is the label.

It was all working just fine, but since creating a perch template from it, I've had issues. Any help would be greatly apprechiated.

  1. Perch is prefixing my radio buttons ID's with the number 0 which I got around by just removing the labels 'for' attribute so that it doesn't matter.
  2. Checking one of the checkboxes from lower down the form automatically selects the last radio button in the 2 radio button sets above.
  3. Checking anything automatically unckecks a set of 4 checkboxes which are turned on by default and are not meant to be able to be changed.
  4. Clicking labels gives the appearance that a checkbox is checked as my JS function fires on the checkbox change and adds or removes a class but the code doesn't actually change to checked in the html.
  5. I'm using custom attributes which JS uses to tally up a total price based on options selected, these are all removed by perch.

I'm confused why so many things have went wrong once I converted my form into a perch template.

Apologies but this is very long. Any help would be greatly apprechaited.

<perch:form class="calculator" app="perch_forms" role="form" method="post" id="web-design-contact" prefix="none">
<div class="section fade" id="website-type">

  <div class="row content-box">
    <div class="col-12">
      <div class="col">
        <h4 class="section-title">Type of website:</h4>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-4 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-file"></i></span>
          <span class="title">Single Page Site</span>
          <span class="check-status"></span>
          <div class="description">
            <p>Lorem sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          </div>
          <perch:input type="radio" name="site-type" id="single-page" label="single-page" price="595" />
        </perch:label>
      </div>
    </div>
    <div class="col-4 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-copy"></i></span>
          <span class="title">Brochure Site</span>
          <span class="check-status"></span>
          <perch:input type="radio" name="site-type" id="brochure-site" label="brochure-site" price="595" perpage="95" />
        </perch:label>
      </div>
    </div>
    <div class="col-4 col-m-12 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-shopping-bag"></i></span>
          <span class="title">eCommerce Site</span>
          <span class="check-status"></span>
          <perch:input type="radio" name="site-type" id="ecommerce-site" label="ecommerce-site" price="2995" />
        </perch:label>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-12">
      <div class="col">
        <h4 class="section-title">Hosting options:</h4>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-4 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-ban"></i></span>
          <span class="title">No Website Hosting</span>
          <span class="check-status"></span>
          <perch:input type="radio" name="hosting-package" id="no-hosting" label="no-hosting" price="0" />
        </perch:label>
      </div>
    </div>
    <div class="col-4 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-server"></i></span>
          <span class="title">Host + Support</span>
          <span class="check-status"></span>
          <perch:input type="radio" name="hosting-package" id="hosting-support" label="hosting-support" pcm="20" />
        </perch:label>
      </div>
    </div>
    <div class="col-4 col-m-12 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-wrench"></i></span>
          <span class="title">Host + Updates</span>
          <span class="check-status"></span>
          <perch:input type="radio" name="hosting-package" id="hosting-maintenance" label="hosting-maintenance" pcm="50" />
        </perch:label>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-12">
      <div class="col">
        <h4 class="section-title">Included as standard:</h4>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label class="active" onClick="return false;">
          <span class="icon"><i class="fas fa-tachometer"></i></span>
          <span class="title">Fast Loading Site</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="included" id="fast-loading" label="fast-loading" checked />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label class="active" onClick="return false;">
          <span class="icon"><i class="fas fa-search"></i></span>
          <span class="title">SEO Focused</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="included" id="seo-focused" label="seo-focused" checked />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label class="active" onClick="return false;">
          <span class="icon"><i class="fas fa-mobile-alt"></i></span>
          <span class="title">Responsive Site</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="included" id="responsive" label="responsive" checked />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label class="active" onClick="return false;">
          <span class="icon"><i class="fas fa-paint-brush"></i></span>
          <span class="title">Bespoke Design</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="included" id="bespoke" label="bespoke" checked />
        </perch:label>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-12">
      <div class="col">
        <h4 class="section-title">Additional Options:</h4>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-search"></i></span>
          <span class="title">On Page SEO</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="on-page-seo" label="on-page-seo" perpage="45" />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-comments"></i></span>
          <span class="title">Facebook Chat</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="facebook-live-chat" label="facebook-live-chat" price="45" />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-map"></i></span>
          <span class="title">Google Business</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="google-business-setup" label="google-business-setup" price="45" />
        </div>
        </perch:label>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-bullhorn"></i></span>
          <span class="title">Social Feeds</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="social-integration" label="social-integration" price="45" />
        </perch:label>
      </div>
    </div>
  </div>
  <div class="row content-box">
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-envelope"></i></span>
          <span class="title">Email Setup</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="email-setup" label="email-setup"  price="25" />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-chart-pie"></i></span>
          <span class="title">Google Analytics</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="google-analytics" label="google-analytics" price="15" />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-rss"></i></span>
          <span class="title">Blog Integration</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="blog-integration" label="blog-integration" price="295" />
        </perch:label>
      </div>
    </div>
    <div class="col-3 col-m-6 col-s-12">
      <div class="col">
        <perch:label>
          <span class="icon"><i class="fas fa-pencil-alt"></i></span>
          <span class="title">Logo Design</span>
          <span class="check-status"></span>
          <perch:input type="checkbox" name="additional-options" id="logo-design" label="logo-design" price="295" />
        </perch:label>
      </div>
    </div>
  </div>
  <div class="enquire">
    <div class="row content-box">
      <div class="col-12">
        <div class="col">
          <h4 class="section-title">Tell us about your project:</h4>
        </div>
      </div>
    </div>
    <div class="row content-box">
      <div class="col-6 col-s-12">
        <div class="col">
          <span class="icon"><i class="fas fa-user"></i></span>
          <perch:input type="text" placeholder="Your Name" required="true" label="name" id="name">
        </div>
      </div>
      <div class="col-6 col-s-12">
        <div class="col">
          <span class="icon"><i class="fas fa-building"></i></span>
          <perch:input type="text" placeholder="Company Name" label="company" id="company">
        </div>
      </div>
    </div>
    <div class="row content-box">
      <div class="col-6 col-s-12">
        <div class="col">
          <span class="icon"><i class="fas fa-envelope"></i></span>
          <perch:input type="email" placeholder="Email Address" required="true" label="email" id="email">
        </div>
      </div>
      <div class="col-6 col-s-12">
        <div class="col">
          <span class="icon"><i class="fas fa-phone"></i></span>
          <perch:input type="text" placeholder="Phone Number" label="phone" id="phone">
        </div>
      </div>
    </div>
    <div class="row content-box">
      <div class="col-12">
        <div class="col">
          <span class="icon"><i class="fas fa-pen"></i></span>
          <perch:input type="textarea" placeholder="Project Details" required="true" label="message" id="message"/>
        </div>
      </div>
    </div>
  </div>
  <div class="row content-box enquire-link">
    <div class="col-12">
      <div class="col align-c">
        <h4 class="project-price">
          Approx: <span class="base-price">£0</span> <span class="per-page"></span> <span class="pcm"></span>
        </h4>
        <perch:input type="submit" id="submit" value="send" />
        <perch:input type="text" name="approx. total" value="Total: £0" class="price-estimate" readonly>
      </div>
    </div>
  </div>
</div>
</perch:form>
Lee Buckle

Lee Buckle 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Your custom attributes like price="595" aren't passed through from the template to the HTML tag, because they're not defined by the HTML specification. The way to add custom attributes would be to use the data- prefix, so price="595" would become data-price="595".

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Hi. I hope you can help me, I'm programming a website and inside it I'm going to incorporate a webcam chat for users around the world, similar to this page https://www.webcam-porno.es/chat-porno/ and a contact form and I'm looking for a good script. I don't know if you guys can recommend one that's good and not flawed. The one I'm using on another website is giving me a little trouble. I appreciate your help. Greetings