37 - Building a Contact Form in ExpressionEngine
This chapter finds the last unlinked-to link on the Train-ee Church Website hooked up. Yep - it’s the Contact page.
No doubt about it - there’s a ton of communication that happens at a church. Besides the messages each week(and the planning involved in those) there’s event coordination, ministry schedules, and a host of other administrative communications that has to happen for churches to do what they do.
But I think the most important messages that church could get - in fact messages that really comprise the entire reason that the church exists - are mostly likely to happen outside those official channels and scheduled conversations. When people are truly in need, and are maybe not the most well-connected people within the church, or are new, or just don’t have another more personal method of communicating their need - that’s when they are going to be most likely to pick up the phone or use the church website to send their message.
You could argue that this one page is the most important on the whole site. Other than the commenting ability this sample church website has in a few places, the rest of the content is from church to site visitor. The Contact page is one of the few places where the visitor gets to respond or initiate a conversation - so make sure your site has one and a link to it appears on every page. And make sure the email account it goes to is shared - so that the inevitable vacation or illness doesn’t mean email sits unanswered for any length of time. And - be prompt. Answer these emails the same day they come in if at all possible (You might even post hours on the contact form). Have them sent to an email account that can be checked remotely - via mobile device even. As the younger generations start to fill in your church membership it will no longer be acceptable to answer emails once a week and figure you’re doing well.
OK - with the high-level stuff out of the way let’s move to specifics; how to implement a contact form on our ExpressionEngine-based website.
Implementing the contact page will require the following:
- Installing the Email Module
- Creating a new template group
- Bringing the Name & Address in
- Integrating site template with EE’s contact form code
- Updating the site header and footer embeds
- Testing the form
Core Users
If you are working with ExpressionEngine’s Core version you will not be able to create a Contact form, as EE Core does not include the Email Module that the form relies on.
Install the Email Module
The Email Module is not installed by default. You’ll need to log into your EE Control Panel and navigate to the Modules Tab. Find Email in the list, and click the Install link on the far right on the screen. It should install immediately - with no extra files to upload etc.
Create a New Template Group
I chose to create a new template group for no other reason than to have a cleaner URL. My template group name is just “contact” which will give me a URL of:
http://church.train-ee.com/index.php/contact/
I could have just put another template in the default “site” group, but that would give me a URL of:
http://church.train-ee.com/index.php/site/contact/
I’ll be working with the index template. The template set I’m using for this particular series also came with a specific contact template - so I copied that in page-comps/contact as a starting point for contact/index.
Bringing the Name & Address In
This is the easy part - because way back in Chapter 11 I stored the church name and address in a weblog entry so that I could use it on the site’s home page. In order to get the church name and address to show on the contact page, all I did was grab the following code from the site/index template, and place it in the contact_address div in the template:
{exp:weblog:entries weblog="home_page" url_title="name-and-address" disable="member_data|pagination|categories|trackbacks" dynamic="off"}
{page_content}
{/exp:weblog:entries}
After loading that code and refreshing the template, I had the left-side of the page filled in with the physical address - which gets maintained in one place but appears now in two places on the site.
Integrate Site Template with EE’s Code
Now for the fill-in-the-blank form. My approach with basic contact forms is to start with the code from the EE docs as a starting point. The task at hand is to merge the the EE form code together with the church template such that EE handles the functionality but the correct markup is applied by the HTML and CSS from the template set.
The biggest difference between the two forms is the way the labels are handled - so I took the church template’s direction there, and left those as-is. I then worked the EE form field code in to the mix, replacing the church templates form code.
The only issue I ran into was this; both the church template and EE want to work with a CSS ID of “contact_form”. The church template has the container div for the form named that, and ExpressionEngine renders the form code itself out with a form ID of “contact_form”. What this led to was some of the markup was getting applied twice. I resolved it by changing the name of the container div to “contact_us_form” and updating the related styles in the stylesheet. That took care of the double markup issue. Here then is the resulting form code:
<div id="contact_us_form">
{exp:email:contact_form user_recipients="false" recipients="test@admin.com" charset="utf-8"}
<div class="text_label">
Name:
</div>
<div class="left">
<input type="text" id="name" name="name" />
</div>
<div class="spacer"></div>
<div class="text_label">
E-mail Address:
</div>
<div class="left">
<input type="text" id="from" name="from" />
</div>
<div class="spacer"></div>
<div class="text_label">
Subject:
</div>
<div class="left">
<input type="text" id="subject" name="subject" value="Contact Form" />
</div>
<div class="spacer"></div>
<div class="text_label">
Message:
</div>
<div class="left">
<textarea id="message" name="message" rows="10" cols="30"></textarea>
</div>
<div class="spacer"></div>
<div>
<input name="submit" class="btn" type="image" value="submit" src="{site_url}images/interface/send-button.gif" />
</div>
{/exp:email:contact_form}
</div><!--close contact_form-->
Note that EE will provide the opening and closing Form HTML tags. I also have a bogus email address specified - since this template will get linked to in text form I didn’t want a real one there to get picked up by the spam harvesters. On an actual site that problem won’t occur since ExpressionEngine will obfuscate the rendered receiving email address. The only other change I made was to trade out the Phone Number field specified in the church templates for a name field that will help the email come through in a nicer fashion (if you leave Name off, you’ll just get the email address that’s been entered). I also added a subject field.
Hooking up the Link
With the form in place you can now update embeds/page_header and embeds/footer. Link to the new page using a Path variable:
<a href="{path='contact'}">Contact</a>
Testing the Form
At this point I was able to bring up the site, navigate to the new form, fill in the fields, and submit the form. Within a minute or so I had fresh email to look at - so all was successful.
Page Header Text
So now I have a page with the church name, address and phone number coming in dynamically—and a working email contact form. The page is done…or is it? At the top, over both the church name and contact form is a paragraph of text. Shouldn’t that be dynamic as well?
And most times - the answer is yes, it should be. It’s content and the site is being implemented on a content management system. For this specific chunk of content the answer isn’t quite so clear, however as there is really no home for it. Usually I’ll have a “miscellaneous content” weblog to hold little snippets of content like this - but so far on this site…I haven’t needed one. I really don’t want to implement a whole weblog to hold this one sentence. I could put it in the home page weblog - that would but it feels like a stretch. The client would probably never find it there if they actually wanted to go edit it.
So - here’s my decision. It’s a contact page. Chances are once this text is written it will never change. I’ll leave it as static text in the template and see what happens. If it becomes an issue it can always be moved into a weblog later.
Uh, Isn’t the Site Done?
While this was indeed the last new template to implement I have a few odds and ends to clean up before calling the site complete. After that, though—it’s auction block time!
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Monday, February 16th, 2009
Comment: #2
True - but my focus here is EE implementation rather than the nuances of accessiblity - and I’ll just point out that the page does validate as is.
Date: Monday, February 23rd, 2009
Comment: #3
Great Tutorial!!
Although I feel like the contact form is a simple solution to a very common problem, I prefer the SAEF method with the LogMeIn plugin and changing the notification template for new entries.
Either way I know your focusing on the most common method so keep up the good work!
by Mike Boyink (Author)
Date: Tuesday, February 24th, 2009
Comment: #4
Hey Jason—
While you are right—in this series I’m trying to keep it simple - can you explain some of the benefits of your approach?
And why you might use that approach over the Solspace Freeform module?
Date: Friday, February 27th, 2009
Comment: #5
I feel that using the SAEF method can help create an intuitive workflow for following up with clients, this way when they submit the form it’s sent to the weblog with a default status of “new” or open.
Basically I create an intranet for contact requests so I can add notes and send email directly through the website.
Not to give away any major details but I plan on writing up a whole white page/blog entry about this method soon.
by Mike Boyink (Author)
Date: Friday, February 27th, 2009
Comment: #6
Hey Jason -
That’s definitely a great upsell opportunity around the functionality of the contact form. I just used the LogMeIn plugin today on a client project and it was very straightforward.
I’m looking forward to your writeup!
by Chapman
Date: Friday, May 15th, 2009
Comment: #7
Hi Mike,
I wonder if we can add another extra field, like Phone Number, Street address, etc. using email module. is it possible?
by Mike Boyink (Author)
Date: Saturday, May 16th, 2009
Comment: #8
Yes - per <a hre=“http://expressionengine.com/docs/modules/email/contact_form.html”>the docs</a> you can add fields to the default set.
However it’s not a straightforward approach, so if I need any thing more than the simple contact form shown here I go for the Freeform Module from Solspace.
by therooster
Date: Wednesday, November 11th, 2009
Comment: #9
did the jason every do a write up on the saef method?
by Rakesh
Date: Monday, February 8th, 2010
Comment: #10
Hello Sir,
I m new to EE.What i want is to create a form on my home page in which user will type his name and email address and that data will be stored in sugarCRM DB and a notification mail will be send .Please advice me how can i do that..Thanks in advance..
by Mike Boyink (Author)
Date: Monday, February 8th, 2010
Comment: #11
Since that’s different than what this tutorial is covering the best place to ask that question is in the EE forums.
by fons
Date: Saturday, September 3rd, 2011
Comment: #12
Great tutorial!
But, in addition to send the email, I need to register it’s information in a channel.
Do I need another plugin or module for that?
by Mike Boyink (Author)
Date: Saturday, September 3rd, 2011
Comment: #13
For EE2 you want safecracker - a stand alone entry form.
by Peter
Date: Monday, February 16th, 2009
Comment: #1
Nice writeup.
Just one small remark: in terms of accessibility and a valid XHTML code, instead of using plain divs for the labels, you should use proper <label> tags for labels of input elements and if necessary, wrapping them in divs or even tags.