How to Modify the Submit Button

Written by Formstack on June 27, 2011

Posted in Form Hacks

Whether you just 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 easiest thing to do is change the text of the submit button.  To do this, click on the Form Extras button at the bottom of the form builder.


Then click on the Submit button and change the text there.


Use Your Own Image for the Submit Button

Unfortunately, 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.  Even if you aren’t familiar with CSS, you should still be able to do this.

Here’s the CSS code:

.fsSubmit input {
background:url(“http://foobar.gif”) no-repeat scroll 0 0 transparent;
border:medium none;

You will replace http://foobar.gif with a link to wherever your submit button image is located.  I have uploaded my own submit button here:  Also, you will need to change the height and width to the dimensions of your image.  Here’s the submit button I’m going to use:


So my CSS will look like this:

.fsSubmit input {
background:url(“”) no-repeat scroll 0 0 transparent;
border:medium none;

Cut and paste this CSS into the Additional CSS box of your style template and your new button will appear on your form.


However, the “Submit” text still appears over the submit button.  To remove this, click on Form Extras on the Build tab of your form and then click on the Submit button to edit it.  Replace the word “Submit” with a single space and then save.


Your new Submit button should now look correct on your form:


Remove the Submit Button

Occasionally, we get the request to remove the submit button.  Usually, this is from users that have built some sort of calculator form using our service.  This is possible with some CSS,   added to the page where you embedded the form or to a style template:

.fsSubmit input.fsSubmitButton {display:none;}

Left Align the Submit Button

This is also done with CSS:

.fsPagination {
margin:25px 0 0 22px;