Forum

Thread tagged as: Problem, Runway, Forms

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>
Kevin Jackson

Kevin Jackson 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

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

Debug Message
[19] SELECT p.pagePath, pr.routePattern, pr.routeRegExp, p.pageTemplate FROM tdnr_pages p LEFT JOIN tdnr_page_routes pr ON p.pageID=pr.pageID ORDER BY pr.routeOrder ASC, p.pagePath ASC
Matched page: /test-economics/the-journey, so not using routes.
Using master page: /templates/pages/default.php
[1] SELECT * FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' LIMIT 1
[12] SELECT DISTINCT settingID, settingValue FROM tdnr_settings WHERE userID=0
Requested sub-template not found: /blocks/lead_paragraph.html
Requested sub-template not found: /blocks/main_body.html
Requested sub-template not found: /blocks/horizontal_rule.html
Requested sub-template not found: /blocks/accordion.html
Requested sub-template not found: /blocks/3_columns_body.html
Requested sub-template not found: /blocks/contact.html
[1] SELECT * FROM tdnr_forms WHERE formKey='form-contact' LIMIT 1
INSERT INTO tdnr_forms_responses(responseJSON,formID,responseIP,responseSpamData) VALUES('{\"fields\":[],\"files\":[],\"page\":{\"id\":\"19\",\"title\":\"The Journey\",\"path\":\"\\/test-economics\\/the-journey\",\"navtext\":\"The journey\"}}','1','127.0.0.1','{\"fields\":[],\"environment\":{\"REDIRECT_TMP\":\"\\/Applications\\/AMPPS\\/tmp\",\"REDIRECT_STATUS\":\"200\",\"TMP\":\"\\/Applications\\/AMPPS\\/tmp\",\"HTTP_HOST\":\"sqc.dev\",\"HTTP_USER_AGENT\":\"Mozilla\\/5.0 (Macintosh; Intel Mac OS X 10.11; rv:49.0) Gecko\\/20100101 Firefox\\/49.0\",\"HTTP_ACCEPT\":\"text\\/html,application\\/xhtml+xml,application\\/xml;q=0.9,*\\/*;q=0.8\",\"HTTP_ACCEPT_LANGUAGE\":\"en-GB,en;q=0.5\",\"HTTP_ACCEPT_ENCODING\":\"gzip, deflate\",\"HTTP_REFERER\":\"https:\\/\\/sqc.dev\\/test-economics\\/the-journey\",\"HTTP_COOKIE\":\"cmsa=1; PHPSESSID=23aej1bkds9a0uejnfr6pgdfq6\",\"HTTP_CONNECTION\":\"keep-alive\",\"HTTP_UPGRADE_INSECURE_REQUESTS\":\"1\",\"CONTENT_TYPE\":\"application\\/x-www-form-urlencoded\",\"CONTENT_LENGTH\":\"167\",\"PATH\":\"\\/usr\\/bin:\\/bin:\\/usr\\/sbin:\\/sbin\",\"SERVER_SIGNATURE\":\"\",\"SERVER_SOFTWARE\":\"Apache\\/2.4.20 (Unix) PHP\\/5.5.35 mod_wsgi\\/3.5 Python\\/3.5.1 OpenSSL\\/1.0.1p\",\"SERVER_NAME\":\"sqc.dev\",\"SERVER_ADDR\":\"127.0.0.1\",\"SERVER_PORT\":\"80\",\"REMOTE_ADDR\":\"127.0.0.1\",\"DOCUMENT_ROOT\":\"\\/Volumes\\/MacHDD\\/WebDevelopment\\/SQC2016\",\"REQUEST_SCHEME\":\"http\",\"CONTEXT_PREFIX\":\"\",\"CONTEXT_DOCUMENT_ROOT\":\"\\/Volumes\\/MacHDD\\/WebDevelopment\\/SQC2016\",\"SERVER_ADMIN\":\"admin@localhost\",\"SCRIPT_FILENAME\":\"\\/Volumes\\/MacHDD\\/WebDevelopment\\/SQC2016\\/sqc-admin\\/core\\/runway\\/start.php\",\"REMOTE_PORT\":\"60409\",\"REDIRECT_URL\":\"\\/test-economics\\/the-journey\",\"GATEWAY_INTERFACE\":\"CGI\\/1.1\",\"SERVER_PROTOCOL\":\"HTTP\\/1.1\",\"REQUEST_METHOD\":\"POST\",\"QUERY_STRING\":\"\",\"REQUEST_URI\":\"\\/test-economics\\/the-journey\",\"SCRIPT_NAME\":\"\\/sqc-admin\\/core\\/runway\\/start.php\",\"PHP_SELF\":\"\\/sqc-admin\\/core\\/runway\\/start.php\",\"REQUEST_TIME_FLOAT\":1476444651.681,\"REQUEST_TIME\":1476444651}}')
[1] SELECT * FROM tdnr_forms_responses WHERE responseID='23' LIMIT 1
No ids to log.
[3] SELECT regionKey, regionHTML FROM tdnr_content_regions WHERE regionPage='/test-economics/the-journey' OR regionPage='*' ORDER BY regionPage DESC
Using template: /templates/pages/attributes/seo.html
Using template: /templates/pages/attributes/default.html
Using sub-template: /templates/pages/attributes/seo.html
Using sub-template: /templates/pages/attributes/body_attributes.html
[10] SELECT * FROM tdnr_pages WHERE pageNew=0 AND pageHidden=0 AND pageDepth >=0 AND pageDepth<=2 ORDER BY pageTreePosition ASC
[1] SELECT pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' LIMIT 1
[3] SELECT pageID FROM tdnr_pages WHERE pageTreePosition IN ('000-003-002-003', '000-003-002', '000-003', '000') ORDER BY pageTreePosition DESC
Using template: /templates/navigation/main_nav_level1.html
[3] Using template: /templates/navigation/main_nav_level2.html
[6] Using template: /templates/navigation/main_nav_level2.html
Using template: /templates/search/search-form.html
[1] SELECT pageID, pageParentID, pageDepth, pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' OR pageSortPath='/test-economics/the-journey' LIMIT 1
[1] SELECT pageID, pageParentID, pageDepth, pageTreePosition FROM tdnr_pages WHERE pageTreePosition='000' LIMIT 1
[17] SELECT * FROM tdnr_pages WHERE pageNew=0 AND pageHidden=0 ORDER BY pageTreePosition ASC
[1] SELECT pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' LIMIT 1
[3] SELECT pageID FROM tdnr_pages WHERE pageTreePosition IN ('000-003-002-003', '000-003-002', '000-003', '000') ORDER BY pageTreePosition DESC
Using template: /templates/navigation/mobile_nav_level1.html
[3] Using template: /templates/navigation/mobile_nav_level2.html
[6] Using template: /templates/navigation/mobile_nav_level2.html
[1] SELECT pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' OR pageSortPath='/test-economics/the-journey' LIMIT 1
[3] SELECT * FROM tdnr_pages WHERE pageHidden=0 AND pageNew=0 AND pageTreePosition IN ('000-003-002-003', '000-003-002', '000-003', '000') ORDER BY pageTreePosition
[3] Using template: /templates/navigation/breadcrumbs.html
[1] SELECT pageID, pageParentID, pageDepth, pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' OR pageSortPath='/test-economics/the-journey' LIMIT 1
[1] SELECT pageID, pageParentID, pageDepth, pageTreePosition FROM tdnr_pages WHERE pageTreePosition='000-003-002' LIMIT 1
[6] SELECT * FROM tdnr_pages WHERE pageNew=0 AND pageHidden=0 AND pageTreePosition LIKE '000-003-002%' ORDER BY pageTreePosition ASC
[1] SELECT pageTreePosition FROM tdnr_pages WHERE pagePath='/test-economics/the-journey' LIMIT 1
[3] SELECT pageID FROM tdnr_pages WHERE pageTreePosition IN ('000-003-002-003', '000-003-002', '000-003', '000') ORDER BY pageTreePosition DESC
Using template: /templates/navigation/section_nav_level1.html
Using template: /templates/navigation/section_nav_level2.html
[1] Using template: /templates/navigation/section_nav_level3.html
Request time: 0.0964
Process time: 0.0948
Memory: 2.5548
Drew McLellan

