The submit area of the form can be quickly customized by copying and pasting the CSS below to the Theme that is applied to the form. The submit area can contain a Next, Previous, and Submit button.
Pease note: This article takes you through how to configure CSS on an older version of our Form Builder(V2&V3). If you've recently updated your Form Builder version to V4, we'd recommend checking out this article instead. For more information on this update and why you should migrate your forms to the newest version, check out this article.
...remove grey footer behind submit button (version 2 forms)
.fsForm .fsSubmit {
background-color: transparent !important;
}
...remove margin from top of submit button (next/previous buttons also)
.fsForm .fsSubmit {
margin-top:0;
}
...hide the submit button on a form
.fsSubmit input.fsSubmitButton {
display:none;
}
...hide the submit button on a multi-page form
.fsSubmit input.fsSubmitButton {
display:none !important;
}
...set a height/width for submit button and round the edges
.fsSubmit input.fsSubmitButton {
height: 50px;
width: 100px;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
}
...hide the previous button from a multi-page form
.fsPreviousButton {
display: none;
}
.fsPagination .fsNextButton {
float: none;
height: 55px;
width: 150px;
}
...use your own image for the submit button on a form
.fsSubmit input {
background: url(http://www.YOUR_URL_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;
height: 100px;
margin: 0;
padding: 0;
width: 300px;
}
NOTE: When you replace the Submit button with your own image, you need to go to Build > Form Extras > Submit Button and erase the text in the 'Submit' button by deleting all the text shown in the button and then entering a single space in the text field. You will also need to remove all other Submit button settings, as these will override with the added CSS. Check out this link to see the step-by-step process.
Next and Previous Buttons on Mobile Forms
The Next and Previous buttons have alternative CSS when you view the page on mobile forms. You can override these images with additional CSS.
...to change the look of the mobile Next and Previous buttons
@media only screen and (max-width:699px){
.fsPagination .fsNextButton, .fsPagination .fsPreviousButton, .fsSubmitButton {
background: #47DA47 !important;text-indent:0;}
}
}