PHP

WordPress Google Form v0.13 fixes “back” bug

0

I have just committed v0.13 to the WordPress plugin repository.  An update should appear in your WordPress Dashboard fairly soon.  This update fixes a problem when using multi-page Google Forms which have radio buttons and check boxes on them.  When the “Back” button was selected to view the previous page of the form, the previously selected values were not retained.  This bug has been fixed and the “Back” and “Continue” buttons now work as expected.

WordPress Google Form v0.12 is out

0

Yesterday I committed and tagged the v0.12 release of my WordPress Google Form plugin.  It is available from the WordPress plugin repository.  The main feature of this release is support for multi-page Google Forms.  The changes made to support multi-page forms should also enable use of fields that have optional answers.

There is still some leftover code from the old validation process that I was reluctant to completely remove until I know for sure this new architecture is working in more use cases than I have to test with.  There will likely be another update that is nothing more than a code clean up in a couple weeks unless someone reports a problem.

wpGForm v0.11 beta

2

I am currently running a beta version of wpGForm v0.11 here on my site.  The big change for this version if the support for multi-page Google Forms.  You can see how they work using my Sample Multi-Page Google Form.

I am looking for some people to test this version and provide feedback.  If you can check it out and provide some feedback I’d really appreciate it.  There are quite a few changes in this version due to the rearchitecture required to support multi-page forms.  There shouldn’t be any changes to what is actually rendered for the user.

This version also fixes the confirmation page bug that has been present when a custom confirmation page wasn’t specified.  The behavior of the custom confirmation page is slightly different too in this version.

WordPress Google Form (108)

WordPress Google Form bug fix

4

In the process of trying to solve the multipage Google Form problem, I found a bug with the “Confirmation” page.  When a custom confirmation page isn’t supplied, the plugin is supposed to use the default Google conformation page.  It currently isn’t, instead the page the form is on is rendered again.  This is incorrect behavior and I’ve fixed it in my development thread and it will appear in the next release.

Multipage Google Forms – no solution yet

0

Yesterday I had some time to look at supporting multipage Google Forms.  Unfortunately it doesn’t look like it will be possible because of the way multipage forms work.  As you work through a multipage form Google adds hidden values to each successive page to facilitate moving forward and back without losing any data.  Pretty standard stuff for a “wizard-like” form implementation.

The problem is the way the plugin is implemented, the HTML code for the form is extracted and then re-processed before being added to a page within WordPress.  What I’ve implemented works fine for a single page form, actually, in my opinion, it works pretty well.  However, detecting the page transitions and obtaining the hidden form fields either isn’t easy or isn’t possible.  Right now I am leaning toward the later because the hidden fields are generated based on the prior page (Continue or Back) form submission.

What I have successfully made work is to use the “embedded” version of a Google form within a WordPress page.  It works but aesthetically it looks awful.  What I am playing with right now is some jQuery to try and manipulate the embedded form to use the styling from the site instead of from Google.  We’ll see how it goes ….

CSS for the WordPress Google Form Submit button

3

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 {
    background-color: pink;
}

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

Read-Only Google Forms?

0

This morning I added a new feature to my WordPress Google Form plugin.  You can now set a form to be ‘read only’ using the readonly=’on’ attribute in the shortcode.  This option, when turned on, use a little snippet of jQuery to disable all of the form elements.

[gform form='<long_url_to_your_google_form>' readonly='on']

I suspect your immediate reaction to this is “why would I want my form to be read only?” and it is a logical reaction.  After all, the whole point of creating a form is to collect data right?  The purpose of some forms, in fact I’d bet it is the case for most forms, is to collect data for some period of time and after a certain point (e.g. 5:00 PM on October 31), there is no reason to collect data any longer.

Imagine a sign up sheet for working the snack bar at your local High School football game.  Once the game has happened, there is no value in letting people sign up any more.  The readonly option will allow you to retain the form as part of your WordPress web site while preventing the collection of any more data.

I need to do little more testing before I release an update but so far, it looks pretty good!

Note:  The more I think about this, I may want add an expire option after which the form will automatically become read only.

Hiding bullets on a Google Form

10

Because the multiple choice fields on a Google Form are rendered as an unordered list (with a UL tag), by default, the form will appear like this:

 

 

Add this CSS to either the theme or via the wpGForm custom CSS settings:

div.ss-form-entry>ul {
    list-style-type: none;
}

After adding the above CSS it will appear like this:

Hopefully this will help you make your Google Forms look the way you want within WordPress!

 

 

 

 

 

How to have a Meta Box appear before the Visual Editor

0

I am working on a new theme where I have defined a Custom Post Type.  This is my first time working with Custom Post Types and I must say they are pretty slick.  I wish they had existed back when I first started working on my Swim Team plugin!  I have far too much invested in my Swim Team plugin so I’ll stick with the custom database tables but for this new project, CPTs are working great.

Once I got my CPT defined and basically working, I wanted to add some custom fields to it using a Meta Box.  There are numerous articles that outline how to do it, I referenced this one quite a bit and found it very helpful.  In my instance, the Meta Box that holds all of the custom fields I want to collect is more important that the Visual Editor is so I wanted it to appear higher on the screen.

After poking through the Codex and number of Google searches, it appears that doing what I want to do isn’t native WordPress functionality.  I did however find this post which outlines an idea for moving the Meta Box so it appears on top of the Visual Editor.  Awesome.  Exactly what I was looking for. Except the code fragment didn’t work.  After looking at it, I decided the idea was sound but the implementation wasn’t correct or at least wasn’t correct in my application.

I tweaked the Javascript to make sure the document was ready before rearranging the Meta Box and Visual Editor and got the result I was looking for.  Here is the code I am using in my functions.php file.

/**
 * Set up a footer hook to rearrange the post editing screen
 * for the 'CPT' custom post type.  The meta box which has all
 * of the custom fields in it will appear before the Visual Editor.
 * This is accomplished using a simple jQuery script once the
 * document is loaded.
 */
function CPT_admin_footer_hook()
{
    global $post ;

    if (get_post_type($post) == 'CPT')
    {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#normal-sortables').insertBefore('#postdivrich') ;
    }) ;
</script>

<?php
    }
}

/**  Hook into the Admin Footer */
add_action('admin_footer','CPT_admin_footer_hook');

Hiding a Google Form’s Title

0

Since a WordPress page or post will have a title, there is a good chance the Google Form’s title is redundant.  If hiding the title from the Google Form is desired, the easiest way to do it is with CSS.  The title on a Google Form is an H1 element  which is assigned the class ss-form-title.  To hide the title, we add the following CSS to either the theme’s CSS or to the CSS overrides available with the WordPress Google Form plugin’s setting menu.

h1.ss-form-title {
    display: none;
}

Using my Sample Form, here are the results of adding this CSS to the plugin settings.

Form before adding CSS

Adding CSS to wpGForm settings

 

 

Form After Adding CSS

WordPress Google Forms include quite a few CSS classes so using this technique, the appearance of the form can be customized quite a bit.

Go to Top