Drew McLellan 2638 points
Perch Support

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.

{"fields":[],"files":[],"page":{"id":"19","title":"The Journey","path":"\/test-economics\/the-journey","navtext":"The journey"}}
Drew McLellan

Drew McLellan 2638 points
Perch Support

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

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.

Drew McLellan

Drew McLellan 2638 points
Perch Support

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:form id="contact" method="post" app="perch_forms">
    <perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup" size="m" />
    <div>
        <perch:label for="name">Name</perch:label>
        <perch:input type="text" id="name" required="true" label="Name" />
        <perch:error for="name" type="required">Please add your name</perch:error>
    </div>
    <div>
        <perch:label for="email">Email</perch:label>
        <perch:input type="email" id="email" required="true" label="Email" placeholder="you@company.com" />
        <perch:error for="email" type="required">Please add your email address</perch:error>
        <perch:error for="email" type="format">Please check your email address</perch:error>
    </div>
    <div>
        <perch:label for="message">Message</perch:label>
        <perch:input type="textarea" id="message" required="true" label="Message" />
        <perch:error for="message" type="required">Please add a message</perch:error>
    </div>
    <div>
        <perch:input type="submit" id="submit" value="Send" />
    </div>
    <perch:success>
        <perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
    </perch:success>
</perch:form>

/perch/content/freeform.html

<perch:blocks>
  <perch:block type="contact" label="Contact form">
    <perch:template path="contact.html" />
  </perch:block>
</perch:blocks>