CSS for the WordPress Google Form Submit button

I was recently asked how the Submit button could be styled when using a Google Form in conjunction with my WordPress Google Form plugin.  Fortunately this was an easy question to answer because I had done something similar for another site.  Now I suspect the person asking me didn’t want to make their submit button pink but the CSS selector should be the same – it is just a matter of adding the CSS directives to achieve the desired affect!  I used the following selector to style the Submit button:

div.ss-form-entry>input[type="submit"] {
    background-color: pink;
}

This little trick should help further integrate Google Forms with your WordPress site.

Update: Recently I was asked how to style only the Submit button – all other buttons (e.g. Back, Continue, etc.) and input fields should keep their default styles. Here is some CSS which will style only the Submit button:

div.ss-form-entry>input[type="submit"][name="submit"] {
    background-color: pink;
}

23 thoughts on “CSS for the WordPress Google Form Submit button

  1. This is all great stuff and I really appreciate the articles but doing this changes all text boxes as well as the submit button. I’ll come back when I’ve figured out how to do the submit button.

    By the way, does this plugin or chaining the style of these forms violate any of Googles TOC’s?

    Cheers

    Ramy

  2. .ss-navigate{}

    That’s what did the job in the end for me 🙂

  3. Hi Mike,

    I tried your CSS above but it changed the background of all the Google input fields pink as well.

    Cheers,

    John.

  4. Yes that works fine. thanks. so how do we change the colour using hex values etc?

    • Looks like I never answered this – I apologize.

      To use a hex value simply swap “pink” with a hex value (e.g. “#a0a0a0”) in the example above.

      div.ss-form-entry>input[type=submit] {
          background-color: #a0a0a0;
      }
      
  5. My “Submit” button somes up in Chinese… I’m in WA state. In other places I can add “&hl=en”, but the magic of your script (thank btw) hides that from me. Any hints?

    • Someone else mentioned this same problem about a week ago and their problem went away after a couple hours. It may have been a glitch on the Google side because adding the language parameter as you tried, should work. That is exactly how I set up the Sample Form in French on my site. All I can suggest is to double check your syntax and make sure that if you use the WordPres WYSIWYG editor that it didn’t turn your ampersands into their HTML equivalents.

  6. Where do I paste this code? Do you have any tips for eliminating the “squaring” effect when the form is displayed in Chrome?

    • To use Custom CSS you have two options (as long as you’re using a fairly recent version of the plugin):

      1. If you have CSS you want applied to every form your site uses then you should add your Custom CSS on the Plugin Settings Page (Dashboard->Settings->Google Forms). There is a text box where you can paste your CSS. Just above the text box is a check box to enable Custom CSS – make sure it is enabled.
      2. If you have form specific CSS that should only be applied to a single form, there is a text field at the bottom of the form Editing Page where Custom CSS can be entered. For the Custom CSS to work, you also need to enable Custom CSS on the Plugin Settings page as noted above.

      As for your question about the “squaring” effect, I am not sure what you mean by that. I use Chrome as my default browser and I don’t see any material difference between forms when running under Chrome versus Firefox (which I like better for debugging). Do you have a screen shot you can point me to?

  7. It would be really helpful to have a list of the names of the CSS hooks made available in this plug and an explanation of what items they refer to so that one can easily work out how to apply styling.

    I spent a long while trying to force size changes on the width of various fields, the text boxes seemed to default to 127px – which looks odd unless you have 4 columns. Eventually worked out how to force a % value.

    Great plugin otherwise. Thanks

    • That is a reasonable request, I’ll see what I can do to add that. I do list all of the CSS classes that I know of as part of the plugin. You can see it in the Other Notes section in the plugin repository. I can add more comments to the CSS file as I have time.

      If your text boxes defaulted to 127px that may be a function of your theme as without any CSS they will pick up whatever your theme defines. Every theme is different and having looked at probably a 100+ CSS questions there isn’t a simple answer that applies to all themes. Some themes are very heavy on CSS as the only way to tweak CSS rules for WordPress Google Form is to use the !important CSS operator. It isn’t very elegant but occasionally it is the best solution.

  8. Hi Michael,

    I’m new in using google form plug-in and my css skills is just a beginner.
    This is my form below and i want to retain the grid in my website which is completely gone. Also i want all of the text on the left side to have the same width & bigger font size to make it presentable.

    I tried copy and pasting the css code from the google form to the Form CCS field in your plugin but I see no changes in the form.

    Here is the css :

    [ … snipped …]

    Removed CSS and link to form

  9. Hello Michael,
    I really enjoy this plug-in! It has helped me a ton. The forms were working great, then today when I was on my site I noticed that the “Submit” button is not looking correct. I had changed the input text from “submit” to “send” a while back had put the custom CSS code from above in to change the color and now the button is not responding the the code. I changed it back to “submit,” but it is still not responding. You can view one of my forms here:
    http://lifefortheinnocent.org/apparel-order-form/

    This is the code that I have in the Google Form Global Settings:

    div.ss-form-entry>input[type=”submit”] {
    background-color: #ffb600;
    }

    I updated to wordpress 4.0.

    Any ideas? Thanks!

  10. Hello Michael,

    Thank you for this useful plug-in! Just wondering, the “submit” button is currently aligned to the left. Is it possible for me to change the position of the button to the center?

    Thank you!

    • With CSS you can do lots of things, it is usually a matter of trial and error. That said, center aligning things tends to be tricky if you want it exact. If you are good with the it being “roughly” centered, you can add a margin-left or padding-left (you’d have to experiment with it) to the DIV which contains the submit button.

Leave a Reply