SOLVED

Radio button layout in Forms 2.0

Go to solution
Anonymous
Not applicable

Radio button layout in Forms 2.0

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.

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Alok_Ramsisaria
Level 10

Re: Radio button layout in Forms 2.0

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;
}

View solution in original post

10 REPLIES 10
Alok_Ramsisaria
Level 10

Re: Radio button layout in Forms 2.0

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
Not applicable

Re: Radio button layout in Forms 2.0

Great, thank you Alok.
Anonymous
Not applicable

Re: Radio button layout in Forms 2.0

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
Not applicable

Re: Radio button layout in Forms 2.0

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
Not applicable

Re: Radio button layout in Forms 2.0

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
Level 2

Re: Radio button layout in Forms 2.0

Hi Lauren,

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

Re: Radio button layout in Forms 2.0

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
Not applicable

Re: Radio button layout in Forms 2.0

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
Not applicable

Re: Radio button layout in Forms 2.0

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.