In every AspDotNetStorefront site, there is a contact form page that visitors can use to send you a message.

This is set up as a topic, and you can find it by going to www.yourdomain.com/t-contact.aspx.

This page can be modified through the HTML editor just like any other topic by going to Content > Manage Topics in version 8.0 or Misc > Topics in earlier versions.

Here, you can make any changes you like to the layout of the page, but what about modifying the actual email you get in your inbox when the contact form is submitted?

Unfortunately, there’s no HTML editor for that. Luckily, we found a great feature built right into AspDotNetStorefront that allows you to customize the contact form! Without this feature, you’ll still get your contact form results in your inbox, but using this feature will allow you to change the way it’s displayed.

This is especially useful for quoting the original message in an email response to the visitor, but if you don’t want those extra strange form tags to show up. What’s a ‘B1′? Who knows…let’s get rid of it!

This tutorial will show you how to turn this:

Name=Nicole Swan
Phone=541-201-9965
EMail=nicole@vortx.com
Subject=Contact Form Submit Test
S1=This is a test message submitted from the Contact Us page.
B1=Submit

into this:

Name: Nicole Swan
Phone Number: 541-201-9965
Email: nicole@vortx.com
Subject: Contact Form Submit Test
Message: This is a test message submitted from the Contact Us page.

This tutorial requires a basic knowledge of HTML and XML Packages. If you know a little HTML but you’re not familiar with XML Packages, read on! This tutorial will help you get to know them.

So, what’s an XML Package? Your AspDotNetStorefront site uses XML Packages for a variety of functions that you would not be able to live without. Your category and product pages need them to display content, your search function uses it to display results, your news, minicart, & customer receipts all depend on them as well.

With this tutorial, you will use an XML Package to control the form results sent from your contact page.

1. Log in to your admin site, and head over to the AppConfig Parameters. This is located in the Configuration > Advanced menu in AspDotNetStorefront 8.0 or in the Misc menu in earlier versions.
2. In the top left, under the “Add New” heading, you’ll see two fields for “Config Name” and “Config Value”, followed by a drop-down box.
3. In the Config Namefield, type in ‘SendForm.XmlPackage’.
4. In the Config value field, type in ‘notification.contactform.xml.config’
5. In the drop-down menu, select XMLPACKAGE

Now, you should have a brand new AppConfig Parameter called SendForm.XmlPackage with a value set to notification.contactform.xml.config. This means your AspDotNetStorefront site will now look for the XML Package ‘notification.contactform.xml.config’ and use that to control the layout of the form results. So let’s go create that XML Package!

1. Open the XML Packages folder in the root of your site.
2. Open the notification.newmemberwelcome.xml.config file in your favorite text editor*.
3. Save this file as ‘notification.contactform.xml.config’ in the XML Packages directory.

Now all we have to do is edit the file to display the results from the contact form, and not the new member welcome message. Let’s start at the top.

If your text editor shows line numbers, you’ll find displayname=”Welcome Email” on line number 2. Change “Welcome Email” to something a bit more accurate, like “Contact Inquiry Form.” The rest of the information on line 2 can stay the same.

Now go down to line 19. This is the template. This is the actual content that will be displayed in the email. Since we don’t want the new member welcome email to be sent out, let’s delete everything in between the <xsl:template match=”/”> and </xsl:template> tags.

Your XML Package should now look something like this:

Now, we just need to put the form contents in between the <xsl:template match=”/”> and </xsl:template> tags. First let’s lay the groundwork. On the contact page, you have 5 fields to display:

• Name
• Phone Number
• Email
• Subject
• Message

So in the template in the XML Package, list those fields, and leave some space for the results to follow. This should look something like this:

For every form field in the contact page, we want to display the results in the email. Each form field has several attributes, one of which is “name”. If you view the source of your t-contact.aspx page, you can find the ‘name’ attribute for each form tag. This is what we’ll need to display the results of the form.

Below, I’ve listed the form fields and their corresponding ‘name’ attributes as they are in the out of the box contact form.

Name – ‘name’
Phone Number – ‘phone’
Email – ‘email’
Subject – ’subject’
Message – ’s1′

As you can see, the AspDotNetStorefront programmers made it pretty easy for us to figure out what is what. Now in the XML Package, let’s add these values. We’ll do this with the value-of element in XSLT.

<b>Name:</b> <xsl:value-of select="/root/Form/name" />
<br />
<b>Phone Number:</b> <xsl:value-of select="/root/Form/phone" />
<br />
<b>Email Address:</b> <xsl:value-of select="/root/Form/email" />
<br />
<b>Subject:</b> <xsl:value-of select="/root/Form/subject" />
<br />
<b>Message:</b> <xsl:value-of select="/root/Form/s1" />

Now save your document and test it out! You can easily apply further modifications, just treat the <xsl:template> area of the XML Package like an HTML page. You can add HTML tags, & CSS styles to every element displayed. If you’d like to add your company logo at the bottom of the message, or a special coupon code for visitors sending inquiries, just add the text or image content wherever you’d like it to appear.

You can also add and remove form elements on the contact page, and display them on the page, just make sure your form fields each contain a unique ‘name’ attribute, and apply that with the value-of element in your Xml Package.

*All custom development of AspDotNetstorefront by Vortx is done with Microsoft Visual Studio. You can download the express edition here. You can also use any text editor such as notepad or wordpad, which both come with the Windows operating system. You can also use Notepad++ or Textpad, which are lightweight versions of Visual Studio, but heavyweight versions of notepad.

Tags: AspDotNetStoreFront, Contact Emails, XML

This entry was posted on Tuesday, January 13th, 2009 at 9:27 am and is filed under AspDotNetStoreFront, Coder's Corner, Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.