Home Forums Porto Template ReCaptach in form modal

This topic contains 5 replies, has 2 voices, and was last updated by  Support2 1 week, 1 day ago. This post has been viewed 63 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10024294

    reyvax
    Participant

    Hi there,

    I’ve a form in a modal.

    I try to add captcha because hoster ask me that (too many mail sended by our website)

    Modal is on home page , when you clic on red button (under the other page form)

    I try too make your tuto http://www.okler.net/forums/topic/how-to-setup-google-recaptcha-in-the-contact-form/

    with the same php/contact-form.php code,
    i try with our code too, the same probs apper :

    {“response”:”error”,”errorMessage”:”Please click on the reCAPTCHA box.”}

    Can you help me (again)

    Regards,
    Xavier



    Template Version: bs3
    #10024303

    Support2
    Keymaster

    Hello :),

    It’s missing the JS code for validation, that also send the form data for PHP.
    Please, add in (js/views/view.contact.js):

    /*
    Contact Form: Basic
    */
    $('#catalogForm').validate({
    	submitHandler: function(form) {
    
    		var $form = $(form),
    			$messageSuccess = $('#contactSuccessCatalog'),
    			$messageError = $('#contactErrorCatalog'),
    			$submitButton = $(this.submitButton),
    			$errorMessage = $('#mailErrorMessageCatalog');
    
    		$submitButton.button('loading');
    
    		// Ajax Submit
    		$.ajax({
    			type: 'POST',
    			url: $form.attr('action'),
    			data: {
    				name: $form.find('#name').val(),
    				email: $form.find('#email').val(),
    				phone: $form.find('#phone').val(),
    				lead: $form.find('#lead').val(),
    				subject: $form.find('#subject').val(),
    				message: $form.find('#message').val(),
    				recaptcha: $form.find('#g-recaptcha-response').val()
    			}
    		}).always(function(data, textStatus, jqXHR) {
    
    			$errorMessage.empty().hide();
    
    			if (data.response == 'success') {
    
    				$messageSuccess.removeClass('d-none');
    				$messageError.addClass('d-none');
    
    				// Redirect to thank you page
    				window.location = 'merci.php';			
    				
    				// Reset Form
    				$form.find('.form-control')
    					.val('')
    					.blur()
    					.parent()
    					.removeClass('has-success')
    					.removeClass('has-danger')
    					.find('label.error')
    					.remove();
    
    				if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
    					$('html, body').animate({
    						scrollTop: $messageSuccess.offset().top - 80
    					}, 300);
    				}
    
    				$submitButton.button('reset');
    				
    				return;
    
    			} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
    				$errorMessage.html(data.errorMessage).show();
    			} else {
    				$errorMessage.html(data.responseText).show();
    			}
    
    			$messageError.removeClass('d-none');  
    			$messageSuccess.addClass('d-none');
    
    			if (($messageError.offset().top - 80) < $(window).scrollTop()) {
    				$('html, body').animate({
    					scrollTop: $messageError.offset().top - 80
    				}, 300);
    			}
    
    			$form.find('.has-success')
    				.removeClass('has-success');
    				
    			$submitButton.button('reset');
    
    		});
    	}
    });

    * Note that i created a new validation for #catalogForm.

    Observation:
    I saw that you have another form on the same page using the same ID’s for the fields. Probably in one of those two forms the data will be empty. My suggestion is use unique ID’s for the #catalogForm, for example:

    <form id="catalogForm" class="form-horizontal mb-lg" action="php/demande-catalogue.php" method="POST" accept-charset="utf-8">
    	<div class="form-group mt-lg">
    		<label class="col-sm-3 sr-only control-label">Prénom NOM</label>
    		<div class="col-sm-12">
    			<input type="text" id="nameCatalog" name="name" class="form-control" placeholder="Prénom NOM" required />
    		</div>
    	</div>
    	<div class="form-group">
    		<label class="col-sm-3 sr-only control-label">Email</label>
    		<div class="col-sm-12">
    			<input type="email" id="emailCatalog" name="email" class="form-control" placeholder="Email" required />
    		</div>
    	</div>
    	<div class="form-group">
    		<label class="col-sm-3 sr-only control-label">Téléphone</label>
    		<div class="col-sm-12">
    			<input type="phone" id="phoneCatalog" name="phone" class="form-control" placeholder="Numéro de téléphone" required />
    		</div>
    	</div>
    	<div class="row mb-sm">
    		<div class="col-md-12">
    			<div class="g-recaptcha" data-sitekey="6LcgWEAUAAAAAMbPwPEyZbxn1NSwdqmFL8413r6u"></div>
    		</div>
    	</div>
    
    	<div class="modal-footer">
    		<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
    																																			
    		<input type="hidden" name="lead" id="leadCatalog" value="evocom.fr, index.php, catalogue"/> 	 							
    		<input type="hidden" name="message" id="messageCatalog" value="Le catalogue à été envoyé automatiquement"/> 	
    		
    		<button type="submit" name="submit" id="submit" class="btn btn-primary">Envoyez moi le catalogue !</button> 
    	</div>
    
    
    </form>

    If you made that change, don’t forget to change the ID’s at (js/view/view.contact.js):

    // Ajax Submit
    $.ajax({
    	type: 'POST',
    	url: $form.attr('action'),
    	data: {
    		name: $form.find('#nameCatalog').val(),
    		email: $form.find('#emailCatalog').val(),
    		phone: $form.find('#phoneCatalog').val(),
    		lead: $form.find('#leadCatalog').val(),
    		subject: $form.find('#subjectCatalog').val(),
    		message: $form.find('#messageCatalog').val(),
    		recaptcha: $form.find('#g-recaptcha-response').val()
    	}
    }).always(function(data, textStatus, jqXHR) {

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10024331

    reyvax
    Participant

    Hi there,

    Thanks for all this informations,

    Ok the for the form with re-captcha, it “almost” work …

    When i submit it, the process form is ok but i stay on the modal…. in fact before i use Re-captcha when i valid form, i was redirect to merci-catalogue.php :

    (in demande-catalogue.php)

    ` $mail->Send();
    $arrResult = array (‘response’=>’success’);
    header(‘Location: /merci-catalogue.php’);

    BTW, You’are the best support team ever, thanks 😀


    #10024347

    Support2
    Keymaster

    Hello 🙂

    Try removing the code header(‘Location: /merci-catalogue.php’);. Probably this PHP redirect it’s blocking the response of AJAX on the JS code.
    You need to make the redirect on the JS/client side. The code from my last solution already do it at the part:

    .
    ..
    ...
    if (data.response == 'success') {
    
    	$messageSuccess.removeClass('d-none');
    	$messageError.addClass('d-none');
    
    	// Redirect to thank you page
    	window.location = 'merci.php';
    ...
    ..
    .

    * Change to: window.location = 'merci-catalogue.php';

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10024355

    reyvax
    Participant

    Hi there,

    So , i’ve comment header(‘Location: /merci-catalogue.php’ in php , and window.location = ‘merci-catalogue.php” in view.contact.js (for the #catalogForm part)

    In fact the réponse message never display :

    – if you fill all field, and you “forget” to check google recaptcha, no message appear
    – if you fill all and check recaptcha, message is sended (sender receive a pdf file, and me i receive information), pub modal stay open and no message appear.

    So i dont know why it doesnt work for this modal form.


    #10024360

    Support2
    Keymaster

    Hello,

    I saw that you are using the newest version of view.contact.js of Porto 6.0.0, but still using the old version of theme.css (4.9.1), and this is the problem.
    In that case, change the JS code of #catalogForm to:

    $('#catalogForm').validate({
    	submitHandler: function(form) {
    
    		var $form = $(form),
    			$messageSuccess = $('#contactSuccessCatalog'),
    			$messageError = $('#contactErrorCatalog'),
    			$submitButton = $(this.submitButton),
    			$errorMessage = $('#mailErrorMessageCatalog');
    
    		$submitButton.button('loading');
    
    		// Ajax Submit
    		$.ajax({
    			type: 'POST',
    			url: $form.attr('action'),
    			data: {
    		name: $form.find('#nameCatalog').val(),
    		email: $form.find('#emailCatalog').val(),
    		phone: $form.find('#phoneCatalog').val(),
    		lead: $form.find('#leadCatalog').val(),
    		subject: $form.find('#subjectCatalog').val(),
    		message: $form.find('#messageCatalog').val(),
    		recaptcha: $form.find('#g-recaptcha-response').val()
    			}
    		}).always(function(data, textStatus, jqXHR) {
    
    			$errorMessage.empty().hide();
    
    			if (data.response == 'success') {
    
    				$messageSuccess.removeClass('hidden');
    				$messageError.addClass('hidden');
    
    				// Redirect to thank you page
    				window.location = 'merci-catalogue.php';			
    				
    				// Reset Form
    				$form.find('.form-control')
    					.val('')
    					.blur()
    					.parent()
    					.removeClass('has-success')
    					.removeClass('has-danger')
    					.find('label.error')
    					.remove();
    
    				if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
    					$('html, body').animate({
    						scrollTop: $messageSuccess.offset().top - 80
    					}, 300);
    				}
    
    				$submitButton.button('reset');
    				
    				return;
    
    			} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
    				$errorMessage.html(data.errorMessage).show();
    			} else {
    				$errorMessage.html(data.responseText).show();
    			}
    
    			$messageError.removeClass('hidden');  
    			$messageSuccess.addClass('hidden');
    
    			if (($messageError.offset().top - 80) < $(window).scrollTop()) {
    				$('html, body').animate({
    					scrollTop: $messageError.offset().top - 80
    				}, 300);
    			}
    
    			$form.find('.has-success')
    				.removeClass('has-success');
    				
    			$submitButton.button('reset');
    
    		});
    	}
    });

    * Basically change the class “d-none” to “hidden”.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)