Here are directions for changing a one column form into a multi-column form.
Set up your form
To create a two column form, first you need to make some changes to the form that you're using. First, you need to reorder your form fields. The (visible) fields get divided into two columns by odds and evens -- odds in the first column and evens in the second column.
If you want to arrange your fields like this:
| First Name | Company Name |
| Last Name | Phone Number |
| Email Address |
Then you need to order your form like this:
| First Name |
| Company Name |
| Last Name |
| Phone Number |
| Email Address |
Please ensure that you have access to an experienced JavaScript developer. Marketo Technical Support is not set up to assist with troubleshooting JavaScript.Also while you're on the form, note the values for Label Width, Field Width, and Gutter Width in the Form Properties:
Set up your landing page
On your landing page, add the form to that page (if you haven't added it already). Make sure you leave enough space on the page so that the form looks correct once it's laid out in two columns. The two column form will take half the height and twice the width of the single column form.
Next, drag in a Custom HTML box and add the following code. It does two things: rearranges your form into two columns and (via Javascript) corrects the tab order of the form fields.
In the code below, you need to change the column width and form width to match your form. You'll need the Label Width, Field Width, and Gutter Width from your form which you wrote down earlier:
- Column width (300px below) must be at least (Label Width + Field Width + Gutter Width + 46)
- Form width (700px below) must be at least (2 * Column width)
<style type='text/css'>
form.lpeRegForm li.mktField {
float: left;
width:300px;
clear: none;
height: 26px;
}
form.lpeRegForm ul {
width:700px;
}
#mktFrmButtons {
clear: both;
}
</style>
Moving the error messages
Depending on how you set up your form, the error messages that appear on each field may be in the wrong position. Use this CSS to move the error messages below the field. You may need to tweak the left or top amounts until it appears correct on your form.
<style type="text/css">
span.mktFormMsg
{
left: 0px !important;
top: 15px !important;
}
</style>
Changing the tab order
For a vertical tab order (as opposed to horizontal), add this javascript in that same Custom HTML block:
<script src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQ = jQuery.noConflict();
$jQ(document).ready(function() {
// fix the tab order
$jQ('.mktInput :input').each(function(i) {
if (i % 2) {
$jQ(this).attr('tabIndex',30000+i);
} else {
$jQ(this).attr('tabIndex',i+1);
}
});
});
</script>
That's all! After you add that code, you should see that the form now is laid out in two columns:
Adding section breaks
To add multiple sections in your form, you need to know the IDs of the fields immediately before and after the break. See this article for instructions on getting the field IDs:
Setting or Getting a Form Field Value via Javascript on a Landing Page
In this case, we'll add a break between email address ("#Email") and company name ("#Company"). Add this inside the $jQ(document).ready() javascript block:
$jQ('#Company').parents('li').css('clear','both');
$jQ('#Email').parents('li').css('margin-bottom','20px');
When done, it will look like this.
This section break may mess up your tab order. Delete the javascript block that assigns the tab order ($jQ('.mktInput :input').each(...)) and use jQuery to assign them manually, It tabs in ascending order:
$jQ('#FirstName').attr('tabIndex',1);
$jQ('#Email').attr('tabIndex',2);
$jQ('#LastName').attr('tabIndex',3);
...
Download Attachments:
.png)