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.

submit1

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

submit2

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;
height:83px;
margin:0;
padding:0;
width:279px;
}

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:  http://www.formstack.com/university/wp-content/uploads/2011/06/submit_button_large_red.jpg  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:

submit_button_large_red1

So my CSS will look like this:

.fsSubmit input {
background:url(“http://www.formstack.com/university/wp-content/uploads/2011/06/submit_button_large_red.jpg”) no-repeat scroll 0 0 transparent;
border:medium none;
height:189px;
margin:0;
padding:0;
width:200px;
}

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

submit3

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.

submit4

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

submit5

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;
text-align:left;
}