Solutions

Adding a form to your site with Perch Forms

18 August 2011

Perch 1.7 makes adding forms to your website easy. To get started try this drop in example.

First make sure you are running Perch 1.7 and then download the free Forms app from [link]. Install the app by adding the perch_forms folder to perch/apps then editing perch/config/apps.php and adding the following line.

include(PERCH_PATH.'/apps/perch_forms/runtime.php');

Visit the Perch admin and click on the new link to Forms to install the app.

Download the template file – contact-form.html and place it into perch/templates/content. Forms are generally treated as content because you will usually include Perch content tags for messaging as in this example.

Create a page in your site called contact.php and add a regular Perch tag to the page.

<?php perch_content('Contact Form'); ?>

Reload the page in your browser and go to the Content page in Perch Admin where the new page should show up. Select the new region and set this to the Contact Form template. You can now add an intro to the form and the message that displays once the form has successfully posted.

Save this and go back to your contact.php page in the browser, reload the page and a form should appear. Complete the form and submit it.

Forms - contact form

Back in admin now go to the Forms page – you will see that Perch has picked up your form and lists it. You can now configure the form choosing whether to store data for download as CSV, send an email to an email address or addresses. You can even configure file uploads and protect yourself from spam using Akismet.

Forms - form admin

Forms are not limited to contact forms – you can create almost any kind of form you an think of using Perch. We have a full implementation of HTML5 form fields, backed by serverside validation of those new elements and attributes.

As you would expect in Perch it is up to you if you want to use HTML5 forms. To use HTML5 edit perch/config/config.php to add the line:

define('PERCH_HTML5',true);

Perch will then create form elements which can be validated on the front-end in supporting browsers. For example Chrome is here flagging that the email field has been completed with something other than an email address.

Forms - HTML5 in Chrome

Whether you use HTML5 form inputs or not, Perch will validate the fields according to how you have created them in Perch. So an email address will be validated as an email address on the serverside.

Posted by Rachel Andrew at 14:20
Tagged:

Perch by edgeofmyseat.com

Perch is a product developed and sold by edgeofmyseat Limited t/a edgeofmyseat.com Registered as a company in England and Wales, company registration no. 04735127