FormIt, slide-out jquery contact form and submit button behaviour

☆ A M B ☆
11 Posts

oranged Reply #1, 14 years, 2 months ago

For my site I will use the slide-out contact form with jquery, demo: http://www.webfroze.com/wp-content/wf-demos/3492/

FormIt works good, form is validating and I can get confirm email. Only one problem: at pressing submit button the form slides in (supposed to do so normally)]also if it is filled out not correctly. So, submitter actually daoesn't see error messages and doesn't get visual confirmation that request form is sent successfully.

What should I add to javascript (?) to make the submit button not submitting the form and the form visible until the form is valid?

Javascript used for sliding in and out:

$(document).ready(function(){
  $("#contactslide").click(function(){
   if ($("#ctform").is(":hidden")){
  $("#ctform").slideDown("slow");
   }
   else{
   $("#ctform").slideUp("slow");
}

 });
 });

I added also "required" in <input type="text" name="name" id="name" value="[[!+fi.name]]" required/> but this works only in Firefox.

www.oranza.com

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years, 2 months ago

I used a similar slide-out contact form on my own site, and I added this to the javascript that controls the slider:

$(document).ready(function(){ 
    $("#contactArea").css('height', '0px');
    $("#cancel").click( 
        function() { 
            $("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
        }
    );
    $("a.contact").toggle( 
    	function () { 
    		$("#contactArea").animate({height: "280px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}) 
        }, 
        function () { 
    		$("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})  
    	} 
    ); 
    if($("div.errors").text() != '') {  $("#contactArea").animate({height: "330px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}); 
    } 
    if($("div.errors").text() == '') { $("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
    }        
});

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

☆ A M B ☆
11 Posts

oranged Reply #3, 14 years, 2 months ago

Thanx for reply. I've tried to add this in different ways but still no clue. It's difficult to adjust it to my html. Maybe you can briefly provide html code of your solution? Thank you in advance!

I used following js:

$(document).ready(function(){
 $("#contactslide").click(function(){
  if ($("#ctform").is(":hidden")){
 $("#ctform").slideDown("slow");
  }
  else{
  $("#ctform").slideUp("slow");
}

});
//});


$(document).ready(function(){
    $("#ctform").css('height', '280px');
    $("#contactslide").click(
        function() {
            $("#ctform").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
        }
    );
    $("#button").toggle(
        function () {
            $("#ctform").animate({height: "280px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
        },
        function () {
            $("#ctform").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}) 
        }
    );
    if($("div.error").text() != '') {  $("#ctform").animate({height: "330px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
    }
    if($("div.error").text() == '') { $("#ctform").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
    }       
});
});

html:

<div id="ctformContainer">
<div id="ctform">
<form action="[[~[[*id]]]]" method="post" class="contactform">
		<fieldset>
			<input type="hidden" name="nospam:blank" value="" />
			<label for="name">Name:<span class="error"></span></label>
			<input type="text" name="name" id="name" value="" required/>
			<label for="email">Email:<span class="error"></span></label>
			<input type="text" name="email" id="email" value="" required/>
			<label for="text">Message:<span class="error"></span></label>
			<textarea name="text" id="text" cols="20" rows="3" value="" required>

[ed. note: oranged last edited this post 14 years, 2 months ago.]

www.oranza.com

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 14 years, 2 months ago

It all depends on the particular jquery plugin you are using, as well as the actual output of the formit. My code is for using eForm and Evo. I haven't looked at formit yet, so I don't know how it displays errors. Probably you can specify a container for error messages.

The point of the code I posted was to demonstrate how I check if the element that would contain an error message is empty or not, and if it wasn't empty (there was an error message) the form container is displayed, if it is empty then the form container is hidden. Use the same code for displaying/hiding the form as you do for displaying it in the first place.

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

☆ A M B ☆
11 Posts

oranged Reply #5, 14 years, 2 months ago

I use Revo and Formit. Ok, will try to make it working.

www.oranza.com