How to Modify the Submit Button

Jessica

April 19, 2019 13:28

Updated

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 Style next to Build, hover your mouse on the active theme and click on Edit to edit the styling. From here, go to Advanced Styles to edit the submit button. You can edit the padding around the button, the background color, border color, and width, as well as font type (based on option from the 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 Changes.

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 Themes Library. Click "Create Theme" and rename the Theme by clicking on the pencil icon next to "Untitled Theme" then type in your Theme name. You can also choose an existing Custom Theme by clicking "Apply" on the Custom Theme you would want to use in your Themes Library. 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:

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 changes 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.