Home
 

03

May

74

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 agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Comments (10)

  • @tesera
    make sure you have entered an address to send the mail to inside the CMS, under the 'on Submission' tab. Looks like there is no address to send it to.....

    Posted by Aram, 12/11/2009 11:16am (10 months ago)

  • The "requirement" code worked really well !!!
    Thank you so much !

    Keep doing great stuff like this !!!!

    :)

    Posted by roxane, 12/11/2009 2:56am (10 months ago)

  • Thanks for your prompt reply. I am a newbie and to be honest do not understand what you are asking. I used the already complete files, and although I have read through your tutorial I still do not know how to proceed. thanks for your help

    Posted by Teresa, 11/11/2009 5:38pm (10 months ago)

  • Have implemented contact form but get this message when testing it:
    A message that you sent contained no recipient addresses, and therefore no delivery could be attempted.

    Posted by Teresa, 11/11/2009 3:04pm (10 months ago)

  • try including the jQuery by adding it to your init() function in the controller with: Requirements::customScript('[YourCodeHere]');

    Posted by Aram, 10/11/2009 6:22am (10 months ago)

  • Hey ! Thanks for your tut !

    On my contact pages, the jquery code i wrote doesn't show up, and seems not to be loaded at all (but the jquery file is loaded... weird...).

    The $ContactForm makes the jquery code disappear... Any idea ?

    Keep on workin' ! You're doing grrrrreat !

    Posted by roxane, 10/11/2009 2:37am (10 months ago)

  • @Mary
    Try doing db/build.....
    if not than you need to create that page in cms

    Posted by mladen, 01/10/2009 6:00pm (11 months ago)

  • @nick jacobs: Don't know whether there is a better solution, but I've solved the checkboxes output by including a Control of the CheckboxFSetFields. E.g.:
    [code]
    MyForm.php

    new CheckboxSetField(
    $name = "MyCheckboxes",
    $title = "Title",
    $source = array(
    "Option1" => "Option 1",
    "Option2" => "Option 2",
    )
    )


    MyForm.ss

    <% control MyCheckboxes %>
    <% if Option1 %><li>One</li><% end_if %>
    <% if Option2 %><li>Two</li><% end_if %>
    <% end_control %>
    [/code]

    Posted by Exadium Web Development, 27/07/2009 5:18am (1 year ago)

  • Thanks Sam! I have corrected the file names and also some of the spelling, I must have forgotten to run the spell checker 8)
    Thanks again!

    Posted by aram, 26/07/2009 7:02pm (1 year ago)

  • Errors in Tutorial...
    First off, thanks for the great tutorial!

    I could not get it to work until I changed the name of ContactForm.php file (
    mysite/code/ContactForm.php) to ContactPage.php to match the class name and controller. Using ContactForm.php I got an error saying that the ContactPage class doesn't not exist. I am using the most current silverstripe version - 2.3.2. I just noticed the the zip files correct in that it has ContactPage.php not ContactForm.php.

    Also, you may want to do a spell check on the article there are several spelling mistakes.

    Thanks again,
    Sam

    Posted by sam Miller, 26/07/2009 5:06pm (1 year ago)

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

Post your comment