Part 2: The modal skills survey form

 

Screen Shot 2014-02-03 at 7.01.14 PM

Pushing the boundaries

 

Having successfully linked the rating scales in my web page to the Wufoo database, I was really pumped! I had figured out some rudiments of a programming language and successfully integrated two web sites together. The next task was to provide access to the survey form from within my website.

 

Given that the HTML Anchor  <a href=”url”>Link text</a> is one of the most basic and essential components of web design, it seemed like this part would be pretty easy. So my first task was to simply provide a link below the Skills rating scales that would link to my survey form. Within a minute or two I had it configured. Job done.

 

Except the result was to simply place the survey in a new tab in my browser.

 Screen Shot 2014-02-03 at 10.08.30 PM

 

While this works and is simple and effective, there are a few things that I don’t like. First of all, the tab displays the URL that points to the Wufoo system. Second, the tab is a bit confusing for the user. Being redirected to another page in a new tab is a bit disorienting. Third, when finished filling out the form the user is left in a different website with no clear and direct path back to the original website. Fourth, there is no simple way to provide a password prompt before showing the window.

 

I would much prefer the content to appear in a pop-up over my website. But pop-ups have been largely banned and most web browsers block them… And so, my research began… What I discovered was a plugin called Alligator Popup, which would allow me to achieve exactly what I wanted. So I installed it and used a simple one line Shortcode to call the popup.

 

Screen Shot 2014-02-03 at 10.22.28 PM

 

Now this is clearly much better. The only real downside is that the contents are in a window which can be moved outside the space of the original site. In other words, if you have a large monitor and web browsers are windows that only take up part of the screen real estate, then the window could pop up almost anywhere. As a solution it was better, but it was not quite what I was looking for. On top of everything else, I still had the problem of the password form. I realized that I really needed to make this the next focus of my research.

 

Essentially, I needed a pop up modal window that would prompt for a password and then upon successful authentication, take me to the survey form. By the way, modal refers to window preventing anything from happening in the background until the window is closed. So, my search began in earnest for a way to provide password authentication.

 

Naively, I suspected that there was already a plugin that I could install that would take care of most of the headaches. But after installing and playing with several, it became clear this was not going to work. However, in my searches I found a plugin called Easy Modal that promised to provide a simple modal window that I could configure the contents of. This seemed like a good option, so I downloaded and installed it.

 

Keenly, I ran through the basic configuration of an empty modal window.

 

Screen Shot 2014-02-03 at 10.41.04 PM

 

The nice thing about a plugin like this is that a lot of the heavy lifting is done for you. You simply configure the window through a series of menus and then use a Shortcode (one line of code) to call it. I eagerly created the form at the dimensions I was looking for and inserted a button to call the one line of code in my “About Me” page. When I launched a browser and clicked on the button nothing happened. Nothing at all!

 

This is web development. One step forward and then nothing. Clearly something is not configured properly. A visit to the support site for the plugin and there were a lot of helpful suggestions. Most important of which was to have a Javascript library installed. After this was done I once again returned to the web page to discover that nothing happened. Back to the support site and one more suggestion… turn on a setting to make the modal available throughout the site.

 

Suddenly, I had a modal window appear. Cool! Now we’re getting somewhere. Now all I need to do is get the form from Wufoo to appear in the modal window. Should be pretty simple. The recommended way to achieve this is to use an iFrame. Fortunately, Wufoo has all the code to call an iFrame available to easily copy.

 

Screen Shot 2014-02-03 at 9.57.09 PM

 

This is really simple! Just copy the code from Wufoo and paste it into the settings for the modal window. Except, it didn’t work.

 

 Screen Shot 2014-02-03 at 11.00.35 PM

 

The height of the iFrame is truncated at 150 pixels. Hmmm, maybe it’s a bug. I visit the support site of the modal plugin and post a message. I also search the web to no avail. Then I have a brainstorm. Create a page in WordPress and try the code there. This will determine if the problem rests with the Modal plugin or the WordPress theme.

 

The results are identical in the page which means another trip to the support forum for the plugin to say “it’s not your fault”. Then a trip to the support forum for the theme vendor to solicit advice. I next try all manor of Javascript and JQuery code to resolve the problem. I try resizing the iFrame programatically, but without any luck. The theme vendor suggests entering CSS code into the theme CSS file which also doesn’t work. I finally discover a Javascript library supplied by the theme vendor with a function called fixElements() that explicitly strips the height attribute from the iFrame class! It also removes it from img, embed, object, and video. By removing the iFrame from the list my popup now works! Yeah!

 

Then I find another problem. As I scroll up and down the page the menu bar appears overtop of the modal window.

 

Screen Shot 2014-02-03 at 11.11.51 PM

 

Emboldened by my recent success with the iFrame height, i immediately go to work looking for the CSS file that contains the setting to control the Z order. The Z order controls which object will be on top. I use the “Inspect Element” option in Google Chrome to find the Z order setting for the menu bar and discover they’ve set it to 999999. This is a bit outrageous! It doesn’t take long to find that a CSS file supplied by the modal vendor where I can set the Z order for the Modal window to 1000000. Sure enough, this works!

 

Now comes the fun part. I’ve realized that the simplest way to provide a password is to use a form password control on in the modal window and write the Javascript code to validate the response.

 

Click here for Part 3, where I’ll share the complex and frustrating world of Javascript, jQuery, and CSS.

 

 

 

 

 

 

 

 

 

 

 

Leave a comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>