Formstack

CSS - Submit Action Edits

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.

...remove grey footer

.fsForm .fsSubmit  {
   background-color: transparent !important;
}

...remove margin from top of submit button

.fsPagination  {
   margin-top:0;
}


 

...remove the submit button from a form

.fsSubmit input.fsSubmitButton  {
   display:none;
}



...set height/width for submit button and round the edges

.fsSubmit input.fsSubmitButton  {
    height:  50px;
   width:  100px;
   border-radius:  5px;
}


 

...remove 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 has 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;}
}
}