Marketo - Subcription Form Button Single Line CSS
Marketo Portal is a great resource to collect information on how to build out most custom campaign elements. However, sometimes it's not all too clear on how to get some things done. I found this to me the case early on in my career when I tried to build something as basic as a single line subscription form for my clients website. So I've walked through the process of how to get it done.
Editing the Form
1.) Login into Marketo
2.) Navigate to the actual form that you created.
3.) Make sure that the form was from the 2.0 release (Came out in late 2014).
4.) Once you arrive at the Wysiwyg editor navigate to the left of the screen and select Option 2 - Form Theme.
5.) Make sure you have the Theme set as Simple (Modified with custom CSS).
6.) Now click on gear icon towards the top-right of the screen and choose to "Edit Customer CSS"
7.) Once this has been complete, enter the code listed below.
8.) Approve Form, and Landing Page (You are all set!)
CSS Code
/* remove width constraint to allow for float */
.mktoForm {
width: auto !important
}
/* remove left margin */
.mktoForm span {
margin-left: 8px !important;
}
/* align row */
.mktoFormRow {
float: left !important;
}
/* remove bottom margin */
.mktoFormCol {
margin-bottom: 8px !important;
}
/* remove offset */
.mktoOffset {
width: auto !important;
}
/* remove gutter margin */
.mktoGutter {
width:0px !important;
}
/* button style */
.mktoButton {
height: 42px !important;
width: 140px !important;
}
.mktoForm input[type=email] {
height:42px !important;
width:370px !important;
}
/* --- Reset (minified) --- */
/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
/* line 4, styles/_reset.scss */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* line 4, styles/_reset.scss */
body {
line-height: 1;
}
/* line 4, styles/_reset.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* line 4, styles/_reset.scss */
nav ul {
list-style: none;
}
/* line 4, styles/_reset.scss */
blockquote, q {
quotes: none;
}
/* line 4, styles/_reset.scss */
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
/* line 4, styles/_reset.scss */
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* line 4, styles/_reset.scss */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* line 4, styles/_reset.scss */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
/* line 4, styles/_reset.scss */
del {
text-decoration: line-through;
}
/* line 4, styles/_reset.scss */
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
/* line 4, styles/_reset.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 4, styles/_reset.scss */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/* line 4, styles/_reset.scss */
input, select {
vertical-align: middle;
}
/* line 5, styles/_reset.scss */
a {
color: inherit;
text-decoration: none;
}
/* line 6, styles/_reset.scss */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 7, styles/_reset.scss */
em {
font-weight: bold;
font-style: none;
}
/* line 8, styles/_reset.scss */
.divider ol li {
margin-left: 30px;
}
/* line 9, styles/_reset.scss */
ul li {
margin-left: 20px;
}
/* line 2, styles/ui_patterns/_buttons.scss */
.button,
.buttonC {
background-color: #00c6d4;
border: 1px solid #00afbb;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
margin-bottom: 70px;
margin-top: 40px;
padding: 18px 24px;
}
/* line 17, styles/ui_patterns/_buttons.scss */
.button:hover,
.buttonC:hover {
background-color: #0ad9e8;
text-decoration: none;
}
@media (max-width: 667px) {
/* line 2, styles/ui_patterns/_buttons.scss */
.button,
.buttonC {
width: 100%;
}
}
/* line 27, styles/ui_patterns/_buttons.scss */
.button.alt {
background-color: #dcf6f8;
border: 1px solid #00c6d4;
color: #00b7c4;
}
/* line 31, styles/ui_patterns/_buttons.scss */
.button.alt:hover {
background-color: #f1fcfd;
}
/* line 37, styles/ui_patterns/_buttons.scss */
.button.small {
margin: 0;
padding: 10px 15px;
width: auto;
}
/* line 44, styles/ui_patterns/_buttons.scss */
.buttonC {
background-color: #dcf6f8;
border: 0;
color: #00B7C4;
clear: both;
display: block;
font-size: 14px;
margin: auto;
padding-bottom: 10px;
padding-top: 10px;
width: 386px;
}
/* line 55, styles/ui_patterns/_buttons.scss */
.buttonC:hover {
color: #fff;
}
/* line 2, styles/ui_patterns/_forms.scss */
input[type="email"],
input[type="text"] {
border: 1px solid #e0ded9;
background-color: #fff;
border-radius: 3px;
color: #a8a5a1;
font-size: 16px;
margin-bottom: 27px;
padding: 20px 12px;
width: 100%;
}
/* line 13, styles/ui_patterns/_forms.scss */
label {
color: #393939;
display: block;
margin-bottom: 10px;
text-align: left;
}
/* line 19, styles/ui_patterns/_forms.scss */
button {
cursor: pointer;
}
/* line 23, styles/ui_patterns/_forms.scss */
form .button {
display: block;
margin: 16px auto 10px auto;
}
/* line 27, styles/ui_patterns/_forms.scss */
form .col {
padding: 0;
}
/* line 29, styles/ui_patterns/_forms.scss */
form .col.col1 {
padding-right: 10px;
}
@media (max-width: 1024px) {
/* line 29, styles/ui_patterns/_forms.scss */
form .col.col1 {
padding: 0;
}
}
/* line 35, styles/ui_patterns/_forms.scss */
form .col.col2 {
padding-left: 10px;
}
@media (max-width: 1024px) {
/* line 35, styles/ui_patterns/_forms.scss */
form .col.col2 {
padding: 0;
}
}
/* line 43, styles/ui_patterns/_forms.scss */
.formHeader {
display: table;
margin-bottom: 16px;
table-layout: fixed;
width: 100%;
}
@media (max-width: 1024px) {
/* line 43, styles/ui_patterns/_forms.scss */
.formHeader {
text-align: left;
}
}
/* line 51, styles/ui_patterns/_forms.scss */
.formHeader span {
color: #ff8617;
font-size: 30px;
display: table-cell;
vertical-align: middle;
width: 50%;
}
/* line 57, styles/ui_patterns/_forms.scss */
.formHeader span:last-child {
width: 120px;
}
/* line 62, styles/ui_patterns/_forms.scss */
.formHeader img {
float: right;
}
/* line 9, styles/iframes.scss */
input[type="email"],
input[type="text"] {
padding-bottom: 18px!important;
padding-top: 18px!important;
width: 100%!important;
}
/* line 15, styles/iframes.scss */
#innerWrapDiv {
width: 100%!important;
}
/* line 19, styles/iframes.scss */
#lpeCDiv_8257 {
bottom: auto;
left: auto!important;
margin: auto;
position: relative!important;
right: auto;
top: auto!important;
width: 486px!important;
}
/* line 29, styles/iframes.scss */
.mktoAsterix {
display: none;
}
/* line 30, styles/iframes.scss */
.mktoLabel {
display: none;
}
/* line 31, styles/iframes.scss */
.mktoButtonWrap.mktoPurpleCandy {
position: absolute;
right: 0;
top: 0;
}
/* line 36, styles/iframes.scss */
body {
overflow: hidden;
}
/* line 39, styles/iframes.scss */
body div.mktoButtonRow {
position: static!important;
}
/* line 42, styles/iframes.scss */
body .mktoForm .mktoButtonWrap.mktoPurpleCandy .mktoButton {
background-color: #00c6d4;
border: 1px solid #00afbb;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 70px;
margin-top: 0;
padding: 18px 12px;
text-align: center;
text-transform: uppercase;
text-shadow: none;
}
/* line 58, styles/iframes.scss */
body .mktoForm .mktoButtonWrap.mktoPurpleCandy .mktoButton:hover {
background-color: #0ad9e8;
background-image: none;
text-decoration: none;
}
/* line 65, styles/iframes.scss */
.mktoForm {
width: 320px!important;
}
/* line 70, styles/iframes.scss */
#lpeCDiv_8260 {
background-color: #f4e96d;
left: auto!important;
position: relative!important;
top: auto!important;
width: 100%!important;
}
/* line 77, styles/iframes.scss */
.logoc {
display: none;
}
Comments
Post a Comment