Skip to main content
A
Anonymous
May 21, 2014
Question

move submit button to the right

  • May 21, 2014
  • 4 replies
  • 1610 views
can you move the submit button to be right next to the form fill - for instance if I just want to get an email address - can I  just have 2 columns so to speak -
row 1 - column 1 - email address
row 1 - column 2 - submit button
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

A
Anonymous
May 21, 2014
Hi Paula,
yes. Moving the button can be done by using custom CSS.
Moving fields can be done by drag and drop (move a field to the right side of another field, there will appear a orange arrow on other the field) but that's not possible with a button.

Best regards

Steffen
A
Anonymous
June 3, 2014
Any idea what to put in the custom css box to get it to move to a column on the right?
A
Anonymous
June 3, 2014
Herb - have no idea ..  Having my web developer look at it.
A
Anonymous
June 3, 2014
Paula, thanks for replying.  I think I may have found a workaround though. 

For anyone else interested, It's not perfect, but at least it works.



This is to edit an email only submit form at the footer of a website.  It used to be two lines (form + submit button), the css below moves the submit button from below the form to the right of the input field. 

1. open form settings and form theme
2. 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 querie is 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...