Re: Form Submit button to the right of the form not below

Anonymous
Not applicable

Form Submit button to the right of the form not below

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:

0EM50000000Rbnb.jpg

Thanks, Bec
Tags (1)
7 REPLIES 7
Alok_Ramsisaria
Level 10

Re: Form Submit button to the right of the form not below

Please add the below mentioned code in your css;
 
.mktoForm .mktoFormRow {
clear: none !important;
float: left !important;
}

Hope this will heip!
Anonymous
Not applicable

Re: Form Submit button to the right of the form not below

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

Re: Form Submit button to the right of the form not below

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

Bec
Anonymous
Not applicable

Re: Form Submit button to the right of the form not below

Did you find a solution here?
Anonymous
Not applicable

Re: Form Submit button to the right of the form not below

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

Re: Form Submit button to the right of the form not below

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

Re: Form Submit button to the right of the form not below

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.