UPDATE: Try the Form Designer video course to create fantastic Submit Button styles!
Did you know that green and blue are the most relaxing colors? That’s why they’re used by the most popular websites out there to help users feel good surfing those websites. Submit buttons in web forms should also feel right because that’s where people share their most sensitive info.
With this guide, you’re going to learn how to customize your submit buttons so you can make your visitors feel good when sending their info & increase your conversion rates.
Change the Submit Button’s Appearance
- In the Form Builder, click the Form Designer icon.
- Go to the Styles tab.
- Scroll down to the Inject Custom CSS section.
- Apply your custom CSS rules or use the following code:
.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold15px arial,sans-serif;
text-shadow: none;
}Here’s how it’ll look afterward:
Details of the CSS Code for Your Submit Button
- .form-submit-button – the selector for the submit button on your form.
- background – sets up the background color behind the text.
- color – determines the color of your text.
- border-style – sets the style of your submits button borders.
- border-color – sets the color of your submit button borders.
- height – sets the height of your button and is indicated with pixels.
- width – sets the width of your button and is indicated with pixels.
- font – sets the font properties.
NOTE: Do not forget to add semicolons (;) after each property.
Submit Button Hover Effect
Go to the Inject Custom CSS section in the Form Designer using the steps above and inject the following code:
.form-submit-button {
background: #B9DFFF;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}
.form-submit-button:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}Here’s how the button looks while resting and when hovered on:
Details Each CSS3 Code for Your Submit Button
- .form-submit-button:hover – this is the class when the mouse hovers onto the submit button. Every other field is left the same except the background to show what’s happening on mouse hover.
- border-radius – rounds the corner of your submit buttons.
- box-shadow – sets a shadow for the submit button.
- text-shadow – sets a shadow for the text inside the submit button (not applied to example).
How’d you do? Please share your thoughts or suggestions in the comments section below.
Send Comment:
42 Comments:
how to restrict our submit button from blank submission. Our website is made in WordPress
Need quick response please
2 quick questions:
1. how to add url to this submit button to redirect to another page
2. How to identify the two submit buttons separately.. i have 2 of them.. how do i refer to each of them in the code.. i want one to be green and another one to be blue..
Please help.. my link is :
how to center align the submit button in HTML Code
Simple yet brilliant
Thanks for the guide
thanks sir it is helpful
Hey there ... simple question; How can I change who a SUBMIT button emails for responses? I'm guessing it is defaulted to Jotform account site, and I have to go there to get repossess, but can I have the submit button on my form be directed to my own email (not just as a notification)?
Thanks,
J Downes
I am trying to add another form to the submit button. When my clients hits the submit button that it would take them to another form to fill out.
Thanks
Miriam
How do I get the "Submit" button to send form to my email?
thanks
Hi, Could you tell me how to apply CSS3 to make the colour slide up the button when hovered over?
Thanks.
Does this feature depend on the form? I use a card form and the form designer only shows "Themes" and "Individual" where I can set some (not all colors) but no CSS.
i have written this code in form
and in head i have written
.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
}
its not working now wht should i do???
Hi there, I'd like to have a spacing/padding around my su_button, so that the buttons are more on their own instead of attached to eachother. What code do I have to use?
height, padding-bottom only give me higher buttons, but I just need more space around it.
Hello,i found your site through search,yours site is excellent and a nice website...
The contents are nice &will grow higher in future...
thanks,
where the enter data save
You might find you need to add the CSS !important in order to get some of your CSS to operate.
I want to make counter in the FORM for registering the number of applicants for attending a meeting. I am not able to do that. How to make a counter?
How do you get it to acctually submit though?
I don't know where to start... I cloned a website to use for my theme but no idea where can't access that specific theme. I am about to give up.
Hi Thr,
After the first click, how can we bring the button style back to normal state without clicking on the screen again
Thanks, helped me alot
thank you
I can not access the creator of themes
How can I import my own documents saved on computer into jot form
Also can't save any themes
having the same problem here, can't save to private
Theme doesn't save if you try to save to private.
Add login page trick tell me please
Hi, what a cool idea!
I am having a few issues submitting my theme.
1.) The thumbnail for my form is not ideal. Because my form embeds Youtube, one gets a black screen.
2.) When I try to remove screenshots, I can't. Do you have a recommended size?
3.) Even though I am trying to change the price to $10, it keeps displaying "Free" when I save.
Thanks!
Nick
yolo
what is the html-code for .form-submit-button
and .hover
Hi!
The code:
.form-submit-button{
background:#0066A2;
color:white;
border-style:outset;
border-color:#0066A2;
height:50px;
width:100px;
font: bold 15px arial,sans-serif;
}
It´s no funcion in INTERNET EXPLORER 7
=(
Thank you very much..
Hello,i found your site through search,yours site is excellent and a nice website...
The contents are nice &will grow higher in future...
thanks,
very good
good
Hello,i found your site through search,yours site is excellent and a nice website...
The contents are nice &will grow higher in future...
thanks,
Is there a way to change the design of the browse button on the file upload option?
Brilliant :-)
Excellent