How to Create a Custom Auto Responder Letter

Quotit's Auto Responder features many templates for standard, holiday and birthday uses.  However, customer's may want specialized layouts that target a specific website design or marketing campaign.  Below is a step-by-step process in creating a very basic layout change to one of our Auto Responder template.  Basic HTML and CSS will be utilized in this tutorial - we recommend reading and/or taking an introductory class in HTML and CSS to go even further in creating a custom layout for your agency.

Please note Auto Responder is an upgrade, to purchase please call Customer Service at 866-478-6848 option 1.

Step 1
Log into your iPro Account (Quotit.net).


Step 2

Click on Settings on the top menu bar.


Step 3

On the left side of the screen, under Letter Wizard, click on Manage Letters.


Step 4

Select your domain (if you have multiple websites with Quotit) and select Create New Letter on the Saved Letters drop down.


Step 5

Select the template you wish to edit, for this tutorial, we'll choose Commerce 2.


Step 6

Create a Letter Name and Subject line for your Auto Responder.


Step 7

Under the HTML Editor, click on the HTML button located on the bottom left of the frame. This will allow you to see the actual code for the entire letter.  Auto Responder HTML code must be written in-line with the element you wish to edit.  Meaning that you must write small HTML codes to edit the text, image or create a new layout entirely.  You cannot reference external classes from external Javascript or CSS files.


For this tutorial we'll change the background color of the Auto Responder and center the letter so that it stays in the middle of the email.

To do this, we've added a DIV element along with an in-line CSS style that shows #000 which is the color code for black. 
<div style="background: #000;">
Additionally you can write "black" within this area as shown below.
<div style="background: black;">
Now, to center the letter within the window, we'll need to add a center tag after the DIV element.
<div sytle="background: #000;"><center>
All that is required is to add the close tags to the HTML we've added.  To do this, you will need to add the code at the very bottom of the Auto Responder code.  The reason for this is because we've added the code at the very beginning of the Auto Responder code, so we must follow placement rules for closing the code.

Add the closing HTML codes:
</center></div>
Make sure to add the closing center tag first before the closing DIV tag.  We close all HTML tags with a forward slash /.

Step 8
Lets review our changes by clicking on the Design button located on the bottom left.  As you can see, the changes have taken place, our background is now black and centered.  These changes will be viewable when the customer receives the Auto Responder letter.



Step 9

Finally, click on the orange Save Letter button.  You now have a custom a Auto Responder Letter within your account.  The possibilities of creating custom letters are virtually endless.  To create more elaborate designs you will need to learn HTML and CSS.

Note: we do not teach/train HTML/CSS basics or create custom Auto Responder letters.

Feedback and Knowledge Base