10CentMail Wordpress Plugin

Summary

With 1 in every 4 new websites being built using, Wordpress, we decided to build our core subscription management system to work directly from it's dashboard. When you install our Wordpress plugin, you have instant access to display a sign up forms with a snippet of short code. With this in place, you also have the communication needed to customize the subscribe and unsubscribe process as well as facilitate open and click tracking.

Installation

Shortcode

The 10CentMail plugin leverages the wordpress shortcode api

To render a 10CentMail subscribe form just place the following shortcode into any Wordpress page.

[tencentmail_subscribe_form list="List Name"]

The shortcode accepts the following parameters :

field value label
list true/false NA * use the name of your 10CentMail Contact List
first_name true/false First Name
last_name true/false Last Name
full_name true/false Full Name
custom_field true/false * Defined by custom_label
custom_label the label text to represent your custom field. ex Age, Location, etc

Email Address is a requirement in gathering subscriptions thus is rendered without having to set within shortcode definition.

Form Customization

You will need to have a basic understanding of html & css to continue following this guide.

The subscription form is surrounded in a parent div with an id of tencentmail_subscribe_form which you can key off of to style the rendered form

Each field definition will render the following html structure

	<p>
	 <label>Full Name</label>
	 <input type="text" name="full_name" value=""/>
	</p>

The submit is wrapped in a paragraph with a class name of tencentmail_submit_wrapper

	<p class="tencentmail_submit_wrapper">
	<input type="submit" value="Submit"/>
	</p>

CSS allows for many ways of customizing html elements. In the following example we will customize the rendered form, adding a border, some padding, horizontal align the labels and inputs as well as create a custom submit button style

[tencentmail_subscribe_form list="List Name" full_name="true"]

Custom styles

	<style type="text/css">
	
	 #tencentmail_subscribe_form{
	   padding:20px;
	   background:#f8f8f8;
	   border:solid 1px #ddd;
	 }
	 
	 #tencentmail_subscribe_form label{
	   width:150px;
	   margin-right:10px;
	   text-align:right;
	   display:inline-block;
	 }
	 
	 #tencentmail_subscribe_form input[type="text"]{
	   display:inline-block;
	 }
	 
	 .tencentmail_submit_wrapper{
	   width:315px;
	   text-align:right;
	 }
	 
	 #tencentmail_subscribe_form input[type="submit"]{
	   color: white;
	   padding: 4px;
	   margin: 0 0 2px;
	   font-size: 12px;
	   cursor:pointer;
	   cursor:hand;
	   outline: medium none;
	   vertical-align: bottom;
	   background: #09BF58;
	   border: 1px solid #098A45;
	   border-radius: 3px;
	   text-shadow: 0 1px 1px #034E26;
	 }
	 
	</style>

Before

After

FAQ