Adding additional space to a long form

[Michelle_Tizian]

I wanted to add additional space to my form.  It's long and that's how the events project leader wants it.  The way the form works is the contact enters their short information, then there's 3 nomination fields that they have to fill out but only one is required so it looks something like this:

My full name
Organization
Email address

I'd like to nominate

nominee's full name
organization
Reason I'm nominating this person

nominee's full name
organization
Reason I'm nominating this person

nominee's full name
organization
Reason I'm nominating this person

Any tips or tricks?

[Anonymous]

How about if you don't show the fields related nominee untill they person enters a value in " Nominee's full name" Not ideal but better that a supper long form to start...

[Michelle_Tizian]

Hi Mark,

Thanks for the suggestion.  I'm not sure how I'm going to do what you're suggesting.  

[Anonymous]

You can choose to show or hide fields dynamically...I am looking for the documentation for you now..

[Anonymous]

Page in the community seems to be down. You can go to support for the documentation.

[Anonymous]

Assuming the three nominations would be saved as new leads (instead of custom fields) one option would be a PHP, Java or another server-side language to read the nominations' and post them to Marketo using SOAP API syncMultipleLeads or Munchkin API associateLead

The second detail, making just one nomination required could be achieved through custom form validation.
 

[Rafael_Santoni1]

Michelle,

Before you go ahead and try to use the code I am about to paste here, I would like to make an assumption first.

If you are already using jQuery on your Marketo pages by calling it with "$jQ", this code will do exactly what you need.

Let say that you have a field named exactly "Email" and you want to add extra whitespace under it. Let's give it 50 pixels in height by dropping the following line inside a custom HTML object on the page inside SCRIPT tags:

$jQ($jQ('#Email').parents("li:first")).css( "height", "50px" );

If you also want to add extra space after any other field, then duplicate that line and change the field name on the new line with the name of the field for which you want to add the extra space.

If you have problems implementing this, send me a line by email to rafael.santoni@citrix.com and I will be more than glad to take this offline and give you the exact snippet you need.

I already tested it and it works as expected.

So, to add some context as to what we are doing here with the code... The code first selects the LI (list item) on which your field is inside of. Every Marketo field is inside an LI so we are looking for it by selecting the "parent" LI of the field in question. Then to that we simply override the CSS height style and give it a new value.

Good luck!

Rafael

[Michelle_Tizian]

Hi Rafael,

Thank you so much.  I'm not using JQuery on the Marketo landing page.  I did add the css block that you posted from another post which added the bolding to the fields that are not required.  So I just really want to add the extra space before the 3 nominee's full name just to make the form look cleaner.  

[Rafael_Santoni1]

Michelle,

If you want I can help you implement it. What I said will serve exactly that purpose. All Marketo pages make use of jQuery. It's just a matter of how you want to leverage it.

If you send me or post here the URL of the page you are trying to apply the spacing to, I can give you the exact code you need to place in a "custom HTML" object.

Thank you,

Rafael

[Rafael_Santoni1 · Accepted solution]

Michelle,

By the way, the reason why I had to use jQuery to do this is because you can not overrive the CSS style to an element that doesn't have a uniue ID or NAME without affecting other similar elements. That's why we need to programatically select the parent LI of the field in order to change its CSS properties.

If it was not for that, we could have used a similar approach and simply use CSS to override the style. This would probably be a good enhancement to request to Marketo. To have them specify a unique ID to each row (LI) based on the field it holds.

However, at this point in time, it might not be necessary soon because the new Marketo Forms 2.0 initiative is almost ready to go live and some similar tricks could be accomplished by using the new interface. Yesterday I was lucky enough to be on a demo with Marketo with select customers on the functioning Forms 2.0 upcoming release and I can totally see things like this being easy to do with the new form editor.

Have a fantastic day!

Rafael