Mail list Subscribe form tutorial

Gerard Michel Vollet · May 21, 2015

Are there any tutorial to change the Subscribe form?

I am trying to change the design a bit, but I'm having a hard time doing so.

Thanks.

twisted1919 · May 21, 2015

What exactly you want to change, just the css or the html code itself ?

Gerard Michel Vollet · May 21, 2015

I want it too look different in changing the HTML or CSS or both.

I tried to change the style, but it seems it is removed after saving...
I tried to include a css file with no success.
Must be my mistake, I am not an expert in the matter....

I'd like to have it look like this: "Form Style 3"
http://www.sanwebe.com/2014/08/css-html-forms-designs

Thanks.

Michel

twisted1919 · May 21, 2015

If you place a file called style-custom.css in /frontend/assets/css and in it this content:

Code:

.ctrl-lists.act-subscribe form {
    max-width: 450px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.ctrl-lists.act-subscribe form label{
    display:block;
    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{
    width:250px;
    height:100px;
}
.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;
    width:50%;
}
.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{
    color:red;
    font-weight:normal;
}

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 1.3.5.4 and above.

Gerard Michel Vollet · May 22, 2015

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

twisted1919 · May 22, 2015

No idea for this tracking, this seems to be more a Google Analytics thing,

Gerard Michel Vollet · May 22, 2015

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?

twisted1919 · May 22, 2015

i see, mailwizz can't do this for now.

Gerard Michel Vollet · May 23, 2015

OK, never mind. This is a feature request then!

Gerard Michel Vollet · May 28, 2015

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?

Best,

Michel

twisted1919 · May 28, 2015

It's simple.
1. Enable "List form custom assets" from backend -> extend -> extensions
2. put this in a pink.css file:

Code:

.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 > li.active > 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 > li.active > 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;
}

/**Additions**/
.impersonate-sticky-info {
  background-color: #FF0084;
  border:1px solid #fff;
  margin-top:-1px;
}

a, a:hover {
  color: #FF0084;
}

.box.box-primary {
  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;
    color:#ffffff;
}

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.

Gerard Michel Vollet · May 28, 2015

Thank you very much I will try this. I guess I can use the same css file for all 9 pages?

Best,

twisted1919 · May 28, 2015

Yup, you can load any css file you wish, and not just one, how many you need

Gerard Michel Vollet · May 29, 2015

I changed the color values, but I can't find in the css file where to change the message background and the vertical line from blue to pink.

Screen shot 2015-05-29 at 8.42.08 PM.png

Thanks

twisted1919 · May 29, 2015

That is a callout for which this css will work:

Code:

.callout.callout-info {
background-color: #f0f7fd; 
border-color: #d0e3f0;
}

Of course, change the color code with yours.

Gerard Michel Vollet · May 30, 2015

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.

twisted1919 · May 30, 2015

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.
Thanks.

Gerard Michel Vollet · May 30, 2015

You are awesome! Thank you.

Mail list Subscribe form tutorial

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Gerard Michel Vollet

Member

twisted1919

Administrator

Attachments

Gerard Michel Vollet

Member