Forms 2.0 Custom CSS for left adjusting check box | Community
Skip to main content
Megan_Reed1
Megan_Reed1
Level 4
August 28, 2015
Solved

Forms 2.0 Custom CSS for left adjusting check box

  • August 28, 2015
  • 2 replies
  • 3350 views

I have a 2.0 form where I'd like to add a check box for people to request more information. The CSS of the landing page is controlling if the field is above or to the left of the field.

Here's the landing page: Go with the Pro offers.netgainit.com/GoWithThePro.html

This is what the form looks like currently:

Here's what I'd like the form to look like (with a bit more space between the email address field and the check box/text):

Any CSS gurus that can help?

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 SanfordWhiteman

.mktoForm LABEL[for="ContactSales"]  {

     float: right !important;

     width: 210px !important;

}

.mktoForm INPUT#ContactSales {

     margin-top: 2px;

}

But realize that once you're refloating stuff like this, later changes to the form (if any) will also be affected.

It can be better to remove all styles from the form and then style it more by hand. Although admittedly this form is very simple, so probably not worth the hassle.

2 replies

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
August 28, 2015

.mktoForm LABEL[for="ContactSales"]  {

     float: right !important;

     width: 210px !important;

}

.mktoForm INPUT#ContactSales {

     margin-top: 2px;

}

But realize that once you're refloating stuff like this, later changes to the form (if any) will also be affected.

It can be better to remove all styles from the form and then style it more by hand. Although admittedly this form is very simple, so probably not worth the hassle.

    Megan_Reed1
    Megan_Reed1Author
    Level 4
    September 1, 2015

    Thank you Sanford. This worked beautifully. The margin between the email input and the check box is still pretty small and I tried increasing the margin-top number to 10px, but it didn't seem to make a difference.

    Either way, this will work better than before.

    Thank you!

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    September 1, 2015

    The margin-top is for the checkbox relative to its container.  If you wanted the whole row to move down you'd apply margin to the row:

    .mktoFormRow:nth-of-type(2) {

        margin-top: 4px;

    }

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    September 1, 2015

    Remove the .nth-of-type rule and try:

    .mktoForm LABEL[for="ContactSales"]  {

         float: right !important;

         width: 210px !important;

         margin-top: 6px;

    }

    .mktoForm INPUT#ContactSales {

         margin-top: 8px;

    }

    Terms & ConditionsAccessibility statement

    Loading footer...