May

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
<?php class ContactPage extends Page{ } class ContactPage_Controller extends Page_Controller{ }

themes/yourtheme/templates/Layout/ContactPage.ss
<div class="typography"> <h2>$Title</h2> </div>

themes/yourtheme/templates/ContactEmail.ss
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> </body> </html>

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
class ContactPage extends Page { static $db = array( 'Mailto' => 'Varchar(100)', 'SubmitText' => 'Text' ); function getCMSFields() { $fields = parent::getCMSFields(); $fields->addFieldToTab("Root.Content.OnSubmission", new TextField('Mailto', 'Email submissions to')); $fields->addFieldToTab("Root.Content.OnSubmission", new TextareaField('SubmitText', 'Text on Submission')); return $fields; } } . . .

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
. . . class ContactPage_Controller extends Page_Controller { function ContactForm() { // Create fields $fields = new FieldSet( new TextField('Name', 'Name*'), new EmailField('Email', 'Email*'), new TextareaField('Comments','Comments*') ); // Create action $actions = new FieldSet( new FormAction('SendContactForm', 'Send') ); // Create Validators $validator = new RequiredFields('Name', 'Email', 'Comments'); return new Form($this, 'ContactForm', $fields, $actions, $validator); } }

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
class ContactPage_Controller extends Page_Controller { . . . function SendContactForm($data) { //Set data $From = $data['Email']; $To = $this->Mailto; $Subject = "Website Contact message"; $email = new Email($From, $To, $Subject); //set template $email->setTemplate('ContactEmail'); //populate template $email->populateTemplate($data); //send mail $email->send(); //return to submitted message Director::redirect(Director::baseURL(). $this->URLSegment . "/?success=1"); } }

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
class ContactPage_Controller extends Page_Controller { . . . public function Success() { return isset($_REQUEST['success']) && $_REQUEST['success'] == "1"; } }

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> p{ font-size: 1.2em; color: #444; } p.comments{ font-size: 1.4em; color: #222; padding: 20px; } </style> </head> <body> <p>The following message was submitted to your site by $Name:</p> <p class="comments">$Comments</P> <p>You may respond by directly replying to this email.</p> </body> </html>

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
<div class="typography"> <h2>$Title</h2> <% if Success %> $SubmitText <% else %> $Content $ContactForm <% end_if %> </div>

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)

We manufacture Viagra related medicines. Old Men are not able to do sex compare to young men. <a href="http://www.iservepharmacy.com" target="_blank">generic viagra</a> is a medicine that helps those old men to speed up their excitement during sex time. They can get more enjoyment during sex.

Posted by smith adairs, 07/09/2010 1:02am (2 days ago)
We have business of Viagra related medicines. Men are not able to do sex anymore as their age goes to 40 to 50. Those old men can take <a href="http://www.iservepharmacy.com/ generic viagra" target="_blank">generic viagra</a> to speed up their excitement during sex and can get more enjoyment.

Posted by chaitanya patel, 07/09/2010 12:53am (2 days ago)
great post! i'm bookmarking this!

Posted by discount designer handbags, 06/09/2010 9:47pm (2 days ago)
<A href="http://www.sneakersfromchina.com/"> wholesale air max 24/7 </A>
<A href="http://www.sneakersfromchina.com/"> discount Lacoste Clothing </A>
<A href="http://www.sneakersfromchina.com/"> fashion coogi t shirts </A>
<A href="http://www.sneakersfromchina.com/"> True Religion Clothing </A>
<A href="http://www.sneakersfromchina.com/"> buy Burberry Clothing </A>
<A href="http://www.sneakersfromchina.com/"> Christian Audigier Clothes </A>
<A href="http://www.sneakersfromchina.com/"> Prada Clothing </A>
<A href="http://www.sneakersfromchina.com/"> discount Gucci Clothes </A>
<A href="http://www.sneakersfromchina.com/"> buy Ed Hardy Clothes </A>
<A href="http://www.sneakersfromchina.com/"> Armani Clothes </A>
<A href="http://www.sneakersfromchina.com/"> Dolce Gabbana Clothing </A>
<A href="http://www.sneakersfromchina.com/"> Lacoste Clothing </A>

Posted by cluburban, 05/09/2010 12:28pm (4 days ago)
good blog,thanks your sharing.we like <a href="http://www.handbagsioffer.com"><strong>wholesale gucci handbags</strong></a>

Posted by wholesale gucci handbags, 31/08/2010 5:35am (9 days ago)
that is good, we like this blog.tks.we like <a href="http://www.handbagsioffer.com/coach-handbag-c-8.html"><strong>coach handbags</strong></a>

Posted by coach handbags, 29/08/2010 9:38pm (10 days ago)
that is good, we like this blog.tks.we like <a href="http://www.handbagsioffer.com/coach-handbag-c-8.html"><strong>coach handbags</strong></a>

Posted by coach handbags, 29/08/2010 9:37pm (10 days ago)
Search Engine Marketing will increase your company’s online presence through comprehensive online marketing campaigns, targeted search engine optimization, and highly managed internet marketing promotions. A search engine marketing campaign will encompass several procedures and factors to make it successful. Please reply to this email so we can send you more details.

Posted by Randall Tuttle, 28/08/2010 1:13am (12 days ago)
How to make this contact form to appear on every page as a small independent block? (as subpage)

Posted by Donatas, 26/08/2010 8:14am (14 days ago)
http://www.ssbits.com/creating-a-simple-contact-form/

Posted by Michelle, 25/08/2010 1:58am (15 days ago)

1 2 3 4 5 6 7 8 next »

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

Creating a Simple Contact Form

What it Does

Requirements

Attached Files

Preperation

Part II: Defining the Contact Form

Part III: Processing the Form Submission

Part IV: Email Template

Part V: ContactPage Template

About the Author

Comments (10)

Post your comment

categories

archive

partners

popular posts

SilverStripe.org links