Forum
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.
- 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.
- Checking one of the checkboxes from lower down the form automatically selects the last radio button in the 2 radio button sets above.
- 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.
- 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.
- 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>
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 thedata-prefix, soprice="595"would becomedata-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