Customizing the Contact Form Module - Adding or Changing Fields

The default Contact Form Module for Exponent CMS only has a few fields. In this tutorial, you will learn how to change these fields, or add new fields. You can also customize the layout of the email that you recieve.

First, open the file exponentroot/modules/contactmodule/views/Default.tpl in a text editor. If you cannot edit them directly on the server, first download this file, make your changes, save it again, and upload it. I recommend that you use Filezilla as your FTP client.

In this tutorial, I will add a field for their name.

Find the line:

<tr>
    <td width="10" style="width: 10px" valign="top">Email:</td>
    <td>
        <input type="text" name="email" />
    </td>
</tr>

Above this line, insert this code:

<tr>
    <td width="10" style="width: 10px" valign="top">Name:</td>
    <td>
        <input type="text" name="name" />
    </td>
</tr>
...

On this page you can add any fields you want, change the layout of the form, etc. Just remember what the name="" is for each of the forms--you'll need this for later.

Now, open the file exponentroot/modules/contactmodule/views/_Default.tpl in a text editor. Note the _ character in front of Default.tpl.

Find the code:

MESSAGE:

Email:    {$post.email}
Subject:  {$post.subject}
Message:  {$post.message}

This is what the email will look like. Note, the variable names after $post. are the names of the input fields that are on Default.tpl. So if I want to add a name field, replace that code with this:

MESSAGE:

Name:    {$post.name}
Email:    {$post.email}
Subject:  {$post.subject}
Message:  {$post.message}

That's it! Just change these 2 files to change how the form will look and how the email will look.