Forum
Perch Forms App - Two Separate Forms on the same page are submitting under one n...
Hi guys,
I've got a bit of an issue with a Forms integration on my site.
Currently, when a user completes the first form and submits it (handled via AJAX), I've got some JQuery that is bringing in the second form and displaying it.
Both forms have unique cms-form fields, and unique ids/names. The fields within the forms do share ids, but Perch automatically adds form1_ and form2_ so they don't share ids when they render.
Any idea why this might be happening?
Please see below for form 1 code:
<perch:form id="fyni" name="fyni" method="post" app="perch_forms" class="contact-form fynr-form">
<div>
<div class="select-style">
<perch:input type="select" options="Mr,Mrs,Miss,Dr" id="title" required="true"/>
</div>
<perch:error for="title" type="required"><span class="error">Please select your title.</span></perch:error>
</div>
<div class="input-wrap">
<perch:input type="text" id="first_name" placeholder="First Name" required="true" label="First Name" />
<perch:error for="first_name" type="required">Please add your first name</perch:error>
</div>
<div class="input-wrap">
<perch:input type="text" id="email" placeholder="Email" required="true" label="Email" />
<perch:error for="email" type="required">Please add your email address</perch:error>
</div>
<div class="input-wrap">
<perch:input type="text" id="postcode" name="postcode" placeholder="Postcode" required="true"/>
<perch:error for="postcode" type="required">Please include your postcode</perch:error>
</div>
<div class="input-wrap">
<perch:input type="text" id="last_name" placeholder="Last Name" required="true" label="Last Name" />
<perch:error for="last_name" type="required">Please add your last name</perch:error>
</div>
<div class="input-wrap">
<perch:input type="text" id="telephone" placeholder="Telephone" required="true" label="Telephone" />
<perch:error for="telephone" type="required">Please add your telephone number</perch:error>
</div>
<h3>When is your project starting?</h3>
<perch:input id="project_starting" required="true" wrap="div.radiowrapper" type="radio" options="Within 2 wks|less than 2 wks,Within 4 wks|less than 4 wks,2-3 Months|2-3 months,3 Months +|more than 3 months" />
<perch:error for="project_starting" type="required">Please let us know when your project is starting.</perch:error>
<div id="submitholder"><perch:input id="submit-fyni" type="submit" value="Find My Nearest Installer" class="default-btn"/></div>
</perch:form>
and form 2 (minified for JQuery after(); function to work):
<perch:form id="contact-retailer" name="Contact Retailer" method="post" app="perch_forms" class="contact-form fynr-form"><perch:input type="text" id="title" required="true"/><perch:error for="title" type="required"><span class="error">Please select your title.</span></perch:error><perch:input type="text" id="first_name" placeholder="First Name" required="true" label="First Name"/><perch:error for="first_name" type="required">Please add your first name</perch:error><perch:input type="text" id="email" placeholder="Email" required="true" label="Email"/><perch:error for="email" type="required">Please add your email address</perch:error><perch:input type="text" id="postcode" name="postcode" placeholder="Postcode" required="true"/><perch:error for="postcode" type="required">Please include your postcode</perch:error><perch:input type="text" id="last_name" placeholder="Last Name" required="true" label="Last Name"/><perch:error for="last_name" type="required">Please add your last name</perch:error><perch:input type="text" id="telephone" placeholder="Telephone" required="true" label="Telephone"/><perch:error for="telephone" type="required">Please add your telephone number</perch:error><perch:input id="project_starting" required="true" type="text" /><perch:error for="project_starting" type="required">Please let us know when your project is starting.</perch:error><perch:input id="message" label="Message for retailer (optional)" type="textarea"/><div id="submitholder"><perch:input id="submit-contact-retailer" type="submit" value="Send my information to this retailer" class="default-btn"/></div></perch:form>
Thanks!
What problem are you seeing?
Both forms submit under the same Form entry in the back end, when they need to be separate forms - sorry, I forgot to include that in the post!
Solved! There was an issue with my AJAX.