Display captcha using sumbit popup

[sstoney200]

I use formtools to process my contact form and it all works hunky dory on page: http://www.for-rent-nerja.com/contact.php (it also has javascript to check for empty fields etc)



Problem I have now is I need to squash the enquiry form considerably to fit on every page like so: http://www.for-rent-nerja.com/apartm.../fr1150za.html


which means I no longer have the required space for the captcha.

I was wondering if anyone knows of a solution that will enable me to open the verification in a popup window once the submit has been clicked?

[nikomaster]

You need javascrip code, try this. You need jquery library

//Shows a ,modal windows
$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
	
	    
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

Your captcha code would be inside a <div class="window">. This code shows a pop up window.

[sstoney200]

Originally Posted by nikomaster

You need javascrip code, try this. You need jquery library

//Shows a ,modal windows
$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
	
	    
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

Your captcha code would be inside a <div class="window">. This code shows a pop up window.

Hey mate, thanks for your reply, really appreciate it!

So I have this in my head:

<script type="text/javascript">

//Shows a ,modal windows
$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
	
	    
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});
</script>

are you then saying it should be as simple as inserting this within my form in the body:

<div class="window"><?php ft_api_display_captcha(); ?></div>

?

I'm testing it out on page http://www.for-rent-nerja.com/contact5.php but that doesn't seem to be either hiding the captcha nor displaying it in a popup on submit. Am I overlooking something?

[RiptideTempora]

EDIT: Nevermind. Misread.

[sstoney200]

Oh maaan!

Over the last 3 days (whilst I've been away over Easter) I've had about 100 spam enquiries sent from my page http://www.for-rent-nerja.com/property.php

As discussed earlier in this post, the enquiry form (bottom right) is too small for captcha display so I left it without and for past few months had vary few problems with spam. The bots were obviously finding my main contact page at http://www.for-rent-nerja.com/contact.php and since this page does have a captcha were heading elsewhere. Now they've found my property page and have been bombarding me with shiite! Does anyone have any alternate methods I would be able to use to eliminate this spam? Or as discussed earlier, a method for displaying the captcha found on the main contact page as a popup upon clicking of the enquiry submit?

Really would appreciate some help! PESKY SPAMMERS!