Tips and Tricks

Periodically i receive an e-mail or a comment asking how to accomplish some particular feature or function using my WordPress Google Form plugin.  I’ve ended up writing a blog post for several of them.  To make it easy to find, I have listed them here:

As I add more, I will update the list.  By in large, just about any visual change can be made using CSS.

106 thoughts on “Tips and Tricks

  1. I like your plugin but am wondering, is here a way to add captcha to the form once it is on the website?

    • No, there is no CAPTCHA support because the plugin simply presents the form as it was defined within Google’s domain. There might be some clever jQuery mechanism to insert a CAPTCHA into an existing form, if you know of one let me know and I’ll take a look at adding it to the plugin.

  2. thanks a lot for this plugin.

    however if there is an option of ‘others’ and it is a required question, the form doesnt get submitted unless the ‘others’ box is filled as well.
    i had to remove the option of others from 2 questions.

    • I have been keeping this problem in the back of my mind as I was pretty sure that if I could solve the multi-page form problem, I could solve the “Others” problem at the same time. Based on my the progress I am making on multi-page forms (see this post), I am pretty sure the Others use case will be addressed as well. I will test it before I release to make sure.

  3. I set up my form with a confirmation page but when I submit a form this is displayed on the page before redirecting to my confirmation page:

    Your form
    Thank You!
    Submit another response | Create your own form

    • This is expected behavior as what you are seeing is the default Google confirmation form. I may see if I can implement something similar to what I had before where the Google confirmation page was never seen at all but it is harder to do now that I have added support for multi-page forms.

  4. The confirmation page does not show up at all. The form continues to act as if questions were missed, even if not required. I must be doing something wrong. I assumed you meant the confirmation page can be a page on your web site, like mine, http://www.balancedmeridian/confirmation???
    Please help, as I like the integration much better than iframe from google docs.

  5. I use your plugin on my website and it’s really great piece of work. However I have one problem, my theme uses cufon fonts and the cufon font is also used in form entries. This causes not sending national characters into Google Docs Sheet.

    What kind of custom style should I add?

  6. Thanks a lot, now it’s working 🙂

    • There are lots of “BR / ” being added*

      • The <BR> tags are in the Google Form source. If you look at the page source for the Google form within the Google Docs context you’ll see them there as well. What could be happening is your WordPress Theme’s CSS may be styling the <BR> tag and adding more padding or margin to it which would make the effect even more dramatic than it would normally be. In your case, I think it is the <P> CSS which is causing the bulk of your white space issues.

    • The majority of your white space is due to the paragraph style in your theme. It is defined like this:

      p {
      margin: 0 0 20px;
      }

      This causes 20px of white space after every paragraph tag which Google Forms have lots of! To fix this, you need to add something like this to the the WordPress Google Forms custom CSS setting (make sure to enable custom CSS):

      div.ss-form-container p {
      margin: 0px;
      }

      This will change the margin to 0px for all paragraph tags within the ss-form-container DIV which limits the application to just the Google Form. I recommend FireBug for chasing down these sorts of CSS oddities.

      • Thanks for the response. The CSS change did take out some of the white space! Thanks!

        However, it still looks like the breaks are being added. They aren’t in the original (not the ones I’m talking about at least). Here’s a link to it:

        https://docs.google.com/spreadsheet/embeddedform?formkey=dDFDU1VyLVNUMkd3ZFFnSGtTeUoxZXc6MQ

        After the plugin there are two breaks after the main label tags. Note the “required” asterisk is on a different line than “Name of person to add:” In the original google form these aren’t there.

        I’m gonna download firebug now. Thanks for the tip!

        • For the curious, it turned out that the Theme being used on this site has a ‘the_content’ filter that was inserting the extra <BR> tags. Instead of modifying the theme, we were able to resolve the extra white space using the following CSS added to wpGForm’s custom CSS setting:

          div.ss-form-container br {display:none}

    • Looks like I missed my chance to help you at the page indicates the form is closed. Sorry for the delayed response, I have been swamped this week and am a bit behind. Let me know if you still me to look at it.

    • I think we got you all straightened out – those pesky <pre> tags are tough to track down!

  7. I think I am having the same kind of problem as Walton did, but the given code doesn’t work in my case.

    I also tried to hide the title, hide the bullets on a Multiple Choice question
    and highlight the missing fields on a Google Form. But none of these seem to be working.

    I tried it with all the different combination of Enable default WordPress Google Form CSS and Enable custom WordPress Google Form CSS checked on. But it still doesn’t work.

    Here is the link: http://twenty2high.com/questionnaire/

    Any help would be greatly appreciated.

    WP-Theme: Rhea

    • Can you fill out my Help and Support form? It will make it easier for me to see if I can chase down your problem.

      I can see from the HTML page source that you are using the prefix attribute for all of your CSS classes. If you eliminate the prefix from your shortcode the CSS that is mentioned in various comments may work as is otherwise you’ll need to make sure you add the mygform- prefix (which is defined in your shortcode) to all of the class names (see below).

      Your form has some <BR> tags in it and the CSS below should suppress them and help clean up some of the white space. Let’s start with that and then tackle the bullets. One of the things that ended up helping Walton was to add the following to his wpGForm custom CSS on the settings page:

      CSS without prefix:

      div.ss-form-container br {display:none} 
      

      CSS with prefix:

      div.mygform-ss-form-container br {display:none} 
      

      Let me know how you make out.

  8. OMG i am soooo stupid. when you mentioned shortcode, I realised I made a mistake in the shortcode. The BR tags resulted from “BR=on” in the shortcode:

    [gform form=’https://docs.google.com/spreadsheet/viewform?formkey=dHowV25LRmplZldPRXU5YWJ5b0Q5SkE6MB#gid=0′ confirm=’http://twenty2high.com/bedankt’ style=’ajax’ class=’mygform’ legal=’off’ prefix=’mygform-‘ br=’on’ title=’off’ maph1h2=’off’ email=’on’]

    thank you Mike !

    You rock !

  9. Hi,

    When using the mailto attribute for sending the notification to an alternate address, is there any way to surpress the automatic bcc to the blog admin?

    On the project I’m working on, there is a sepparate person who processes the form data, and the blog admin really doesn’t care about hearing about each and every form submission.

    Thanks for you time, the plugin is working great!

    • Currently there isn’t a way to do what you propose although it would be pretty easy to add a setting so the blog admin is cc’d on form submissions. No promises but I’ll try and add this in the next few days.

      • I’ve just pushed out v0.32 which adds a new option which controls whether or not the Blog Admin is copied on the form submission. By default it is enabled but you can turn it off on the WordPress Google Form settings page.

  10. Awesome, thanks a lot!

  11. For some reason at the top of my form is *必填 when translated it says required
    the submit button also is not in english
    then if they miss a required field
    您好像还有一两个问题需要填写。 translates to
    Looks like you still need to fill out one or two issues.

  12. I would like to add a separator line between questions on the google forms presented on my site. Is there an easy way to do so?

    • The simple thing to try is to turn the BR option on when setting up your Google Form within WordPress. If that doesn’t achieve the desired effect, you will likely need to define some CSS to achieve the desired results. I’d have to see your form to know for sure as your theme will have significant influence on how your form looks.

    • The first thing I would do is to enable the default wpgform CSS. It isn’t being loaded on your page. That should fix some of the text box size issues.

      • Fixed. The presentation did not change that much. I understand that my limited knowledge of CSS might be a drag. Sorry about that.

        • This is likely to be iterative, we’ll try and fix a few things at a time.

          Add the following to the Custom CSS section and make sure custom CSS is enabled.

          input.ss-q-short {
          width: 300px;
          }

          textarea.ss-q-long {
          width: 300px;
          }

          div.ss-q-help {
          font-size: 12px;
          }

          Start with this and then let’s take a look at it.

          • It is almost got there. I put width at 640 wich is my form width. Should I be able to set background color and font color for the question, this would help split the question, it’s responses areas from the following questions.

            Thanks

          • This would change the questions to be green:

            div.ss-q-title {
            color: #008000;
            }

          • Thanks! Last mod really helped the presentation. I turned the from to the English Language for you to see a quirk. All questions, even those where an answer is not required, show a label saying “This is a required Question”. If this could be replaced by a single space in all case, this would make the presentation stellar.

            BTW changing the switch:”Override Google Default Text ” do not work in my template. I don’t need this, however I thought that you’d like to know.

          • Yep, it is looking pretty good now. Here are a couple more things you may want to considering adding your CSS.

            This will hide the “Never send passwords …” message at the bottom of the form:

            td#navigation-buttons .ss-secondary-text {
            display: none;
            }

            This will hide the whole “legal” section at the bottom of the form:

            div.ss-legal {
            display: none;
            }

            I’ll take a look at the override Google Text, it is possible Google has changed something again. It is also possible that your theme does something to input buttons, I’ve seen that a couple times. There are some themes that filter the HTML and drop some of the attributes (which is a mistake IMNSHO) in the process.

          • I made the last recommended suggestions. The Never Submit Password is still there. I added some pading before and after text input. If I was able to remove the “Cette question est obligatoire.” I would be set.

          • Try adding this:

            td div.ss-secondary-text {
            display: none;
            }

          • Unfortunately, this does not work:

            td div.ss-secondary-text {
            display: none;
            }

            Would you be willing to consider testing with an Admin username and password? If so, PM me. Thanks

  13. Is it possible to use it to show pictures too?

    WordPress by itself can’t even show Google forms, even though it should could do it.

    • I am not sure I understand your question. What pictures do you want to show?

      You are correct, WordPress core does not have the ability to render Google Forms however if you use my WordPress Google Forms plugin you can tightly integrate Google Forms into your WordPress web site.

      • Actually I made it work without your plugin today. I just copied the iframe code from Google form.

        What pictures? The pictures in the form of course. But it works by just pasting the code google gives you. Apparently you have to update the page again then it will show the form. And I can make it wider now and make the pictures bigger. So everything is fine 🙂

        • You can make anything work with an iframe however many people don’t want to go down that path because you cannot control the look and feel of your form (or anything else) when it is embedded within your site using an iframe. I am glad it is working for you and you like the result, my plugin is intended for situations where the form should take on the look and feel of the host site itself. For that very reason much of the styling, the CSS not the actual class names, is not carried over from the Google Form when using the WordPress Google Form plugin. The form will inherit the style of your site and you have the ability to further customize it using CSS.

  14. Hi Mike,

    I have used your plugin and it is working quite well but I am having a couple of difficulties… Firstly, there is too much white space between the question and the answer field. I have tried the two suggestions you have here: http://michaelwalsh.org/blog/2012/04/suppressing-white-space/ but neither worked.

    I also have the check boxes and their labels appearing on separate lines instead of the same line and the text boxes are very small. I tried some of the solutions you suggested to Denis above and trying playing with the settings some but nothing changed any of these issues.

    You can see the form here: http://www.buddhistpeacefellowship.org/wpgforms/gathering-2014/

    I would appreciate any help you could give with resolving these issues.

    G

  15. My radio boxes are appearing indented to the right. Is there a way to force the radio boxes to be aligned to the left like the rest of my form elements?

  16. Pingback: CSS and its uses | droolberry

  17. Hi all,
    I am using Tempera theme and I find the following CSS declarations useful.
    These are declared in the Miscellaneous > Custom CSS section of “Tempera Settings”
    The advantage of putting these CSS settings there is the setiings do not get lost when updating the theme or WPGform.

    /* Tempera Custom CSS */
    .ss-section-title {font-family: Georgia,Times,serif !important; border-top: double black; border-top-style: solid; } /* Change the form Title to a Serrif Font and add a black border*/
    .ss-form-container li { list-style-type: none !important; transition: 0s background-color; } /* Change the form Title to a Remove Bullets from the Answer Choices List and add a mild hover effect */
    .ss-form-container li:hover { background-color:rgba(255,255,0,0.3) !important; transition-delay:0.2s; }
    .ss-q-long {min-width: 250px; } /* Minimum Width of short text questions */
    .ss-q-short {min-width: 250px; } /* Minimum Width of long text questions */
    .ss-form-entry > input[type=”submit”] { background-color: rgb(140, 245, 245); } /* Style the Buttons */
    .progress-label { background-color: rgb(224, 255, 255); } /* Style the Progress Section */
    .ss-q-title {font-family: Georgia,Times,serif; color: #e8280e; font-style:italic; font-size : 1.2em;} /* Style the Questions Text */
    .ss-form-question { border-top: double grey; border-top-style: solid; padding: 10px 10px; } /* Grey bars between questions */

    With these changes, the Form appears quite similar to the original Google Form with Magazine theme. Of course, there is scope of further enhancement but these changes are for now sufficient for me.
    Thanks,
    Vivek

  18. Hello Mike,

    This is excellent! My question is how can I insert this google form widget into part of my page? this function is available when you use other form widget but not on this.

    At the moment the google form widget can only be used as a post or the whole page.

    Please shed the light. Thanks

    • On the Dashbaord there is a Google Forms menu where you can see a list of forms you have defined. One of the columns contains the shortcode syntax you would use to place the form on a page, post, or widget.

      You can use standard text widget to hold the shortcode and put a form in a sidebar or footer. Make sure the setting to enable shortcode processing for widgets is turned on.

  19. I should say there’s no wpgforms shortcut in my page and i cant just add it

  20. how can I write the headings in bold

    • Which specific headings are you referring to? You can change just about any HTML element with CSS. The challenge can be finding the right selector but once you do, formatting the text is pretty straight forward.

        • There are a couple steps:

          1. Enable Custom CSS: Dashboard > Settings > Google Forms – look for the checkbox to “Enable Custom CSS”
          2. Add your Custom CSS to either the Custom CSS field on the settings page (applies to all forms) OR on the page where you defined the form (applies to only that form).

          In you case, add this CSS to have the field headings in bold.

          div.ss-q-title {
          font-weight: bold;
          }

  21. Hello Mike
    Thanks for your plugin and your time. It works great.

    In my site:
    http://furchi.cl/juridica/?wpgform_qv=61

    Each choice in my multiple choice fields on a my Google Form are showed in two lines (one for the option choice and the second for the choice description).. How can I fix this.

    Second, is it posible to change the color buttons (Next, Previus, Submit) when mouse is on them (hover)?

    Thank you very much.

    • Fixing the line breaks between the inputs and their labels is pretty easy, make sure Custom CSS is enabled and add this the Custom CSS section of your form definition.

      div.ss-form span {
      display: inline;
      }

      As for the buttons, it would be pretty easy to do with CSS Id selectors. Something like this would work:

      #ss-submit {
      background-color: pink;
      }

      Use a tool like Firebug to inspect the elements you want to customize and it will also show you the existing CSS so you’ll know which rules you’ll need to modify.

  22. When I use .ss-q-title {color: rgb(111,174,239); font-size : 1.1em;}
    to change the color of the Questions, and also:

    div.errorbox-bad div.ss-item-required label {
    color: red;
    }

    to highlight missing questions, the questions no longer turn red, only multiple choice options do. Any help?

  23. I have installed the Google Forms plug-in and for each form, I have set ‘Send email upon form submission’ to On and added an email in the ‘Email address send submission email to’ box.
    I have also set the ‘Send email to end user upon form submission’ to On.
    Neither of these emails are going through.
    I have all admin privileges, I am saving everything and I am certain my server is configured with mail capabilities as these functions work otherwise.
    Any other thoughts on why?

  24. Hi Mike – thanks for your fast response. Please don’t spend time on this as my client has changed their mind about having this feature on. I am only using our domain emails, which is fine.
    I have another question – when the confirmation email is sent to my sendto address, is there any way to log the Responses within that email?
    I am thinking this must be a function of Google Forms, most likely. But I wanted to know if you had already configured this some how.
    Thanks so much for all your hard work.

    • The plugin has a “logging” feature of sorts which can be activated on the plugin settings page (Dashboard > Settings > Google Forms). Once enabled, you will see an entry each time a form is submitted from the WordPress site in the Form Submission Log (Dashboard > Google Forms > Form Submission Log). I don’t think this is what you are asking for but I don’t fully understand your question either.

  25. Hi Mike

    Thank you for great plugin, sadly I can’t manage to get the asterisk in the same line as the title. http://freddys.ch/banquett/, I use Divi theme.

    I tried the following recommendations:

    div.ss-form-container label {
    display: inline !important;
    }
    span.ss-required-asterisk {
    display: inline;
    }
    div.ss-q-title > label {
    display: inline;
    }
    label.ss-q-item-label br {
    display: none;
    }
    div.ss-form-container label {
    display: inline !important;
    }
    div.ss-q-title > label {
    display: inline !important;
    }

    Don’t display the required message
    This does not work either

    div.ss-form-container div.required-message {
    display: none !important;
    }

    How to manage the spacing, padding/margin?
    This does not work either

    div.ss-form-container p { margin: 0px; }
    div.ss-form-container br { margin: 0px; }
    div.ss-form-container p { padding: 0px; }
    div.ss-form-container br { padding: 0px; }

    div.ss-form-container br { display: none; }

    I assume that somehow I do something wrong, the -Enable default WordPress Google Form CSS -Enable custom WordPress Google Form CSS are checked.

    Thank you very much
    Jakob

    • If you look at the HTML source for your page, on or about line 264 you will find a PRE element which is wrapping all of your form content. I believe this is the source of your problem. Do you know why it is there?

  26. Hello,

    Thank you very much for such a great plugin has been very useful.

    I have several problems with CSS, you do not get to see properly, and need not have the blank and be all fields one below the other.

    Apart from that I get text in German and no reason why.

    The URL is http://www.tecnomak.es/contacto-2/ and the form should be how http://www.tecnomak.es/contacto/

    If you could help me out I would greatly appreciate it ..

    Thank you.

    • I would do a couple things:

      1. Enable Custom CSS and the Default CSS (there is a setting for both on the Dashboard > Settings > Google Forms page). The default CSS shipped with the plugin may help here, it is hard to know for sure but the Custom CSS will definitely need to be enabled to resolve the problem.
      2. To fix the German language problem, you need to add the Google Docs parameter to force it to Spanish to the Google Form URL. There are some examples of this here and here.
  27. Hi,

    Thank you for responding quickly tant …

    Only when active form looks custom function, if I put in default form does not appear …

    Now I have left both active but do not see anything .. http://www.tecnomak.es/contacto-2/ to see if you can find the error because the error can not lay out the form.

    Thank you for the language issue, already solved.

    Know how I can remove the text now reads “This question is compulsory.” ??

    Thank you.

  28. New version of google forms doesn’t work.

  29. Is there a way at submission to redirect to a custom confirmation page, or at least get rid of the “google forms”-related text on the submission confirmation?

    • You can do both. If you look through the comments here or visit the plugin Support Forum on WordPress.org, you’ll find a number of people asking the same question. The CSS to hide the “Google confirmation content” is pretty simple.

      One of these two options will likely do what you want:

      This will hide all of the content:

      div.ss-resp-card {
      display: none;
      }

      This will hide some of the content (e.g. edit your response – which isn’t supported):

      div.ss-opt-actions, div.ss-response-footer {
      display: none;
      }

      The confirmation page is an option when you set up the form within WordPress. There is a radio button to enable it and a field to fill out with the URL you want to show after the form is confirmed. The custom confirmation is dependent on Javascript so if you have any Javascript errors on your page then it will fail to fire.

    • To get your desired formatting, the Google Forms plugin almost always requires you to define Custom CSS so the form will match the rest of your WordPress site. This is by design as there is no one-size-fits-all solution for all WordPress themes.

  30. Many thanks for a great work 🙂 Is there any way to pass a field in the URL? I need customer numbers pre-filled (each customer a different number), so that they don’t have to do it manually?

  31. Hi Mike, after embedding the form the submit botton/text is not clickable? I also get a message that JavaScript is not enable but I checked that it is?

    • Has your form been downgraded? In order for the plugin to work you need to make sure the form is from the older version of Google Forms. See this post for more details. I made a change not too long ago that tries to detect when the form is the wrong version and display a warning on the Dashboard when the form is defined in WordPress.

  32. I don’t understand how to edit the CSS. Any change I make doesn’t show up on the actual form. I’m fairly new to coding, and am likely missing some detail about specifying classes.
    I tried copy and pasting the code into the custom css page and making the desired changes, but nothing is working.
    Please help

  33. Thanks for fast reply. I do. f

  34. Could you perhaps post a sample of what (simple) custom coding looks like in the “Edit Google Form” page, including the class fields or whatever appropriate box is needed, or in the settings in the custom CSS field? This would help greatly, so that I know I’m putting things in the right spot.

    • You might use something like:

      div.ss-q-title {
      color: red;
      }

      Now the caveat there is that your theme isn’t doing something which makes the CSS selectors tricky to figure out. Instead of doing it with trial and error by saving the CSS in the settings, I use a tool like Firebug (my favorite but it has been deprecated) or Chrome’s Inspector to look at the CSS you want to modify. Both tools let you test CSS by adding new rules on the fly, changing settings, etc. By defining CSS this way, you can mess around with it until you have it the way you want it, then copy and paste it into the plugin settings.

  35. So just to be clear, if I were to copy and paste that code into the CSS field in the Edit Google Forms page, changes should appear? Without adding any other code anywhere else?

    • Maybe. There is no 100% certain one-size-fits-all CSS solution because every WordPress theme is slightly different. Themes have different CSS, some have fancy Javascript which modifies the DOM affecting the look of the form, there are litterally thousands of possible CSS solutions. If you want to post a link to your form and let me know what you’re trying to do, I can take a quick look and offer you one or two CSS rules to get started.

    • The bad API keys appears to be coming from a Twitter widget and has nothing to do with Google Forms.

      I don’t see a form on the page you sent event though the URL appears to be a Google Forms permalink style URL. My guess is the Twitter API issue is causing WordPress to never complete the page generation so the form isn’t rendered. I do see the “wpgform” CSS link in the header when I look at the page source which means the plugin expected to generate page output.

Leave a Reply