How do I change the format of my email campaign message?

The default layout of our Email Campaign messages is such that the content is centered and the width is quite skinny. The default layout ensures good display on all devices, however you can override these default styles if you wish. 

To override our default styles go to the Campaign Designer and click Edit Message. On the Style & Preview tab check the option to Disable all Alchemer styling and use my own. 

This will remove all styling from the email message including the width, the alignment, and the blue border line. 

After removing Alchemer email styles you can send the message as is or add your own styles. If you choose to send the message as is it will look much like a plain text email (the survey link will be hyperlinked).

Adding your own styles

Once you've removed Alchemer's styles you can add your own. 

To add your own styles go back to the Message tab. We recommend going into the source to add inline styles in the HTML. The source HTML can be accessed via the Source button on the editor toolbar. 

FAQ

I like your styles I just want to get rid of a few things how can I do so?

You can copy or paste one or all of the following code into the source code of your email message to apply some common adjustments to our styles. To do so, go to the Campaign Designer, click Edit Message and click the Source button on the editor toolbar. 

Note: Because the below code examples are intended to customize Alchemer's default email styles, you should not select the option to Disable all Alchemer styling and use my own on the Style & Preview tab if using these codes.

You can paste all of the below code or you can delete any of the blocks that you do not wish to apply. The first line of each block describes what the code does. If you delete a section of code be sure to keep the opening <style type="text/css"> and closing </style> tags in order for your code to work. 

<style type="text/css">

/*Remove top blue border*/
td.target-body {
border:none !important;
}

/*Make the width of the content wider*/
table {
width:600px !important;
}

/*Remove grey background*/
.gets-background-color { 
background-color: #ffffff !important;
}

</style>