Google Forms Date and Time Fields

At some point Google added support for Date and Time fields to Google Forms.  When building the form, the Question Type now includes the “Date” and “Time” options.  These are pretty handy options because requesting dates and times from users is a very typical requirement.

GForm_SS_83Earlier this week a user posted on the WordPress Support Forum asking why their date field didn’t look the same on their web site using the plugin as it did when looking at the form within Google Drive.  The user assumed the plugin was doing something to change the form inputs.

The Google Forms plugin does not add or remove input fields (except the optional CAPTCHA field) – it simply retrieves the HTML from Google, strips of the content which falls outside of the form itself, and renders it within the WordPress context.

So why would the input fields be different when the form is viewed within WordPress versus viewing the Google Drive version of the form?

GForm_SS_85

Google Form in WordPress

GForm_SS_84

Native Google Form viewed in Firefox

Native Google Form viewed in Chrome.

Native Google Form viewed in Chrome.

As seen in the images above, the native Google Form is rendered differently in Google Chrome than it is in Firefox.  Having done some work with jQuery Mobile I know that Chrome recognizes HTML5 input tags where as Firefox does not.  I suspected this was the source of the problem.

I ran a couple of tests playing with cURL commands and different user agent strings and sure enough, Google is returning different HTML for different user agent strings.  I quickly added the user agent string to the parameters I was passing to the HTTP API to retrieve the HTML from Google and sure enough, the form, when viewed in Chrome, now matches what is seen when viewing the native form.

GForm_SS_87

I have committed the change to the plugin to pass the user-agent through the HTTP API.  This change will allow Chrome users to see the forms as intended.

What about other browsers?  Unfortunately the trick Google uses to add the date picker to the forms when viewed in Firefox, IE, or others which don’t recognize HTML5 input, or that Google thinks don’t support HTML5 input, isn’t easily passed through the HTTP API.

For now, I don’t see any simple way to solve this problem.  Over time it should go away as more browsers support HTML5 input types but for now, it is a limitation for non-Chrome users.  I fully expected it to work on the iPhone as the iOS browser is fully HTML5 compliant for input but it too is sent separate select inputs for the various fields.  I am not sure why, but it appears Google is treating their own browser differently than all other browsers.

The user-agent addition will be added to the next version of the plugin which will go out shortly with another validation bug fix.

 

 

Email Users with WP Better Emails

I recently worked with a user who reported Email Users wasn’t working correctly in conjunction with the WP Better Emails plugin.  The user posted a code sample he had used to correct the problem.

Looking at the code sample and his description of what WP Better Emails expected to receive as input, I added a new filter, mailusers_html_wrapper, that when present, would not add the default HTML wrapper around the email content but instead would expect the filter to perform the desired operation.  This new filter was released in the 4.7.2 version of Email Users.  There is an example usage of the new filter in my post announcing Email Users 4.7.2.

Shortly after releasing 4.7.2 I was contacted by the user again letting me know the filter didn’t solve the problem.  Confused, I download WP Better Emails to try and figure out what could possibly be wrong.  It took me the better part of two hours to trace through the WPBE code and figure out what it is doing – it turns out, WPBE wants emails to be “plain text” and not HTML formatted.  This is counter intuitive and had me looking in the wrong place for quite while.  It seems backwards to me but that is how the WPBE plugin works.

So how to make WPBE work with Email Users?  It turns out, it isn’t that hard at all.  There is a WordPress filter, wp_mail_content_type, which influences wp_mail(), the function WordPress uses to send email.

If a wp_mail_content_type filter is defined to force the content type to “text/plain”, Email Users and WPBE will work together correctly.  Below is the filter I defined and tested the interaction of Email Users and WPBE with.  Place this filter in your theme’s functions.php file or somewhere else where it will be loaded.

add_filter( 'wp_mail_content_type', 'mailusers_set_content_type' );
function mailusers_set_content_type( $content_type ) {
return 'text/plain';
}