PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Next and Submit Button Styling

  1. soupdigital

    I'm trying to keep consistency and leverage the same styling as my themes buttons for the "Next" and "Submit" button within Gravity Forms. I know I need to do this within the css but not too sure where to start.
    It does not need to be the exact styling of my theme if that is an issue. But just need to begin editing the style of my form buttons (outside of loading and image within the form itself) as the default style is not optimal.
    You can see the button style on the homepage here:

    Posted 10 years ago on Sunday July 22, 2012 | Permalink
  2. I'm not sure of the easiest way to do this. If you look in your theme's stylesheet, you will see a section called /*=== FANCY BUTTONS. That's where the styles for the buttons begin. You will need to use those styles to target this Gravity Form element:

    .gform_wrapper input.button {

    I'm not sure if it will be easier to add that selector to each block in the stylesheet where the buttons are affected, or if it's easier to copy all the button styles to the bottom of your stylesheet and then add the .gform_wrapper input.button selector there.

    You need to do one or the other to make the Gravity Forms buttons look like your theme's styled buttons.

    Posted 10 years ago on Sunday July 22, 2012 | Permalink
  3. soupdigital

    Thanks for the quick reply Chris, legend.
    I think this might be above my basic skills but I'll keep trying. I'm trying to find the element with the plugin editor for Gforms but can't find it. What plugin file should I be looking at?
    Alternatively if there is a better way to change the formatting of the submit and next button that would get me close to that style then that would be ok also.


    Posted 10 years ago on Sunday July 22, 2012 | Permalink
  4. Don't modify any of the plugin files. You will add custom styles to your themes's style.css. If you copied the big blocks of style from the Fancy Buttons section of the stylesheet, then pasted them to the bottom of you style.css, you can change the existing selectors to include .gform_wrapper input.button. Try that for a couple and take a look at your form. I was able to change the size and color pretty quickly. But there are a ton of styling changes applied to buttons in your theme. It is going to take some work to get the Gravity Forms buttons to look the same, but it will be nice when that is done.

    Just start by copying the block from your style.css to the bottom of style.css, then add .gform_wrapper input.button where there are existing button references and refresh the page. You might be surprised how quickly that goes.

    Posted 10 years ago on Sunday July 22, 2012 | Permalink
  5. Via email:

    Try adding this to your theme's stylesheet, wherever the theme provider suggests you add your custom CSS rules:

    .gform_wrapper input.button {
    	font-size: 14px;
    	border-top: 1px solid rgba(255, 255, 255, 0.25);
    	color: #FFFFFF;
    	background-color: #FF5C00;
    	line-height: 1em;
    	padding: 0.6em 1.3em;
    	position: relative;
    	text-align: center;
    	text-decoration: none;
    	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    	white-space: nowrap;
    	display: inline-block;
    	cursor: pointer;

    There are probably some gradient and hover issues to deal with, but this will get you close. Screenshot:

    Posted 10 years ago on Friday August 31, 2012 | Permalink
  6. soupdigital

    Thanks you so much Chris, this works perfectly!!

    Posted 10 years ago on Saturday September 1, 2012 | Permalink
  7. Thank you for that update. Have a nice weekend.

    Posted 10 years ago on Saturday September 1, 2012 | Permalink

This topic has been resolved and has been closed to new replies.