How to make a single-row form

[Robb_Barrett]

Looking to have field(s) + submit button all on one horizontal row?

I was recently asked to help restyle a Marketo form to make it a single row, meaning just an email address and a submit button.  This isn't something available out of the box in Marketo and when I searched the community I couldn't find ready made code so I thought I'd share.

This can be done in the landing page editor, but it requires you to code in the form instead of placing it with the form object.

To start, grab an HTML object and place it on the page.

Next, click on the gears and select Edit to open the HTML editor:

Now, go to the form you want to use and select Form Actions > Embed Form

This will open up a box with some code for you to copy and paste:

Go back to your LP editor and paste that into the HTML dialog box.

Next, you'll need to add in some CSS and HTML.

Here's the HTML:

<div id="container">

     <div id="form-pane">

          <form id="mktoForm_24496"></form> CUT AND PASTE THIS LINE FROM THE CODE YOU JUST PASTED IN THE PRIOR STEP

     </div>

     <div id="submit">

         <p> Register Me!</p>

     </div>

</div>

Next, you'll need to add in some CSS above the HTML to do the magic.  Put this under the two script tags

<style>

.mktoButton { 

display: none;

}

#container {

display: flex;

width: 100%;

}

#form-pane {

width: 325px;

}

#submit {

flew-grow: 1;

background-color:Blue;

color: #fff;

height: 30px;

width: 150px;

text-align: center;

cursor: pointer;

}

</style>

The first style hides the native button. Then we create a container that can hold the form the form and your new submit button.  The form-pane needs to be the width of your field + label + space, so add up the the two widths and then factor in a little extra for breathing room, maybe 25px. The Submit code has a background color set for illustration purposes but in reality it doesn't need to if, for example, you want to use an image instead of text. Adjust the width and height as needed to get it perfect.

Finally, you'll need to add in code that will use the submit section to submit the form.  Here's that code, add it under the HTML:

<script>

var btn = document.getElementById("submit");

btn.onclick = function() {

    // When the button is clicked, get the form object and submit it

    MktoForms2.whenReady(function (form) {

        form.submit();

    });

};

</script>

And then you just need to approve and save your page and it's ready to go!

In this example, clicking the button when the email address is empty will still invoke the validation rules

Go forth and be more creative than my example! Show me examples of your use of it in the comments and Like this post if you find it helpful.

[SanfordWhiteman]

Using an embedded form (rather than named form) on a Marketo LP forcibly disables PreFill and also breaks LP statistics... avoid this unless critically necessary.

Don't see why you aren't doing this with a named form. The form's DOM structure is exactly the same.

Also: bind the button click event inside whenReady, not the other way around. Otherwise you'll create an event stack error if there are multiple validation failures.

[Robb_Barrett]

Using an embedded form (rather than named form) on a Marketo LP forcibly disables PreFill and also breaks LP statistics... avoid this unless critically necessary.

Easily fixable with additional code to prefill

Don't see why you aren't doing this with a named form. The form's DOM structure is exactly the same.

Trying to make this simple for people using Marketo forms.

Also: bind the button click event inside whenReady, not the other way around. Otherwise you'll create an event stack error if there are multiple validation failures.

This is just meant to be a very basic explanation. I used the code in the example in the Forms library. Take it up with Marketo's documentation squad.

[SanfordWhiteman]

Their JS code is blatantly broken, doesn't bear repeating. Bad code needs to be exiled.

Using tokens to PreFill (guessing that's what you mean) only works for people who know JS, and doesn't fix the LP statistics.

I'll post back later with a version that works with a named or embedded form...

[SanfordWhiteman]

Hey Robb,

Here's an approach that keeps the standard named forms functionality.

I've dragged a regular named form ("Single Row Form") onto the Free-Form canvas. Then added an HTML element with the CSS + JS:

Here are the <style> and <script> tags in the HTML (would be nice if Jive's blog comments supported syntax highlighting!). I kept your use of flex-box:

<style>
.Single_Row_Form {
  position: relative;
  margin-top: 1em;
}
.Single_Row_Form .formSpan {
  width: 100%;
  display: flex;
}
.Single_Row_Form .formSpan > .mktoButtonRow {
  flex-grow: 1;
}
.Single_Row_Form .formSpan > .mktoButtonRow .mktoButtonWrap {
  margin-left: 4px !important;
}   
.Single_Row_Form .formSpan > .mktoButtonRow .mktoButtonWrap,
.Single_Row_Form .formSpan > .mktoButtonRow button[type="submit"] {
  width: 100%;
  display: inline-block;
}
</style>
<script>
MktoForms2.whenReady(function(form) {
  var formEl = form.getFormElem()[0],
      formContainer = formEl.parentNode,
      submitRow = formEl.querySelector(".mktoButtonRow"),
      submitButton = submitRow.querySelector("button");
  submitButton.addEventListener("click",form.submit)
  formContainer.appendChild(submitRow);
});
</script>

In addition to tracking form submissions at the LP level and keeping automatic PreFill, another thing that works w/this method but doesn't with a separate clickable DIV is the normal label/waiting label logic:

I also wrote up this blog post about the event emitter memory leak that can happen if you bind in the wrong order: http://blog.teknkl.com/beware-the-event-emitter-limit-and-event-binding-order/

[Dave_Roberts]

Hey Robb, thanks for putting this together for the community. It inspired me to take a swing at creating something similar using CSS.

I've posted the a blog here: Restyle a Marketo Form with CSS with a short walkthru & some screenshots. Let me know if something like this might also work in your situation - Im thinking it'll help get around the submission issue by using the Marketo button, but just adjusting the layout to put it where we'd want it to be.

Let me know what you think!

-Dave

[Grégoire_Miche2]

Hi Robb,

Another way to achieve this is to use the framework described here : Better styling of forms : yet another framework

-Greg

[Grégoire_Miche2]

Also, all this would probably not be necessary of this idea was impemented Be able to inject easily CSS classes on Form fields, labels, columns and rows

-Greg