20 - The Contact Page

In this chapter we’ll cover the last item in the Portfolio site’s main navigation - the Contact page.

 
Download the EE Code for 20 - The Contact Page

Implementing the contact page will require the following:

  • Installing the Email Module
  • Creating a new template group
  • Integrating site template with EE’s contact form code
  • Updating the form validation javascript to work with EE
  • Updating the site’s header embed
  • Updating the footer snippet

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://mysite.com/index.php/contact 

I’ll be working with the index template in the Contact group. The portfolio template set came with a specific contact template. I copied that in page-comps/contact as a starting point for contact/index.

Integrate Template with EE’s Code
My approach with basic contact forms is to start with the code from the EE docs as a starting point. Yes, there are other form management tools available but why use them if the native tool works?

The task at hand is to merge the EE form code together with the portfolio template such that EE handles the functionality but the correct markup is applied by the HTML and CSS from the template set.

The portfolio template also provides some javascript form validation so we’ll see about integrating that with EE as much as possible as well.

Here then is the updated contact/index template code:

{embed="embeds/header" my_body_class="page" my_active_nav="contact" my_page_title="Contact"}                
<div id="page-content" class="cf">    

<!-- 
Map -->
<
script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true" /></script>
<script type="text/javascript">
function 
initialize() {
var latlng = new google.maps.LatLng(-34.397150.644);
var 
myOptions {
  zoom
8,
  
centerlatlng,
  
mapTypeIdgoogle.maps.MapTypeId.ROADMAP
}
;
var 
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>

<div id="map-holder">
<
div id="map_canvas"></div>
<
div id="map-content">
<
p><h3>LOCATION</h3></p>

<
p>Our offices addresses are:<br />
    
11101 Pretty Street <br />
    
YourtownUSA 44404<br />
</
p>
</
div>
</
div>
<!-- 
ENDS Map -->        

<
p><h3>CONTACT FORM</h3></p>
<
p>Use this contact form to get in touch with us.</p>
<!-- 
form -->
<
script type="text/javascript" src="{site_url}assets/js/form-validation.js"></script>
{exp
:email:contact_form user_recipients="no" recipients="yep@nope.com" charset="utf-8" form_id="contactForm"}
<fieldset>

<
input type="hidden" name="subject" id="subject" size="40" value="Contact Form Submission" />

<
p>
    <
label for="name">Name</label>
    <
input name="name" id="name" type="text" class="form-poshytip" title="Enter your full name" />
</
p>

<
p>
    <
label for="from">Email</label>
    <
input name="from" id="from" type="text" class="form-poshytip" title="Enter your email address" />
</
p>

<
p>
    <
label for="message">Message</label>
    <
textarea  name="message"  id="message" rows="5" cols="20" class="form-poshytip" title="Enter your comments"></textarea>
</
p>

<
p><input type="submit" value="Send" name="submit" id="submit" /> </p>
</
fieldset>
{/exp:email:contact_form}        
</div><!-- ENDS page content-->

{snp_footer} 

A few thoughts on this code:

  • Yea, the paragraph tags around the h3 tags bug me too.
  • 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.
  • Specifying form_id=“contactForm” as a parameter is what connects the rendered EE form to the CSS that came with the portfolio template.
  • I chose to hard-code the subject with a hidden field.
  • Working locally while writing this I don’t actually have a working mail processor, but did paste the essentials of the form into another site just to ensure the email was generated.

Hooking up the Link
With the form in place you can now update embeds/header to get the main navigation working. The new code is:

<li{if embed:my_active_nav=="contact"class="current-menu-item"{/if}><a href="{path='contact/index'}">CONTACT</a></li

Updating the Javascript
I won’t profess to be any sort of javascript whiz - but I was able to figure out how to modify the included form validation script to handle our form fields. This way a user will get error messages on the form, rather than on an error page after submitting. I wasn’t able to use the portfolio javascript/ajax success message however.

Here is the updated javascript:

jQuery(document).ready(function($){

    
// hide messages 
    
$("#error").hide();
    $(
"#sent-form-msg").hide();
    
    
// on submit...
    
$("#contactForm #submit").click(function() {
        
$("#error").hide();
        
        
//required:
        
        //name
        
var name = $("input#name").val();
        if(
name == ""){
            
$("#error").fadeIn().text("Name required.");
            $(
"input#name").focus();
            return 
false;
        
}
        
        
// from
        
var from = $("input#from").val();
        if(
from == ""){
            
$("#error").fadeIn().text("Email required");
            $(
"input#from").focus();
            return 
false;
        
}
        
        
// message
        
var message = $("textarea#message").val();
        if(
message == ""){
            
$("#error").fadeIn().text("Message required");
            $(
"textarea#message").focus();
            return 
false;
        
}


        
// message
        
var message = $("#message").val();
        
        
// send mail php
        
var sendMailUrl = $("#sendMailUrl").val();
        
        
//to, from & subject
        
var to = $("#to").val();
        var 
from = $("#from").val();
        var 
subject = $("#subject").val();
        
        
// data string
        
var dataString 'name='name
                        
'&from=' from
                        
'&message=' message
                        
'&to=' to
                        
'&from=' from
                        
'&subject=' subject;                                 
        
// ajax
        
$.ajax({
            type
:"POST",
            
urlsendMailUrl,
            
datadataString,
            
successsuccess()
        
});
    
});  
        
        
    
// on success...
     
function success(){
         
$("#sent-form-msg").fadeIn();
         $(
"#contactForm").fadeOut();
     
}
    
    
return false;
}); 

With that javascript updated my form validates the 3 fields with in-line messages, submits successfully and returns an EE success message. Cool.

Updating the footer Snippet
While busy with the contact form at some point I noticed that the Google map had stopped loading (or never had from the moment I created the new contact template). It took a few minutes of debugging to find that on the original Contact HTML there was a javascript statement in the footer. I updated my snp_footer snippet to include the following:

<!-- ENDS FOOTER -->
        
{if segment_1=="contact"}
            
<!-- Start google map -->
            <
script>initialize();</script>
        {
/if}
    
</body>
</
html


That got my map loading again. The conditional segment ensures it only gets loaded on the contact page.

As usual, all affected files are zipped up and attached in the Companion Files with this chapter.

Up next - getting the site’s footer all hooked up.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>