mojoPortal Tips: Making a Form Pop Up a Lightbox with Form Wizard Pro

Recently, I worked on a project for a client who had a special request for custom functionality on their site. Instead of using the standard newsletter e-mail capture, they wanted an additional form that would present in a lightbox after the user entered their e-mail and clicked “submit” for the first form. I did it, using a custom form handler and some jQuery – this is how.

I started by creating the first custom form that mimic’d the standard newsletter e-mail capture format, then implemented a custom submission handler, as described here: “Implementing A Custom Form Submission Handler”. Fairly straightforward, up to the point where I had to sort out how to enable the second form to pop up in the lightbox. It’s easy enough when you’re calling a link from a page: just add the “cblink” class to your link. It’s a bit trickier when you’re leveraging a form submission, so I got a bit more creative.

Here’s the event handler method:

public override void FormSubmittedEventHandler(object sender, FormSubmissionEventArgs e)
 {
 if (e == null) return;
 if (e.ResponseSet == null) return;
string strURL = e.DetailUrl;
 StringBuilder results = new StringBuilder();
 results.Append(HttpContext.Current.Request.RawUrl);
//how to get the questions and answers
List<WebFormQuestion> questionList = WebFormQuestion.GetByForm(e.ResponseSet.FormGuid);
 List<WebFormResponse> responses = WebFormResponse.GetByResponseSet(e.ResponseSet.Guid);
foreach (WebFormQuestion question in questionList)
 {
 if (question.QuestionTypeId == 8) { continue; } //skip instruction block
string response = GetResponse(e.ResponseSet.Guid, question.Guid, responses);
//Try to extract e-mail address
 if (IsValidEMail(response) == true)
 {
 results.Append("?formemail=");
 results.Append(response);
 }
} 

 log.Info(results.ToString());
 HttpContext.Current.Response.Redirect(results.ToString());
 }

You’ll note that I captured the e-mail address, and appended it to the current page URL as a query string value; since the form by default already posts back to itself, this works out just fine. Now, for the jQuery I added to the layout.master file (this form exists in every page of the site, per the customer’s request).

<script type="text/javascript">
 $(window).load(function () {
var vars = [], hash;
 var q = document.URL.split('?')[1];
 if (q != undefined) {
 q = q.split('&');
 for (var i = 0; i < q.length; i++) {
 hash = q[i].split('=');
 vars.push(hash[1]);
 vars[hash[0]] = hash[1];
 }
 }
var url = document.location.href;
 if (url.search(/\?formemail/i) !== -1) {
 $.colorbox({ iframe: true, href: '/some-second-form-url.aspx?formemail=' + vars['a'], innerWidth: 750, innerHeight: 600 });
 }
 });
</script>

Where “some-second-form-url.aspx” is the page where I’ve inserted a second instance of Form Wizard Pro, with the second form the client requested. In essence, if the page detects the presence of the query string value “formemail”, and the value is not null, it’ll pop up the second form in a lightbox, using the Colorbox that’s already built into mojoPortal, passing the e-mail value along as a query string value. This same approach could be used to pop up a thank-you message for anyone who’s filled out a form.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + 9 =

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