eForm and Colorbox - any success with validation and thankyou message?

863 Posts

Lucas Reply #1, 13 years, 8 months ago

Has anyone succeeded in combining eForm and the ColorBox jQuery plugin to create a nice popup contact form?

I’m half way there, in that I’ve managed to get ColorBox to load the eForm template from hidden inline html. When there are no validation issues it sends form data and closes correctly.

However (and this won’t make much sense if you aren’t familiar with ColorBox):

1) if the form doesn’t validate, the eForm default behaviour seems to reload the page with the errors in the [+validationmessage+] placeholder. This means the ColorBox popup is hidden again and the validation message ends up within the hidden inline HTML of the main page. Ideally, I want the validation message to load in the ColorBox popup, so the user doesn’t wonder why the form closed.

2) On successful submit, again the page reloads and the ’thankyou message’ is displayed on the main page instead of in the popup. It’s not the end of the world but from a usability perspective I would prefer the message to load in the popup and then be closed by the user.

Yep, I thought of iFrames...

I recognise that this could all be done by loading the form as an iFrame, as the eForm actions would be happening on the page contained within the iFrame. But to complicate things, my form fields are pre-populated with contents of the current page TVs (it’s a real estate site, and the contact form can be opened from any page). If there’s a way to send those to a generic form template contained in an iFrame then great!

*** thinking out loud - sharkbait may have a solution for passing tv values to another doc. Looking into it.

Ajax?

Here’s what the ColorBox author has to say about loading form results via Ajax. But I don’t know if it’s possible to use the jQuery forms plugin with eForm!

If anyone has come close or has any ideas, please let me know and perhaps we can work on a solution? Or if you’ve already worked it out... wink

Cheers

Luke

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 8 months ago

Not using ColorBox, but with a similar popup method I added some code to the jQuery startup script:

if($("div.errors").text() != '') {  $("#tafArea").animate({height: "330px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}); 
    }

I’ll be putting this up on my site as a demo (actually, I’ll probably use it for my contact form) later today.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

2,310 Posts

bunk58 Reply #3, 13 years, 8 months ago

Here’s my colorbox/eForm solution, see it here
1. Create a page using the blank template using something like this :

<style type="text/css" media="all">
body {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #333333;background-color: #f8f8f8;  }
form#contactForm, .success {margin: 0;padding:10px 0;}
button, select, input, textarea { font-size: 12px; color: #333333; }
.errors { background-color: #bb0009; padding: 10px; width:425px; color: #ffffff; margin: 5px 10px 5px 50px ; font-size: 1.3em;}
.success { padding: 10px; width:425px; color: #333333; margin: 5px 10px 5px 50px ; font-size: 1.3em;}
.success h3 {color: #408000;}
</style>
[!eForm? &formid=`CallBackForm` &to=`[(emailsender)]` &tpl=`CallBackForm` &report=`CallBackReport` &thankyou=`CallBackThanks` &subject=`[+subject+]`!]

2. In the template, (could use a TV or chunk within to the template) for the page with the form launch button add :

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#mybutton").click(function () { 
    $j.post("[~nn~]",        
      $j("#CallBackForm").serialize(),      
      function(data){                
        $j.fn.colorbox({ html:data, open:true, iframe:true });
      },
      "html");
  });
  
$j('.callback').colorbox({href:'[~nn~]',iframe:true, height:675, width:610});
});
</script>

#mybutton should be the id of the form submit button
#CallBackForm is the form id
nn is the id of the form page you cretaed in step 1
.callback is the class applied to the <a href> tag on the link to open the form

863 Posts

Lucas Reply #4, 13 years, 8 months ago

@bunk58 - that’s something similar to how I’m trying to do it, although I’ve not quite got it to work yet.

What does .callback refer to:

$j('.callback').colorbox({href:'[~nn~]',iframe:true, height:675, width:610});

Do I leave it as is, or should it be based on something in my own html?

Nice site by the way!

2,310 Posts

bunk58 Reply #5, 13 years, 8 months ago

Forgot about the .callback
I’ve modified my post to explain it.
Also edited the css as it wasn’t displaying the form in IE ! rolleyes

863 Posts

Lucas Reply #6, 13 years, 8 months ago

Brilliant, that’s exactly what I was looking for. Works great!

Although I just realised it stops all the other jQuery from working.... hmmm.....

2,310 Posts

bunk58 Reply #7, 13 years, 8 months ago

Remove :

var $j = jQuery.noConflict();

And swap $j to $ everywhere else in the code.

863 Posts

Lucas Reply #8, 13 years, 8 months ago

Thanks, it’s working perfectly now. I owe you a beer!

Why does removing the noConflict line... remove the conflicts with the other scripts?
I thought it would have the opposite effect.

2,310 Posts

bunk58 Reply #9, 13 years, 8 months ago

No conflict means with other JS libraries, e.g. mootools.
jQuery seems to need all it’s own functions one way or the other, not mixed.

863 Posts

Lucas Reply #10, 13 years, 5 months ago

I’m trying to take this a step further but have run into a few problems.

What I’m trying to do is have a static contact form that will be accessible for non-js users by clicking the html link, as well as a ’popup’ version using jQuery colorbox.

The colorbox version will load a different url than the static one as it doesn’t need page headers, navigation, etc.

This would be simple except that I am also passing url parameters to pre-populate the contact form using ditto placeholders on the current page. There are up to 20 links in each list and each link will have a different parameter.

Eg:

<a href="[~20~]?id=33" class=".enquiryForm">
<a href="[~20~]?id=34" class=".enquiryForm">
<a href="[~20~]?id=35" class=".enquiryForm">

I’ve arrived at this:

$(document).ready(function(){

$('.enquiryForm').colorbox({
    height:600, 
    width:800, 
    iframe:true, 
       href: $('.enquiryForm').each(function(){
            newhref = '[~153~]' + '?' + $(this).attr('href').split('?')[1];
            $(this).attr('href', newhref); 
    })
  });
});

Basically, I want to change the clicked link href from:

href="[~20~]?id=xx to href="[~153~]?id=xx

I thought I was on the right track but perhaps have messed up my syntax. When I hover over the links, Firefox is showing the correct (new) url, but when I click it I get a 404 in the iframe and the url of that iframe is: mysite.com/[Object object]

Any ideas?

Cheers guys!