Mail list Subscribe form tutorial

If you place a file called style-custom.css in /frontend/assets/css and in it this content:
.ctrl-lists.act-subscribe form {
    max-width: 450px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
.ctrl-lists.act-subscribe form label{
    margin-bottom: 10px;
.ctrl-lists.act-subscribe form label > span{
    float: left;
    width: 100px;
    color: #F072A9;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 1px 1px 1px #fff;
.ctrl-lists.act-subscribe form fieldset{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #FFD2D2;
    padding: 20px;
    background: #FFF4F4;
    box-shadow: inset 0px 0px 15px #FFE5E5;
    -moz-box-shadow: inset 0px 0px 15px #FFE5E5;
    -webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
.ctrl-lists.act-subscribe form fieldset legend{
    color: #FFA0C9;
    border-top: 1px solid #FFD2D2;
    border-left: 1px solid #FFD2D2;
    border-right: 1px solid #FFD2D2;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    background: #FFF4F4;
    padding: 0px 8px 3px 8px;
    box-shadow: -0px -1px 2px #F1F1F1;
    -moz-box-shadow:-0px -1px 2px #F1F1F1;
    -webkit-box-shadow:-0px -1px 2px #F1F1F1;
    font-weight: normal;
    font-size: 12px;
.ctrl-lists.act-subscribe form textarea{
.ctrl-lists.act-subscribe form input[type=text],
.ctrl-lists.act-subscribe form input[type=date],
.ctrl-lists.act-subscribe form input[type=datetime],
.ctrl-lists.act-subscribe form input[type=number],
.ctrl-lists.act-subscribe form input[type=search],
.ctrl-lists.act-subscribe form input[type=time],
.ctrl-lists.act-subscribe form input[type=url],
.ctrl-lists.act-subscribe form input[type=email],
.ctrl-lists.act-subscribe form select,
.ctrl-lists.act-subscribe form textarea {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #FFC2DC;
    outline: none;
    color: #F072A9;
    padding: 5px 8px 5px 8px;
    box-shadow: inset 1px 1px 4px #FFD5E7;
    -moz-box-shadow: inset 1px 1px 4px #FFD5E7;
    -webkit-box-shadow: inset 1px 1px 4px #FFD5E7;
    background: #FFEFF6;
.ctrl-lists.act-subscribe form  input[type=submit],
.ctrl-lists.act-subscribe form  input[type=button]{
    background: #EB3B88;
    border: 1px solid #C94A81;
    padding: 5px 15px 5px 15px;
    color: #FFCBE2;
    box-shadow: inset -1px -1px 3px #FF62A7;
    -moz-box-shadow: inset -1px -1px 3px #FF62A7;
    -webkit-box-shadow: inset -1px -1px 3px #FF62A7;
    border-radius: 3px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;   
    font-weight: bold;
.ctrl-lists.act-subscribe form .required{

then you reload the subscribe form you'll see it gets changed.
This will give you a starting point ;)

P.S: This works only in mailwizz and above.
That's a start thank you.

Now, How can I track forms?

The same form is going in the sidebar of my blog, on a specific page and under posts, etc...
What can I do so I see in the stats which one has the most opt-ins?
And from what form each subscriber has subscribed?

Thank you
Not Google Analytics... In GetResponse, for example, I have a ref code "sidebar", "pop-up", "post" for each form and I know which for the subscriber has registered. Any possibility to do that?
I am coming back to this thread... changing the whole form style is something still difficult for me and what I would like to do now is just keeping the same form style but changing the color theme. Now, it is blue and I'd like to have it in pink for just one list.

How can I easily do that?


It's simple.
1. Enable "List form custom assets" from backend -> extend -> extensions
2. put this in a pink.css file:
.skin-blue .navbar .dropdown-menu > li > a {
  color: #444444;

/* skin-pink navbar */
.skin-blue .navbar {
  background-color: #FF0084;
.skin-blue .navbar .nav a {
  color: rgba(255, 255, 255, 0.8);
.skin-blue .navbar .nav > li > a:hover,
.skin-blue .navbar .nav > li > a:active,
.skin-blue .navbar .nav > li > a:focus,
.skin-blue .navbar .nav .open > a,
.skin-blue .navbar .nav .open > a:hover,
.skin-blue .navbar .nav .open > a:focus {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
.skin-blue .navbar .navbar-right > .nav {
  margin-right: 10px;
.skin-blue .navbar .sidebar-toggle .icon-bar {
  background: rgba(255, 255, 255, 0.8);
.skin-blue .navbar .sidebar-toggle:hover .icon-bar {
  background: #f6f6f6 !important;
/* skin-pink logo */
.skin-blue .logo {
  background-color: #FF0084;
  color: #f9f9f9;
.skin-blue .logo > a {
  color: #f9f9f9;
.skin-blue .logo:hover {
  background: #FF0084;
/* skin-pink content header */
.skin-blue .right-side > .content-header {
  background: #fbfbfb;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
/* Skin-blue user panel */
.skin-blue .user-panel > .image > img {
  border: 1px solid #dfdfdf;
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: #555555;
/* skin-pink sidebar */
.skin-blue .sidebar {
  border-bottom: 1px solid #fff;
.skin-blue .sidebar > .sidebar-menu > li {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #dbdbdb;
.skin-blue .sidebar > .sidebar-menu > li:first-of-type {
  border-top: 1px solid #dbdbdb;
.skin-blue .sidebar > .sidebar-menu > li:first-of-type > a {
  border-top: 1px solid #fff;
.skin-blue .sidebar > .sidebar-menu > li > a {
  margin-right: 1px;
.skin-blue .sidebar > .sidebar-menu > li > a:hover,
.skin-blue .sidebar > .sidebar-menu > > a {
  color: #222;
  background: #f9f9f9;
.skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: #f9f9f9;
.skin-blue .left-side {
  background: #f4f4f4;
  -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
  box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
.skin-blue .sidebar a {
  color: #555555;
.skin-blue .sidebar a:hover {
  text-decoration: none;
.skin-blue .treeview-menu > li > a {
  color: #777;
.skin-blue .treeview-menu > > a,
.skin-blue .treeview-menu > li > a:hover {
  color: #111;
.skin-blue .sidebar-form {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #dbdbdb;
  margin: 10px 10px;
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  box-shadow: none;
  background-color: #fafafa;
  border: 1px solid #fafafa;
  height: 35px;
.skin-blue .sidebar-form input[type="text"] {
  color: #666;
  -webkit-border-top-left-radius: 2px !important;
  -webkit-border-top-right-radius: 0 !important;
  -webkit-border-bottom-right-radius: 0 !important;
  -webkit-border-bottom-left-radius: 2px !important;
  -moz-border-radius-topleft: 2px !important;
  -moz-border-radius-topright: 0 !important;
  -moz-border-radius-bottomright: 0 !important;
  -moz-border-radius-bottomleft: 2px !important;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 2px !important;
.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
.skin-blue .sidebar-form .btn {
  color: #999;
  -webkit-border-top-left-radius: 0 !important;
  -webkit-border-top-right-radius: 2px !important;
  -webkit-border-bottom-right-radius: 2px !important;
  -webkit-border-bottom-left-radius: 0 !important;
  -moz-border-radius-topleft: 0 !important;
  -moz-border-radius-topright: 2px !important;
  -moz-border-radius-bottomright: 2px !important;
  -moz-border-radius-bottomleft: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
  border-bottom-left-radius: 0 !important;

.impersonate-sticky-info {
  background-color: #FF0084;
  border:1px solid #fff;

a, a:hover {
  color: #FF0084;
} {
  border-top-color: #FF0084;
.box .box-header {
    border-bottom: 1px solid #FF0084;
.btn.btn-primary {
  background-color: #FF0084;
  border-color: #FF0084;
.btn.btn-primary:hover {
  background-color: #FF0084;
  border-color: #FF0084;
footer {
    padding: 2px 5px 2px 5px;
    background: #FF0084;
Then go to your particular email list, then select Pages box and the Subscribe form. Now you have a field that says Custom Assets. press the add Button and in the input field add the full url to this pink.css file, like in this example:

Then save your form and visit your subscribe form.
That is a callout for which this css will work:
.callout.callout-info {
background-color: #f0f7fd; 
border-color: #d0e3f0;
Of course, change the color code with yours.
Ok this works. Thank you.
There is no Custom Asset showing on the Unsubscribe form and Pending Subscribe pages and they are the only pages I can't change the colors.
Thanks for pointing out. I have corrected this for next version :)
You can either wait for it, or download attached archive , unzip it on your desktop and upload the resulted extension in apps/common/extensions.


    6 KB · Views: 12