Google Forms v0.58-beta-1 available

This afternoon I posted a beta release of v0.58 to address a problem reported in the WordPress Support Forum.  The problem arises when the answer for a checkbox or radio button contains the apostrophe character.  This releases fixes the problem but needs testing.  I did some testing using the form which was having UTF-8 issues and all seems ok.

Google Forms Beta (524 downloads)

24 thoughts on “Google Forms v0.58-beta-1 available

  1. Hi Mike,

    I have installed WordPress Google Form Version 0.57 to my WordPress site to display a multi-page Google Form I created, using the new Google Forms.

    You can find the form, hosted here: http://www.glenburniescholars.com/apply/apply-online/

    The form can be found here:
    https://docs.google.com/forms/d/1-wFlfTlMY0G4RePSUxTIfsHQp4Jww0aUQJs9uu6Yqu8/viewform

    When I add the form, every question that was made “required” in the form, automatically displays the text “This is a required question” under the field, as if the user tried to move forward without responding to required questions. What results is a ton of unnecessary text within the form, which makes it confusing and very long.

    The code I am using is this:

    [gform form='https://docs.google.com/forms/d/1-wFlfTlMY0G4RePSUxTIfsHQp4Jww0aUQJs9uu6Yqu8/viewform']

    Assuming this gets fixed, this is an awesome way to display my form on my site. Thanks for your help!

    Greg

    • The answer to both questions is yes but I will need to be in front of my computer to answer them. Unfortunately I can’t poke at the CSS from my iPad. 🙂

    • I would strongly recommend not using the old, and now deprecated, gform shortcode. I am not adding any new features to support the old shortcode, all new features are only available using the new Custom Post Type UI. Instead, I recommend using the Google Form menu on the Dashboard to define a Google Form as a Custom Post Type. All of the values, and more options, are available from the UI when you define the form this way.

      Additionally, based on your description of wanting to use validation, you may want to check out the Advanced Validation features available when you define a form using the UI.

  2. Hi Michael,

    Good news… I was able to solve this, finding where you solved it for another user, in another thread. 2 questions follow:

    1 – I am using some Google validation in the form, and no other validation. I have noticed in the only instance where I am (a field about supplying an email address), the text that would be displayed if a user provides an invalid email address, is already listed – and under the field. Is there a way I can remove this?

    2 – I seem to have lost the bold aspects of the questions that was present in the Google form. is there a bit of css I can add to the custom css in the plugin that will add this back? If not, do you have a workaround form my theme?

    Thanks,

    Greg Skipper

  3. Hi Mike,

    I was able to manipulate the Google form to eliminate the custom error text for an email address from appearing by replacing the text with a space. That single character eliminated Google’s default error text and replaced mine with, well, nothing. So now the only error text that appears is in the plugin itself, which is fine. Working well on my PC in Chrome.

    However, when I tested this on my iPhone, I was able to go through the form without entering a valid email address.

    I further tested this by emailing myself the Google Form link and going through the Google hosted form on my iPhone. With Google email validation on, it wouldn’t let me move onto the next step without entering a valid email address.

    Q: Can you address this for iOS? I expect several responses from students on their phones. not sure what happens on Android.

    More questions, as I wind through this. I found a thread where somebody wanted to increase the size of their fields. I do too, so I inserted the CSS you suggested:

    div.ss-form-entry > input { width: 400px; }
    div.ss-form-entry > textarea { width: 400px; }

    I changed the 400 around until I found a width I was happy with. This worked great until I again tested this on my iPhone and then found that the fields stretched beyond the border of my site, thus stretching outside and off of the screen.

    Q: Is there a way to do so that it is also mobile optimized for iOS? Again, not sure about Android.

    Last but not least, I still want to change the font of the questions being asked in the form to bold. Just wanted to keep that one open too.

    Q: Is there a bit of css I can add to the custom css in the plugin that will add this back?

    Thanks for your help! Really enjoying getting my site looking nice!

    Greg

    • Greg –

      I will answer a couple of these now, others later today or tomorrow when I have some more time. Busy weekend here in NC.

      Regarding the difference in what you see on your iPhone versus using the browser on your computer, it is likely because you’re using a responsive WordPress theme. If you only want to modify the width of the fields on the iPhone OR you you want them to be different on the iPhone (or other mobile phone), the iPad, and when using the computer, you’ll need to employ some “Responsive Design” CSS.

      /* =Responsive Structure
      ----------------------------------------------- */
      @media (max-width: 1023px) {
      }

      @media (max-width: 650px) {
      }

      @media (max-width: 450px) {
      }

      @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      }

      /* =Print
      ----------------------------------------------- */
      @media print {
      }

      This is from a TwentyTen child theme I am use. To do you want you want, you’d need to define the appropriate CSS within the section which affects the iPhone (it is the 650px for horizontal and 450px for vertical) sections. The media queries will only apply the CSS to devices which match the query.

      I will get to your other questions later tonight (I hope).

    • To change the weight of the font in the questions, use the following custom CSS:

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

      I think this is the last of the questions you asked, let me know if you need any further help.

  4. Hi Mike,

    Thanks for your replies. I believe I have updated to the Custom Post, as you suggested. Is it possible for you to look at the code on my site to confirm I did what you meant? Seems to be working fine on my end.

    Bold = done.

    In order to use advanced validation, do I need to install jquery? If so, is there a plug-in for this? If there isn’t a plug-in, I am not sure what I am supposed to do to enable this.

    I am a little confused re: your iPhone/iPad/tablet/etc code above. Do I need to write a line of css for every possible device, or do I use @media as you show above? How were you able to differentiate between height and width in the code above?

    Sorry if these sounds silly, just not following. I am making a lot of progress, however. I switched over another form (my old contact page) to a your Google Form as well. Looking good!

    Thanks again,

    Greg

    • For advanced validation, you do not need to install jQuery. WordPress uses jQuery all over the place and WordPress Google Form also uses it quite a bit to manipulate the form content so it can be submitted to Google. To use the Advanced Validation functionality you need to fill out the fields on the Form Editor screen appropriately. Finding the “name” of the form element is the hard part, you have to look through the HTML code for the form to find it. I tried to outline how to do it in this post. There is a while section of the Form Editor toward the bottom of the screen that deals with validation. You can add multiple fields and define the type of validation check which should be performed for each field you add.

      For the iPhone CSS code, take a look at this form using your computer and your iPhone. You’ll notice that the size of the text box and text area are different on the iPhone than they are on the computer. To do this I entered the following in the Form CSS field on the Form Editor screen:

      /* =Responsive Structure
      ----------------------------------------------- */
      @media (max-width: 1023px) {
      }

      @media (max-width: 650px) {
      textarea.ss-q-long, input.ss-q-short {
      width: 300px;
      }
      }

      @media (max-width: 450px) {
      textarea.ss-q-long, input.ss-q-short {
      width: 200px;
      }
      }

      @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      }

      /* =Print
      ----------------------------------------------- */
      @media print {
      }

      If you look at the page source for that form you will see the above CSS rendered just above where the Form’s HTML code begins.

  5. Thanks. To clarify, I need to set the validation in both the Google Form and within the Advanced Validation portion of the Form Editor screen, correct?

    • No, you shouldn’t have to do anything on the Google side. The addition of validation on the Google side is fairly recent, some level of validation, mostly for CAPTCHA, has been in WordPress Google Form for a long time.

  6. It seems that way. jquery validation only seems to work if I established it in the Google Form itself, unless I am missing something.

    • In looking at the HTML source for your page, it appears you don’t have Validation enabled for your form because the jQuery which runs the validation isn’t present. You need to enable valiudation (radio button in the Google Form Validation section) and then define the fields you want to validate and how they should be validated. When set up correctly you’ll find something similar to this in the WordPress Google Form jQuery script which is added toward the bottom of the document:

          $("#ss-form").validate({
              errorClass: "wpgform-error",
              rules: {"entry.1666054688": {email: true},"entry.327623672": {url: true},"entry.1673352082": {range: [25,75]},"entry.1743514137": {min: 100},"entry.1614601191": {max: 1000},"entry.641107866": {date: true},"entry.108349007": {dateISO: true}        ,
      				"wpgform-captcha": {
      					equal: 8+0
      				}
              },
              messages: {
                      "wpgform-captcha": "Incorrect answer."
              }
          }) ;
      

      Without the above code the Validation will never run. You don’t need to insert it, the code is automatically generated based on the settings for the Google Form when it is rendered.

  7. OK, last question, then heading to bed. I have noticed on a multipage form, if I have enabled jQuery in the Advanced Validation, and try to go back, say from page 3 to page 2, I cannot unless I complete all required fields in page 3. seems like I should be able to go back, without completing required fields, just not go forward. Is there a workaround for this in the Form Editor screen I need to iimplement? Thanks!

    Greg

    • This is expected behavior. The Advanced Validation is all done client side (in your browser) which is faster and doesn’t require the page to be re-rendered. The validation must script “pass” before the submit button (on Google Forms the “Back” button is nothing more than a Submit button with different text on it) is enabled.

  8. Sorry, should have clarified. I tried to implement the Advanced Validation on the contact page (it’s just a much shorter form, so it is easier to play around with): http://www.glenburniescholars.com/contact/.

    So here is what I have done.

    – Eliminated “Required Field” in the Google
    – Eliminated “Validation” in the Google
    – Turned “Validation” on in Advanced Validation in WordPress
    – Set all fields as “Required Field” in Advanced Validation in WordPress Google Form
    – Set email field as “Required” and to be checked as “Email” in Advanced Validation in WordPress Google Form for email field only

    It seems like I lost the following:

    – Required Questions are no longer Marked as Required
    – Required Question Validation doesn’t work
    – Email Required Validation doesn’t work.

    I noticed this when looking at the source code:

    $(“#ss-form”).validate({
    errorClass: “wpgform-error”,
    rules: {“758986729″: {required: true}
    ,”1752809608″: {required: true}
    ,”556568820″: {required: true}
    ,”116534318”: {required: true},
    },
    messages: {
    }
    }) ;

    So 2 things there, it seems consistent with the code you have above, but isn’t working. Also, it doesn’t seem like it is picking up both the required and email validation for the email address question.

    Greg

  9. Update! Just added “entry.” to the entries in Advanced Validation in WordPress Google Form – and this appears to be working now.

    I removed “required” for the email field and only applied “email”. That seemed to accomplish both at the same time – made it required and required that it was a valid email address.

    Required fields are not known ahead of time, however. Fields are not identified as being required until submission.

    Is there a workaround for this?

    • For the required fields to have the “required” indicator you will still need to note them as required when defining the form on the Google side. That will add the asterisk and more importantly, cause Google to emit the proper CSS class as part of the HTML.

  10. ah ha. making progress here.

  11. Hi Mike, another question as I add validation. How do I validate a question which is answered by selecting a single radio button (on the Google side, the Question Type would be called “multiple choice”)? It doesn’t appear as though the question itself has an “entry.” in the source. It is labeled in the source code as “entry_”, with every possible answer being labeled as “entry.” I don’t want to make every possible answer required, but I do require that a user submit an answer. Do I use the number following “entry_” or do I need to add a line of validation for every “entry.” answer? An example would be the question “Have you been accepted into this school for the 2014 – 2015 academic year? on page 3 this form: http://www.glenburniescholars.com/apply/apply-online/.

    • If you make the question required on the Google side and enable validation, the question will be flagged as part of the validation process and the Submit button won’t be enabled. You don’t need to add any special validation rules for this type of question, simply marking it as required will be sufficient.

  12. Thanks. Apparently I have been wildly overcomplicating this.

Leave a Reply