Adjusting form field heights in custom landing page

[Hannah_Sears]

SUMMARY

We have a custom landing page with a form (Client Survey). The form has 2 comment boxes that should have a taller height than standard fields. The Marketo form is set to show 5 lines, but we're just seeing one and a scroll bar. Which seems hard for users to deal with.

I think we force form field height on our LP template with the following code:

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm select.mktoField, .mktoForm textarea.mktoField {

/* float: left !important; */

max-width:none !important;

padding-left: 3% !important;

height: 40px !important;

background: white !important;

border: 1px solid #e3e3e3 !important;

border-radius: 3px !important;

color: #686d73!important;

font-family: "RadnikaNext", "Arial", sans-serif !important;

font-size:16px; !important;

/* width:70% !important; */

Can we modify these options to support some taller fields or are there other solutions? We do this on another form on the footer of our main site (not a Marketo page). See the homepage .

NOTE: It's also unclear on why the first long q text is styled different than the other form field labels.

[Bryan_Epstein]

For the textarea fields, you would apply a min-height attribute or a static height.

.mktoForm textarea.mktoField {
     min-height: 150px; /* or height: 150px !important for static */
}

For the two questions you have (On a scale), you have the second one within <p></p> tags whereas the first one does not. Depending on which one you would like to do, you'd want to change to whichever option you like more.

[Dave_Roberts · Accepted solution]

The textarea field gets it's height from the rows="" attribute via the forms2.css file that loads with the forms. The rows attribute is what gets set when you choose how many lines to show, in your case 5, in the example below it's 3.

.mktoForm textarea[rows="3"] {
    height: 4.6em;
}

I think the problem with the CSS you're using is that you're treating the textarea the same as all the other inputs by setting the height to 40px!important. The best way to iron this out might be to bust up the rule you're using now into two rules, one for "all the inputs" except textareas, and another for textareas.

This set is the exact same as what you're using now, I've just removed the textarea selector from the end of line 01.

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm select.mktoField {
max-width:none !important;
padding-left: 3% !important;
height: 40px !important;
background: white !important;
border: 1px solid #e3e3e3 !important;
border-radius: 3px !important;
color: #686d73!important;
font-family: "RadnikaNext", "Arial", sans-serif !important;
font-size:16px; !important;
}

This bit is just for the textarea. I've just copied what you're using now and removed everything but the textarea selector. From there we'd want to change the height to something like inherit !important so that it'll pickup whatever value is set by the forms2.css for the height (based on # of rows).

.mktoForm textarea.mktoField {
max-width:none !important;
padding-left: 3% !important;
height: initial !important;
background: white !important;
border: 1px solid #e3e3e3 !important;
border-radius: 3px !important;
color: #686d73!important;
font-family: "RadnikaNext", "Arial", sans-serif !important;
font-size:16px; !important;
}

If you go this route, you should be able to update the height of your textarea using the handles inside the form editor (choose # lines to show) instead of having to set a fixed height in the CSS if you wanted to adjust the height.