Form Submit button to the right of the form not below | Community
Skip to main content
A
Anonymous
March 17, 2014
Question

Form Submit button to the right of the form not below

  • March 17, 2014
  • 7 replies
  • 2865 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

7 replies

A
AlokRa4
Level 10
March 18, 2014
Please add the below mentioned code in your css;
 
.mktoForm .mktoFormRow {
clear: none !important;
float: left !important;
}

Hope this will heip!
A
Anonymous
March 18, 2014
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.
A
Anonymous
March 18, 2014
Me neither, I might put in a support case if we don't have any other ideas.

Bec
A
Anonymous
May 12, 2014
Did you find a solution here?
A
Anonymous
June 3, 2014
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.
A
Anonymous
June 3, 2014
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
A
Anonymous
June 3, 2014
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.
Terms & ConditionsAccessibility statement

Loading footer...