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.
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.
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.
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!
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.
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.
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.
Then I find another problem. As I scroll up and down the page the menu bar appears overtop of the modal window.
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!