Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Jared Atchison

    (@jaredatch)

    Sure, we can help you out.

    Do you have anything specific you want? The submit button can be styled with a little CSS code, which we can assist you with.

    Once we nail that down, then you’ll put the code on your site – it’s simple.

    Let me know!

    Hi Jared,

    Thanks for getting in touch!

    I know a little code but just don’t know to do with it. I managed find the code being used at the moment and changed the values to suit the look I’m looking for (white outline, pink/red centre – I also want it centered beneath the form):

    div.wpforms-container-full .wpforms-form input[type=submit],
    div.wpforms-container-full .wpforms-form button[type=submit],
    div.wpforms-container-full .wpforms-form .wpforms-page-button {
    	background-color: #e02945;
    	border: 5px solid #fff;
    	color: #333;
    	font-size: 1em;
    	padding: 10px 150px;
    }
    
    div.wpforms-container-full .wpforms-form input[type=submit]:hover,
    div.wpforms-container-full .wpforms-form input[type=submit]:active,
    div.wpforms-container-full .wpforms-form button[type=submit]:hover,
    div.wpforms-container-full .wpforms-form button[type=submit]:active,
    div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
    div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    	background-color: #f34640;
    	border: 5px solid #fff;
    	cursor: pointer;
    }

    You can also view the button I’m trying to edit on the form on this page: http://justwogames.com/apps/

    Thanks!

    Plugin Author Jared Atchison

    (@jaredatch)

    Sure thing. So just as a precaution, I’d prefix that code with another CSS variable, to make sure it has top priority. I’ve adjusted the code for you below:

    #wrapper div.wpforms-container-full .wpforms-form input[type=submit],
    #wrapper div.wpforms-container-full .wpforms-form button[type=submit],
    #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button {
    	background-color: #e02945;
    	border: 5px solid #fff;
    	color: #333;
    	font-size: 1em;
    	padding: 10px 150px;
    }
    
    #wrapper div.wpforms-container-full .wpforms-form input[type=submit]:hover,
    #wrapper div.wpforms-container-full .wpforms-form input[type=submit]:active,
    #wrapper div.wpforms-container-full .wpforms-form button[type=submit]:hover,
    #wrapper div.wpforms-container-full .wpforms-form button[type=submit]:active,
    #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
    #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    	background-color: #f34640;
    	border: 5px solid #fff;
    	cursor: pointer;
    }

    Normally the best place to put the above code is inside your theme. However in this case I’m not familiar with that theme and it doesn’t appear to be using the common style.css, so I would recommend using a simple plugin.

    Here is a great how-to and video that shows you how and where to place the code 🙂

    How to Easily Add Custom CSS to Your WordPress Site

    I cannot find at all where to make these changes, this thread does not specify. Which file has “.wpforms-page-button”? I need to do the same thing but using the Custom CSS Manager with new class and entering it into “Submit Button CSS Class” text box does nothing. Is this supposed to work that way?

    Plugin Author Jared Atchison

    (@jaredatch)

    These CSS updates can go in your theme’s style.css file OR you can use a plugin such as Simple Custom CSS to avoid editing your theme.

    This link has a video walk-through of the Simple Custom CSS plugin:

    How to Easily Add Custom CSS to Your WordPress Site

    By default the WPForms styling used will override your theme, which is to prevent theme conflicts. So if you try to apply a submit button css class, it might not apply correctly since the WPForms CSS is overriding that.

    To get around that you can make the CSS highly selector specific (as in the code examples mentioned earlier) OR you can change WPForms to use “Base styling only” which will let your theme handle many of the styling decisions (but won’t work with every theme) http://cl.ly/2P1G2E471u38

    Hi
    The above code didn’t work for me, any other ideas?

    http://tinyurl.com/zfu6khy

    Plugin Author Jared Atchison

    (@jaredatch)

    Where did you place the custom CSS coded? I don’t see it on your site or on the page linked.

    Hi Sorry
    I started a separate thread, I lost track of this thread’s location. I was able to use Fire Bug and find the CSS needed:

    div.wpforms-container-full .wpforms-form button[type=”submit”] {
    background-color: #000000;
    }

    Hi

    What would be the CSS code if I’d like to change the color of the submit-button, always when I mouse-over it?

    Thank you.

    Plugin Author Jared Atchison

    (@jaredatch)

    Hey alexzyz,

    We have a doc just for that! Check out https://developers.wpforms.com/docs/change-the-submit-button-color/

    The rule that has :hover is what tells the browser to change the CSS when the user mouses over it.

    Hope that helps.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Submit Button Styling’ is closed to new replies.