Contact Forms - Email Templates

Here's how to build a contact form and make an email template for it. I'll try to make the Contact Form part of this more descriptive and better laid out soon.

Contact Form

Remember to Shift+Save as you work to avoid mistakes, losing all your work!

A good practice is to have another window open in another monitor to the page you're working on, set to preview that you regularly refresh to see if your edits look right, especially when styling.

  1. Make your Email Template
    Set up your email template (how to below)
  2. Make the Page
    Create the page the form should go on. Skip to the next step if one already exists.
  3. Add a Data Form
    Customize the page and drag a data form onto the page.
  4. Name that Form ID
    Set the ID of the form to a descriptive name, IMPORTANT! Don't be lazy and leave it to the default "PDataForm1". This is a nono. You will use this ID for styling later.
  5. Data Source
    Select your data source. For forms without a custom database, use the Website Contact - ContactForms (WebContact.ContactForms).
  6. Remove that ugly Title field
    Click on Layout, remove the Title field
  7. Build the Fields
    Click on Fields, add your forms fields
  8. Add Validators
    Make sure to fix the validator verbiage to work with the pop up warning, example: "* Required" should be changed to "Name is required"
    Phone Numbers and Email Addresses should always have their format validated, wether or not they are set to required.
  9. Link Submit vs Input Submit
    If you want a good looking submit button, change to a link button. Use this instead of the default input submit. Then style it using a class.
  10. Auto Responders - Admin Notifications
    Set your user Auto Responder and client Admin Notification. If the user doesn't need to be emailed, you can leave that dropdown set to "none", but the admin notification has to be set to something to save the form. Set this to the email template you created.
  11. Popup Validation
    Check the Use popup validation, this is a fast and less ugly option to the red validator errors.
  12. Styling - Form Specific
    Style as needed by using the ID of your form as a prefix for all styles. Example: #RequestForm input, #RequestForm .label etc.
    Don't be lazy! Help everyone avoid style conflicts by always prefixing your styles with the forms ID.
  13. Test
    Set the email template to send to you, and test away!
  14. Save and Commit!
    Once everything is working right, save your form and don't forget to commit!

Email Template

  1. Open a New Email Template
    Go to the Email Templates admin page (Admin, General Settings, Email Templates) and click the Add New Email Template button.
  2. System:
    Set the System to Contact. If you're form isn't sending an email template upon submit, this is the first thing to check!
  3. Email Name:
    Add a name to the template in the Email Name field.
    This is not something that shows on the email that is sent, this is just a friendly name that shows on the email templates admin page.
    Important! Name this friendly and correctly, so that you know exactly what form on the site this email template is meant for. Example: BlahBlah General Hospital has a contact form on the Contact Us/Email Us.aspx page which sends a notification email to both the administrator and the user. The User Email Template is named "General Contact Form - Auto-Responder". The Admin Email Template has is named "General Contact Form - Admin-Notification". This will make sure there is no confusion in the future as at a glance you can see these two are related/both are for the General Contact Form, and by the specific name "General Contact Form" you know that this form is probably on the contact us page, or within that branch, so you can find that form on the page very easily and fast if you need to.
  4. Email From:
    Add where this email is coming from. This is the friendly name that will show on the email that is sent in the To field, instead of an unfriendly email address. This is usually the name of the hospital or the name of the hospital and the department. Example: "BlahBlah General Hospital - Cardiology Department" or "BlahBlah General - Careers"
  5. Email To:
    This is who the email will be sent. Admin Notifications would be set to the contact at the hospital that should receive the emails. Auto-Responders would usually have the {Email} or {Email Address} token, so it will use the email address from the email field the user filled out to know where to send the "thank you for contacting us" etc. message.
  6. Subject:
    This is what will show in the subject line of the email sent.
    IMPORTANT! Make this descriptive and user friendly.
    Auto-Responder Example: "Your Mammogram Appointment Request has been Submitted, Thank You!" or "We have Received your Information" etc.
    Admin-Notification Example: "A new Mammogram Appointment Request has been Submitted"
  7. Email Body-Friendly Description:
    First, put a friendly descriptive line at the top explaining what this information is, similar to the subject, but more explanative, such as "A new Mammogram Appointment Request has been received from the website: {Site:Host}." the sitehost token will display the URL of the site the form was submitted from.
  8. Email Body-Displaying the Info:
    There are two ways you can display the information filled out in the form:
    1. Quick Way:
      Simply put the token {EmailBody} in a Paragraph tag and it will display all the fields and their values, unstyled, in the email.
      The names of each item will be the exact ID you put in for each of your forms fields ID's, so if you do go this route, make sure your ID's are named well and friendly, with spaces, otherwise you just have a pretty unfriendly, ugly email.
    2. Descriptive/Styled way:
      You can wrap every ID from your form with curly braces to make it into a token that displays that fields result. Then, you can style it any way you like. The fastest way to a good looking email template is to put in a simple table with some cellpadding/cellspacing, each row with two cells, the first cell having a friendly name of the information, the second cell having the fields ID token.
      This will display that information well layed out and easy to read, lining up with eachother well.
      To make it even easier to read, bold your names (first cells).
  9. Styling:
    Keep your styling simple. Strong tags, breaks, cellpadding, cellspacing etc. You don't want to use classes pulling from stylesheets as this will not connect when in an email. If you need it to look super sexy, use a photoshop design/images that are embedded in the email.
  10. SMTP Settings:
    Leave to Default
  11. Email CC and Email BCC:
    Just like it sounds, CC and BCC email addresses can go here. Good for troubleshooting for clients who say "i'm not receiving these emails!" for example.
  12. Reply To:
    This is the email address that will be used if the recipient of the email wants to reply. This is useful because e.scorpiondesign.com for example will not accept incoming emails, it is an outgoing mailbox only.
  13. SAVE!
    You're done!