I just read Robb Barrett's blog in the Champions Program How to make a single-row form and got inspired to take a crack at trying to accomplish something similar (and simple) using only CSS. One of the advantages of using a CSS-only solution is that it gets you away from situations where you're altering the functionality of a form for the sake of its style, and for my money, I'll take function over form (style) when it comes to important pieces like lead gates.

 

I've included a few screenshots below to show the mobile and mobile+ styles for this form. The input box in the middle stretches with the container - ideally this would be placed into some parent container on your template to control its width. The mobile-only styles force the elements to display as full-width blocks so they'll stack up for us. Above mobile (480px+) the elements are displayed as tables and table-cells (...so bad, they're good ) to keep the alignment and spacing in better order. Since this form only uses a single field, there is only one .mktoFieldWrap which holds both the label and input fields. This .mktoFieldWrap acts as a "column" when we turn it into a table. Inside that, we display the input and label as table-cells.

 

On the other side, we've got the button. The form is also setup to display as a table, so we're able to turn the .mktoButtonRow into a table-cell and align that vertically with the input and label. Like the label, you can control the width of the button and "squeeze" the center "column". So that leaves two things to set if you change the label or the button (text) - you'll want to adjust the width of the label (width:120px !important; /* adjust the label's width */) and the with of the button (width: 90px !important; /* adjust button width */).

 

I've brought in overrides for the button styles to try and make life a little easier.

The button can be restyled by changing the color, border, padding, font-size, background (for gradients), background-color, margins and width. You'll find those in the CSS below under /* override button styles */

 

Screenshot_012618_045740_AM.jpgScreenshot_012618_045835_AM.jpg

 

.mktoOffset, .mktoGutter {

display: none;

/* hide these elements */

}

.mktoForm input, .mktoForm button {

min-height: 30px !important;

/* resize elments to the same height */

}

.mktoForm label {

/* edit the label styles here (for all screens) */

font-size: 15px !important;

line-height: 20px !important;

}

/* FORM COLUMNS */

 

 

.mktoFormCol {

margin-bottom: 0px !important;

}

/* BUTTON STYLES */

 

 

.mktoButtonWrap {

margin-left: 0px !important;

/* eliminate default mkto margin-left */

}

/* override button styles */

 

 

.mktoForm button.mktoButton {

color: white !important;

border: none !important;

padding: 4px 20px !important;

font-size: 14px !important;

background: none !important;

background-color: #babf33 !important;

margin-left: 20px !important;

/* add spacing left */

margin-right: 20px !important;

/* add spacing right */

min-width: 180px !important;

/* adjust button min-width */

}

/* swap button colors on hover */

 

 

.mktoForm button.mktoButton:hover {

background-color: white !important;

color: #babf33 !important;

}

@media screen and (max-width:480px) {

.mktoForm input, .mktoForm label, .mktoFormRow, .mktoButtonRow {

width: 100% !important;

display: block !important;

text-align: center !important;

}

.mktoFormCol {

margin-top: 10px;

margin-bottom: 10px !important;

}

}

@media screen and (min-width:480px) {

/* Global Styles (many elements) */

form.mktoForm, .mktoFormRow, .mktoFormCol, .mktoFieldWrap, .mktoForm input {

width: 100% !important;

/* make these element full-width and responsive to their parent container */

}

/* display these elements as a table */

form.mktoForm, .mktoFieldWrap {

display: table !important;

}

/* display these elements as a table-cell */

.mktoFormRow, .mktoButtonRow, .mktoForm label, .mktoForm input {

display: table-cell !important;

/* for horizontal size & position inside 'table' (form) */

vertical-align: middle !important;

/* align content to vertical-middle */

float: none !important;

}

/* label */

.mktoForm label {

text-align: right;

padding-right: 10px;

width: 120px !important;

/* <<< adjust the label's width */

}

/* input */

.mktoForm input {

margin: 10px 0px !important;

/* spacing above/below input */

}

}

 

To add this to a form, spin up a new form in Marketo and add an email field to a new form. On the next page (2) you'll want to edit the Custom CSS of your form and make sure you're using the "Simple" form option (1 of 7). Simply, copy/paste the CSS above into the "Edit Custom CSS" pop-up editor, Save and then click the "Preview Draft" to see it live.

 

Screenshot_012618_011543_AM.jpg

 

Hope this is helpful (and simple) enough to help someone out along the way. Let me know how it's working (or not working) for you, it'd be awesome to see what other ideas this brings up. Thanks again for the inspiration here Robb. I've been itching to tackle Marketo Form Styles for a while now, I'd also love to see/hear about other form setups that are commonly requested but tricky to accomplish.

 

High Five!

-Dave