Form Submit button to the right of the form not below

[Anonymous]

Hi Everyone,

I am trying to build a form that goes from left to right, but I want to put the bottom at the end.

I can't seem to see how to move it so it sits next to the field instead of below. Any ideas?

I have included a mock up of the design I am doing:



Thanks, Bec

[Alok_Ramsisaria]

Please add the below mentioned code in your css;

.mktoForm .mktoFormRow {

clear: none !important;

float: left !important;

}

Hope this will heip!

[Anonymous]

I tried to implement that code in the custom css area of the form 2.0 editor, but was unable to move the submit button off the bottom row.

[Anonymous]

Me neither, I might put in a support case if we don't have any other ideas.

Bec

[Anonymous]

Did you find a solution here?

[Anonymous]

Looking for a solution for this, as well.  Wish there was an easy way to grab the entire form code and manipulate it in an html editor.  It seems like form building is a huge weakspot in the application.

[Anonymous]

Hey Guys,

I ended up having to do some custom code in the css. This is what I put in:

button.mktoButton  {

margin-top:-62px !important;

    position : absolute;

    font-family:Helvetica, Arial, sans-serif !important;

    font-size:1em !important;

width: 150px !important;

    height: 43px !important;

    color:#ffffff !important;

    font-weight:bold !important;

    text-shadow: none !important;

  }

  
The part in bold moves the button up vertically. Not the best way to do it but a fix all the same.

So all you have to do is drag it to the right as far as you need and use the margin to move it up.

Cheers,
Bec

[Anonymous]

After poking around for a bit, i was able to come up with a similar solution.  I added @media only queries so that the code remains responsive.  It's not perfect, but at least it moves the submit button so that everything is on one line.

Paste the below css into the edit custom css field:

div.mktoButtonRow {
position:relative !important;
top:-44px !important;
left:630px !important;
}

@media only screen and (max-width: 750px){
div.mktoButtonRow {
position:relative !important;
top:-5px !important;
left:10px !important;
}
}

@media only screen and (max-width: 480px){
div.mktoButtonRow {
position:relative !important;
top:0px !important;
left:0px !important;
}
}

This particular form has a label width of 355px and field width of 245px, so you will likely have to play with the "top:-44px !important; left:630px !important;" to get the button aligned correctly. 

Also, the @media only queries are so that the form condenses when viewed on a mobile device or smaller browser.  You may need to adjust the "max-width" according to how wide your form is.