Home
 

03

May

38

Creating a Simple Contact Form

What it Does

Generates a simple contact for which when submitted sends an email to a CMS defined email address using a custom template. The user is then presented with a submission message telling them that the message has been submitted successfully.

Requirements

SilverStripe 2.3 +

Attached Files


Complete.zip(2 KB)

Preperation

We will be using 3 files in this tutorial, our Contact form page type, ContactPage.php and it's layout template ContactPage.ss as well as the email template ContactEmail.ss. Let's create these files and their initial code:

mysite/code/ContactForm.php

themes/yourtheme/templates/Layout/ContactPage.ss

themes/yourtheme/templates/ContactEmail.ss

Part I: Creating the Page Model

The first thing we need to do is setup the ContactPage model with database fields ($db) and CMS fields. For this tutorial we will keep it simple and add 2 fields, a MailTo field for the address to mail the contact form to and also a field for the text on submission of the form, which we'll call SubmitText. So add the following to your ContactPage class:

mysite/code/ContactForm.php

Once done, flush your database by visiting yoursite.com/dev/build

Part II: Defining the Contact Form

Now let's actually create the fields for our contact form. Again we will keep it simple and add a Name, Email and Comments field, but you can add as many fields as you like without making the logic more complicated. To get SilverStripe to generate the form we need a function on our ContactPage_Controller class which will return the fields to the page template. We will call this function ContactForm(). A blindingly original name I know.

mysite/code/ContactForm.php

The first thing we do is define the variable $fields which contains a FieldSet with our 3 fields in them.

Next we define the $action variable which creates a form action  (i.e. the submit button) and assigns it the SendContactForm function which we will be defining in the next step. The second argument that the FormAction() function takes is the label for the submit button, in this case we are labeling it with Send but you can label yours with whatever you like.

We then set the required fields for the form, in this case all of them and store them in the $validator variable. Finally we return a new form using our predefined variables as arguments. Now when we call $ContactForm from the template, SilverStripe will place our contact form object in it's place.

Part III: Processing the Form Submission

Our Contact Form can now be drawn and submitted, but once submitted SilverStripe won't know what to do with it because we haven't defined a function to deal with it. The Submit Button we defined in the last step is going to look for a function called SendContactForm when it's pressed so let's define that function now inside our ContactPage_Controller class:

mysite/code/ContactForm.php
 

This function is pretty self explanatory, but let's go through it quickly. We pass in the $data variable which provides the function with the submitted form data so that we can process it. We then assign the relevant bits of data to variables ($From, $To and $Subject) before creating a new Email() object with these variables as arguments. Next we set the template for the email which is just the name of the Template without the .ss on the end. Then we simple pass our $data array into the populateTemplate() function so that we can use the data in our template by simply calling $Name , $Comments etc. You could also pass a custom array into this function if you needed to add other data beyond that submitted in the form.

Finally we send the email and return the user to the current URL + /?Success=1 which allows us to test whether the form has been submitted and if it has then display the SubmitText message instead of the form. To do this we need a function which will return true when Success is equal to 1. We can put in in the ContactPage_Controller under our SendContactForm() function It will look like this:

mysite/code/ContactForm.php

This function checks to see if success is set and whether it is set to 1, returning true if so. We can now use <% if Success %> in our template to add/remove content depending on whether the form has been submitted or not. This completes our php code so lets move onto the frond end templates.

Part IV: Email Template

Before we send the email in our SendContactForm() function we populate the template ContactEmail. Although the official SilverStripe documentation states that this template should go into mysite/templates/email/ I have found that it in fact only works when it's in your themes/yourtheme/templates/ folder. We need to create this template so that our email arrives with pretty HTML formatting. In the preparation we made the empty file with doc type and a <head> and <body> tags. We now need to add some CSS styling and the<body> content. This is very much down to how you want your email to look so just take this as an example, the only things which need to be the same are the names of the variables, which should match the names of the Form Fields defined in Part II, in this case $Name and $Comments.

themes/yourtheme/templates/ContactEmail.ss

Part V: ContactPage Template

Finally we just need to define the template for our contact Page. using our Success() function we can use a conditional to decide whether to include the form of the SubmitText like this:

themes/yourtheme/templates/Layout/ContactForm.ss

And that's it! You should now have a fully functioning contact form for your visitors to send you wonderful insightful and thought provoking messages to their hearts content!

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

Aram is a web designer/developer running London based startup aab web. He recently went full time into web development after leaving his previous career in 3D animation behind.

Comments (10)

  • thanks

    Posted by kidstoy, 26/02/2010 7:55am (13 days ago)

  • A really useful tutorial, especially I combined this with the Google maps API. I now have a ready to go Contact Us page for any project.
    Thanks Aram and keep up the good work. The audience is listening!

    Posted by Kush, 19/02/2010 1:23am (20 days ago)

  • Thanks, very useful tutorial :-)

    Posted by W3spor, 16/02/2010 7:24am (23 days ago)

  • Why am I getting a border around the contact form?

    Posted by Chris Schneider, 13/02/2010 9:38pm (25 days ago)

  • Is there a way to use dropdown with value and option and also the onchange someting() in selection

    what i need to make is something like that http://www.nerdydork.com/dynamic-filtered-drop-down-choice-fields-with-django.html

    Posted by Teet, 29/12/2009 2:18pm (2 months ago)

  • Thanks a lot, Aram. I will try with jQuery.

    Posted by lise, 21/12/2009 9:10am (3 months ago)

  • I origonally used to use FloatBox but then it went commercial and I began using jQuery so found colorbox and shadowbox pretty good options, along with facebox.

    Posted by Aram, 20/12/2009 8:02am (3 months ago)

  • Hi Aram,
    Thank you very much for your reply. You confirm what I was thinking (i.e that it is not in SS but has to be manually integrated). What script did you use? I have been trying to use GreyBox (from Orangoo labs) but can't make it work. I am just curious ...
    Thanks again - Lise

    Posted by lise, 20/12/2009 1:03am (3 months ago)

  • Hi Lise,

    I have only ever done this using an Iframe, I guess it would really depend on the popup script you are using, some will work with inline forms others wont. If you go the iframe route then you just need to make the ContactPage.ss what you want to appear in the popup. If you go the inline route then just put the $ContactForm inside a hidden div and follow the instructions for the script you are using. Hope that helps!

    Aram

    Posted by aram, 19/12/2009 6:33pm (3 months ago)

  • Thank you very much for the tutorial. It works fine. However I am trying to have the contact form in a popup window instead and I am wondering if ,by any chance, you have tried to do it too. Any hint or pointer? thanks a lot. -- Lise

    Posted by lise, 18/12/2009 10:12am (3 months ago)

1 2 3 4 next »

RSS feed for comments on this page RSS feed for all comments

Post your comment