Forum
Using a form within blocks
Is it possible to use a form within a block? I have a working contact form that is shared and it works fine on a normal Runway pages. But when I use it in a block the success message is displyed correctly upon submission but the form response in the Control Panel are empty. I've tried setting scope-parent="true" on the blocks tag but if I add "parent" to the form id I get a PHP error (Fatal error: Call to a member function label() on a non-object in .../addons/apps/perch_forms/runtime.php on line 25).
The blocks template:
<perch:blocks>
<perch:block type="lead-para" label="Lead Paragraph">
<perch:template path="blocks/lead_paragraph.html" />
</perch:block>
<perch:block type="main-body" label="Main Body">
<perch:template path="blocks/main_body.html" />
</perch:block>
<perch:block type="horizontal-rule" label="Horizontal Rule">
<perch:template path="blocks/horizontal_rule.html" />
</perch:block>
<perch:block type="accordion" label="Accordion">
<perch:template path="blocks/accordion.html" />
</perch:block>
<perch:block type="3-columns-body" label="3 Columns Body">
<perch:template path="blocks/3_columns_body.html" />
</perch:block>
<perch:block type="contact" label="Contact form">
<perch:template path="blocks/contact.html" />
</perch:block>
</perch:blocks>
and the blocks/contact.html file:
<div class="row">
<perch:form id="form-contact" method="post" app="perch_forms" role="form" >
<div class="small-6 column">
<div class="input<perch:error for="name" type="required"> error</perch:error>">
<perch:label class="required"for="name">Your name:</perch:label>
<perch:input id="name" type="text" required="true" placeholder="Name" label="Name" />
<perch:error for="name" type="required"><p class="about-error">Please enter your name</p></perch:error>
</div>
</div>
<div class="small-6 column">
<div class="input<perch:error for="email" type="required"> error</perch:error><perch:error for="email" type="format"> error</perch:error>">
<perch:label class="required" for="email">Your email:</perch:label>
<perch:input id="email" type="email" required="true" placeholder="Email" label="Email" />
<perch:error for="email" type="required"><p class="about-error">Please enter an email address</p></perch:error>
<perch:error for="email" type="format"><p class="about-error">Please enter a valid email address</p></perch:error>
</div>
</div>
<div class="small-12 column">
<div class="input<perch:error for="message" type="required"> error</perch:error>">
<perch:label class="required" for="message">Your message:</perch:label>
<perch:input type="textarea" id="message" placeholder="Message" required="true" label="Message"></textarea>
<perch:error for="message" type="required"><p class="about-error">Please enter a message</p></perch:error>
</div>
</div>
<perch:input form="form-contact" class="button" type="submit" id="submit" value="Send" />
<perch:success>
<div class="form-success">
<perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</div>
</perch:success>
</perch:form>
</div>
What debug output do you get after submitting the form?
Drew
The debug from initial page load looks OK. Debug from the form submit is below:
Kevin
Ok, so it looks like the response goes into the database. Where does the problem arise?
The responses in the database but field values are empty.
Hmm, something's not right there. I'll need to run up your example and give it a test.
Drew Any more thoughts on this? I have created a bare Runway install with a couple of pages that exhibit the issue. I can provide access if it helps
I can't reproduce this - it's working fine here with your template.
Are you using multiple forms?
Drew Just a single form, working OK except when used in a block. The form displays and submits fine but the fields stored are blank Kevin
Can you confirm you're on the current version?
Drew
Yes I originally encountered it on Perch Runway 2.8.31 but as I mentioned I have produced it on a clean install of Perch Runway 2.8.32 with just the necessary templates added.
I've added novalidate to the form and it just submits even with an empty form and required fields. The submission is recorded in the database but fields are always empty even if they are supplied.
I can't reproduce this, so is there anything else you can tell me?
Drew
I've repeated the build with minimal files on a fresh install of Perch Runway 2.8.32 and Perch Forms 1.8.3.
There are only 2 new template files listed below. I then created 2 new pages using the "default" page template. On one I selected contact.html as the template for the Intro region and on the other I selected the freeform.html template.
When contact.html is referenced directly the form works perfectly but on the other page the form displays but the field values are not recorded in the database.
I can provide access to the test system if needed.
/perch/content/contact.html
/perch/content/freeform.html