Radio button layout in Forms 2.0

[Anonymous]

Is there a way to change the radio button layout? Currently, when you select radio button and have more than one field value, the values appear as stacked  ie, they exist on one column.

I would like the field values to go across the page.  For example, I would like my values Strongly Agree, Agree, Disagree, Strongly Disagree to each appear on the same row as the label rather than underneath.

[Alok_Ramsisaria · Accepted solution]

you can do this by using CSS only. Add the CSS below on your form/landing page -

.mktoRadioList.mktoHasWidth {

    width: 400px !important;

}

.mktoRadioList input, .mktoRadioList label {

    float: left !important;

}

[Anonymous]

Great, thank you Alok.

[Anonymous]

Hi, I am trying to make the radio buttons on a 2.0 form appear horizontal.  Do you use this code in the form “custom CCS” section or on the actual landing page? I have tried both and nothing seems to be having an effect on the buttons? 

[Anonymous]

Hi Lauen, the code is added to custom css in the form.  The new horizontal layout will only appear when you click Preview Draft.

[Anonymous]

thanks Mike, this doesn't seem to be working on my form for some reason.  Did you just copy and paste the code in?

.mktoRadioList.mktoHasWidth {

width: 400px !important;

}

.mktoRadioList input, .mktoRadioList label {

float: left !important;

}

[Alicia_Bell]

Hi Lauren,

Did you ever get this working? It's doesn't seem to be working for me either.

[Anonymous]

Hi Alicia 

This didn't work for me at all, however, this one did: 

.mktoRadioList.mktoHasWidth {

width: 400px !important;

}

.mktoRadioList input, .mktoRadioList label {

float: left !important;

}

.mktoForm .mktoLabel {

float: none;

}

.mktoFieldWrap span{

    display:block;

  }

I don't know why this isn't an option with Marketo forms, i had the same issue with the old version also. 

good luck 

Lauren 

[Anonymous]

Hi Alicia/ Lauren, I wonder if its browser related.  I'm using FF.

Lauren, I agree, Marketo forms should have more design versatility.  

Its an important tool to gain more insight about our leads so should have the look and feel that enhances user experience.

[Anonymous]

Hi Laurne,

depending on the size of your landing page and number of text characters in your button labels, this one might work for you.
After a bit of playing around, I found these settings worked better for my form.


.mktoRadioList.mktoHasWidth {
    width: 650px !important;
}
.mktoRadioList input, .mktoRadioList label {
    float: left !important;
     margin-right: 2px;
    margin-left: 10px;
    margin: 2px 2px 2px 2px 2px;
  padding: 0px 0px 0px 0px 0px;
    padding-left: 0px;
  padding-right: 3px;
    text-indent: 1px;
    text-align: left;

}

Hope that helps.