Radio button layout in Forms 2.0 | Community
Skip to main content
A
Anonymous
February 28, 2014
Solved

Radio button layout in Forms 2.0

  • February 28, 2014
  • 10 replies
  • 4109 views
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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by AlokRa4
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;
}

10 replies

A
AlokRa4Accepted solution
Level 10
February 28, 2014
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;
}
A
Anonymous
March 3, 2014
Great, thank you Alok.
A
Anonymous
March 4, 2014
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? 
A
Anonymous
March 4, 2014
Hi Lauen, the code is added to custom css in the form.  The new horizontal layout will only appear when you click Preview Draft.
A
Anonymous
March 5, 2014
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;
}
 
 
A
Alicia_Bell
Level 2
March 17, 2014
Hi Lauren,

Did you ever get this working? It's doesn't seem to be working for me either.
A
Anonymous
March 20, 2014
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 
A
Anonymous
March 31, 2014
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.
A
Anonymous
April 10, 2014
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.
A
Anonymous
March 17, 2015
Where do you put this code to get it to work?  I canot find where to edit the landing page or the form in HTML?

Thanks!
Terms & ConditionsAccessibility statement

Loading footer...