Creating a Custom Contact Page for Your Website

Custom Contact Us Page

We’ve all heard it before: the key to a successful relationship is communication. This is especially true for the relationship between you and your customers. Luckily, your Volusion store comes with a built-in, customizable contact form that makes open communication a breeze!

Editing Your Contact Form Article

To get started, log in to your Admin Area and navigate to Design > Site Content. Scroll all the way to the bottom of the page and click on article ID 83.  You’ll want to duplicate the original article instead of editing it directly, in case you need to reference the default code in the future. To duplicate the article, click Add at the top of the page. When asked, “Would you like to pre-fill fields based on 83?”, select Sure.

You can change the field names that display on your contact form by modifying the article’s HTML code. While the HTML view may seem daunting, it’s actually quite simple to edit.  The image below shows the default HTML values alongside a customized contact form. Each value is color coded to show you where customized text would appear on the storefront. For example, the default field “Sample Text Field 1:” in the Admin Area code will display where “First Name:” appears in the Storefront Display view. If you want your first field name to be “First Name:”, you’d delete “Sample Field Text1” and replace it with “First Name:” (be sure to include the colon!).

Sample Text Fields

The first “Sample Text Field1” in the code corresponds to the public view of the field name. You’ll also see “Sample Text Field1” repeated a second time in that same row of text as part of the “input” value; this name represents what you’ll see when you receive a form submission via email. In order to avoid confusion, we recommend updating the code so that the field name has the same value in both places. Otherwise, you may see a submission that says “Sample Text Field1: John” instead of “First Name: John”!

When modifying the “Sample DropDown1” value, be sure to edit the text for the dropdown options customers will be able to select from (e.g. “Choice 1”). After you’ve edited your sample form, the HTML view should look like something similar to the screenshot below:

html example

In the course of editing your form, you may decide that you need additional textbox fields or dropdown selections. For example, many merchants want to add a field where their customers can insert an Order ID. To do so, simply duplicate the code that creates textbox input fields and modify it accordingly. Using the above example, the HTML should be updated as follows:

First Name: <input type="text" name="First Name" value=""><BR>
Last Name: <input type="text" name="Last Name" value=""><BR>
Email Address: <input type="text" name="Email Address" value=""><BR>
Order ID: <input type=”text” name=”Order ID” value=””><BR>

You’ll also need to specify the email address where you want to receive contact form submissions. To do so, edit these two lines of code near the bottom of the form:

<input type="hidden" name="email_From" 
value="anything@yourcompany.com">
<input type="hidden" name="email_To" value="anything@yourcompany.com">

Replace “anything@yourcompany.com” with your preferred email address on both lines.

You may also want to change the message that appears after customers send their form submissions. This message can say something more personal or specific to your store, such as “Thank you for contacting Volusion Boutique!” To update this text, replace “Thank you for submitting your request” with the text you prefer:

<input type="hidden" name="email_ThankYou" value="Thank you for 
submitting your request.">

Make sure to save those changes – and then you’re done editing the contact form!  For more details about contact form editing, check out our Knowledge Base article.

Keep in mind that your Contact page can include more than just a form for submitting questions. Additional information about your store may be even more helpful to customers. You can include details such as your store’s location, a contact phone number, and your hours of support or operation.

Since you’ll need to add this information in the article’s HTML code view, be sure to add <BR> wherever you want to start a new line of code. This “break” tag is the HTML code for a non-breaking space. It causes any subsequent text to appear one line below the preceding text, similar to hitting “Enter” to start a new paragraph.

If you’d like to include a few lines of information above your form, add code as shown in the screenshot below. Once you save your changes, you’ll be able to see the updates on your storefront:

Extra fields

Linking to Your Contact Page

We’ve tackled the HTML editing portion of your contact form, but how will customers access the page? A contact form is only helpful if it can be easily located. There are a few options for making this page accessible to your customers, the first being a link from your main navigation menu. To add this link, you’ll create a category that appears in your store’s navigation menu—we suggest naming it “Contact” or “Contact Us”—and add a redirect that causes the category to link directly to your contact form article. For detailed instructions, see this Knowledge Base article.

Can’t get enough of that HTML editing? Another popular place to link to this form is in the footer section of your website. Every Volusion template has a built-in hyperlink in the footer that reads “Contact Us”. By default, clicking on this link prompts a new email pop-up window. You’ll want to replace this link with the URL for the contact form you just created. To do so, navigate to Design > File Editor in your Admin Area and select Template_XXX.html from the Shortcuts menu on the right. Next, locate the following line of code:

<li><a href="mailto:Config_EmailAddress_From?Subject=Contact%20Us" 
title="Contact Config_CompanyNameLegal">Contact Us</a></li>

(Pro Tip: To quickly locate this line of code, hold down the ‘CTRL’ and ‘F’ keys simultaneously, then type “Contact Us” in the search field that appears.) Replace the text between the first set of quotation marks with the URL of your contact form, and then remove the following text:

title="Contact Config_CompanyNameLegal"

It will appear like this when finished:

<li><a href="/Articles.asp?ID=267">Contact Us</a></li>

Note that the above code uses a “relative URL”, which only includes the portion of the URL after your domain name. As long as you’re linking from one page to another within the same website, you don’t need to type out the full URL. Also, if you’re using a Responsive template, keep in mind that there may be two locations for the “Contact Us” link code within the Template_XXX.html, so be sure to follow the above steps for both locations.

Don’t have the time to create a contact form yourself? No problem! We’ve got you covered. The Volusion design team can build you a beautiful contact form that matches the look and feel of your brand. For more information, see our Design Services page.

Leave a Reply