Adding a Contact Form Screencast

We've just added a new video to the Recite YouTube channel which shows you how easy it is to add a contact form with custom fields to your web site with Recite CMS.


[0:04] In this screencast I'm going to add a page to a Recite web site and then add a contact form to it, and show you how easy this whole process is.

[0:14] I'm going to start with the site we used in the Recite Getting Started video (you can find that on the Recite home page). Let's just take a look at this site. And it's this layout here. In the demo there was a contact page which I've taken that out just to complete this video. So our first step is to add this page back in.

[0:37] To do that we return to the Control Panel and click "Create Sub Page". We're just going to use a generic contact page name, so "Contact Us". Select the page.tpl template (That's the only template available for this web site). Obviously you can have more if you create more; and we're just going to create this as a live page. So click "Create", so that appears now in the navigation here

[1:17] So if we return this page here and refresh, now we get the contact page. It's just a blank page at the moment, so there's a title and no content. I'll just add some content in. Click "Edit Block", which loads up the WYSIWYG. We're going to a form in a moment, so let's just write a message to introduce them to the form.

[1:55] So that's pretty basic; you might want to add in your address details, or phone number, or email address, but for now let's just keep it at this. So we click "Save and Close". It updates here, so let's reload that; and you can see it down there

[2:12] The next step is to create the form, so for that we click on "Forms" (I added this tab earlier). There's no forms on this web site yet so let's click "New Form", and there's two form types available in this installation. If you've set up your web site to use user management there might be some more forms available, but for now let's just pick "Email".

[2:38] It gives us a default title based on the type of form we're creating. And you can choose to protect it with CAPTCHA. I'll just select "Yes" here just to show you what's involved (nothing really, you just pick "Yes").

[2:54] We can add any number of fields to our form, and when we display the form we can loop over those fields so they'll automatically be displayed. We're going to keep this simple and add a field for the person's name, their email address and a field for them to enter their inquiry.

[3:11] So first their name. It's just a sentence. You could pick paragraph if you want multiline (we'll look at that in a moment), but just sentence for their name. And we're going to call it "Your Name". You can enter a help message which you can then display in your template. Something along of the lines of "Please enter your name". I've already got it pre-filled, and we'll say this is required. So that appears there now.

[3:42] And we can add a paragraph, and that can be their message, so "Message", "Please enter your inquiry". We'll make that one required, and we'll add one for their email address. So, "Email". "Please enter your email address", and again we'll make it required.

[4:13] As you can see here we've added "Message" before "Email". We're going to change that so Email comes before Message. Just grab the drag handle and drag it up. Now we create the form.

[4:29] And the form appears here. Click on it to load, which just gives the summary of it. You can see any submissions (there's none yet since we just created it), and the "Recipients" tab allows you to define one or more people to send an email to when the form is submitted.

[4:49] So that form's created, all we need to do now is add it to the Contact Us page. So I'll just close this one and load the website in "Container Management" mode. This just allows us to add dynamic content. So "Contact Us" is the page we're adding it to. Scroll down, we've got this container rule set up, and we pick "Web Form", "Create Rule", and now we can pick the email form. In brackets is the type of form just to differentiate it from other forms.

[5:33] We have to pick a template to output the form in. We haven't actually created this yet so let's return to the Control Panel and click on "Templates". You can see here the other templates used in the site. We can organise these into folders, but to simplify things I've left this flat for now.

[5:51] So now we add a template to output the web form in the container rule. So under "Web Form" we pick "Email" and click "Create Template" and scroll down. We're just going to use the sample template that's bundled with Recite. So pick that and click load. It fills in the filename and just a base set of HTML for these fields.

[6:22] If we look here this {foreach} just indicates it's looping over all the fields that we added previously (name, email and message). This form isn't actually outputting the help option, so in order to do that we can add some code and to do that we add {$|escape}, and we just escape that one. This might not look right depending on the CSS setup. You can also test for that having a length of greater than zero ({if $|strlen > 0}).

[7:00] Down here we check if the CAPTCHA is enabled, and if so we output that. The Smarty tag {captcha} (that's a built-in Recite template function) here outputs an image, and by passing audio=true it generates a "wav" file which the user can listen to if they are vision-impaired, and a field to enter that.

[7:27] So that's if the form hasn't been submitted, and there's also this check at the start: {if form.complete} output the details of what they submitted. So we'll just "Save and Close". We can customise that, but to keep things simple I'll just use the default one with no styling, but you can easily update that. It's a good starting point.

[7:45] So let's return to our site where we're adding the web form container rule. So under display template, click "Select" and now this template we just created is here, so check that, so as the help shows we're just selecting a template used to output the container rule.

[8:03] Click "Add Rule to Container"; this is just a message that we need to reload now, so we could do that, but since we're done at this point I'll just close administration mode. So we click "Close" there, and now we scroll down, and you can see the form here, and the help message I just added to the template. And these are each of the fields that we added earlier.

[8:28] We can fill this out just to show you how easy that was to do. So I'll enter some details. Now this will validate, meaning if an invalid email address is entered an error message will be shown. And I'll just add a sample message, "Demonstrating the Recite Form", and enter the CAPTCHA and click "Submit". And that's all there is to it. You can see we outputted what the person entered here. Unstyled, but we always improve that.

[9:12] So return to the Recite Control Panel and click on Forms. Now if we click on the "Submissions" tab, we can see the submission, and we can see all the fields that were entered. And that's how you add a web form to Recite.

Try Out Recite

You can try out Recite CMS now by signing up for a demonstration. No charge and no obligation!

Follow @ReciteCMS on Twitter

Behind this site