Formstack

How to Modify the Submit Button

Whether you want to change the text of the submit button or use a different image entirely, this is possible using Formstack.

Changing the Text of the Submit Button

The Submit Button text and styling can be updated quickly and easily in the Form Builder. In this section, navigate to the Submit Button at the bottom of your form. Click on it to bring up the editor on the left (under the Fields tab) and type in the new Submit Button label - this will update in real time.


Then, click on the Theme tab to edit the styling. In this tab, you can edit the padding around the button, the background color, border color, and width, as well as font type (based on option from selected font in theme), size, and color. After you make the changes be sure to scroll to the top of the theme editor and click on save.



Use Your Own Image for the Submit Button

Using your own image for the submit button isn't quite as easy as changing the text of the button, but it is possible.  To do this, you will have to add a few lines of CSS to your Formstack style template or to the page where you have the Form embedded.  This is a quick solution, even if you aren't familiar with CSS.

You'll need to create a Custom Theme in order to edit the styling of the Submit Button.

Just click away from the Submit Button and go back to the Theme tab. Click "Change" next to your current Theme name. When the Theme selector window comes up, type in a new Theme name and click "Add New Theme" to create a Custom Theme
or choose to edit an existing theme. Then, click to "Open the Advanced Code Editor".


Inside the CSS Editor, you want to paste in the CSS shown below to customize the Submit Button image: 

.fsSubmit input {

background: url(http://www.YOUR_URL_HERE.png) no-repeat scroll 0 0 transparent !important;

border:medium none !important;
height: 100px !important;
margin: 0 !important;
padding: 0 !important;
width: 300px !important;
text-indent: -9999px !important;
}


We stick the "important" tags in there to ensure that we override the inline CSS. Also, you will want to replace "http://www.YOUR_URL_HERE.png" with a link to your submit button image. You may need to adjust the height (height:100px;) and width (width:300px;) to the dimensions of your image. Here's the submit button I'm going to use:



So my CSS inside the Advanced CSS Editor will look like this:

After you have completed this be sure to scroll to the top of the theme editing section and click save to make the code changes stick. And the new Submit Button should now be added to the form:


Remove the Submit Button

To remove or hide the Submit button, add the below code to the page where you embedded the Form or to a style template:

.fsSubmit input.fsSubmitButton {display:none;}

OR just remove the URL from the custom Submit Button code from the CSS editor.


Left Align the Submit Button

This is also done with CSS:

.fsPagination {
margin:25px 0 0 22px;
text-align:left;
}