Home Forums Porto Template ReCaptach in form modal

This topic contains 13 replies, has 2 voices, and was last updated by  reyvax 4 months, 4 weeks ago. This post has been viewed 325 times

Viewing 14 posts - 1 through 14 (of 14 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.


    #10024866

    reyvax
    Participant

    Hi Rodrigo,

    Sorry for this very late anwser, i forgot this probleme, but it existing again.

    So, I replace the part of “catalogForm” in the view.contact.js.

    Now when i valid the form, an “error message appear” (but the form is completed, email is well sended)…

    I just wanna redirect visiteur i well sended… 🙁


    #10024874

    Support2
    Keymaster

    Hello,

    If the email is well sended, probably the value of variable $debug in (php/contact-form.php) is diferent from “0”.
    Please, change the variable to:

    $debug = 0;

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

    Kind Regards,

    Rodrigo.


    #10024881

    reyvax
    Participant

    Hi,

    $debug = 0;

    In fact my contact form named “demande-catalogue.php” is a fork of contact-form.php

    i add a fucntion to wrote data in db (i do that that in other contact-form.php , and it’s work well)

    -> this part send me an email

    after i call another files require_once(‘transfert-catalogue.php’); (who is a the contact-form.php who send you the pdf files)

    $debug = 0; in this file too.

    So to resume process :

    -> user give data in modal form.
    -> i receive data by email (demande-catalogue.php), i keep data in db (function leadslog)
    -> user receive pdf file (transfert-catalogue.php)
    -> the modal form stay open, and display an error

    Regards,
    Xavier

    —-

    <?php
    /*
    Name: 			Contact Form
    Written by: 	Okler Themes - (http://www.okler.net)
    Theme Version:	6.0.0
    Options : Add LeadLog
    Xaba last modifications  :   22/12/2017 
    
    */
    
    session_cache_limiter('nocache');
    header('Expires: ' . gmdate('r', 0));
    
    header('Content-type: application/json');
    
    require_once('php-mailer/PHPMailerAutoload.php');
    require 'leadslog.php';
    
    if(isset($_POST['recaptcha']) && !empty($_POST['recaptcha'])) {
    
    	// Your Google reCAPTCHA generated Secret Key here
    	$secret = 'xxx';
    	
    	if( ini_get('allow_url_fopen') ) {
    		//reCAPTCHA - Using file_get_contents()
    		$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptcha']);
    		$responseData = json_decode($verifyResponse);
    	} else if( function_exists('curl_version') ) {
    		// reCAPTCHA - Using CURL
    		$fields = array(
    	        'secret'    =>  $secret,
    	        'response'  =>  $_POST['recaptcha'],
    	        'remoteip'  =>  $_SERVER['REMOTE_ADDR']
    	    );
    
    	    $verifyResponse = curl_init("https://www.google.com/recaptcha/api/siteverify");
    	    curl_setopt($verifyResponse, CURLOPT_RETURNTRANSFER, true);
    	    curl_setopt($verifyResponse, CURLOPT_TIMEOUT, 15);
    	    curl_setopt($verifyResponse, CURLOPT_POSTFIELDS, http_build_query($fields));
    	    $responseData = json_decode(curl_exec($verifyResponse));
    	    curl_close($verifyResponse);
    	} else {
    		$arrResult = array ('response'=>'error','errorMessage'=>'You need CURL or file_get_contents() activated in your server. Please contact your host to activate.');
    		echo json_encode($arrResult);
    		die();
    	}
    
    if($responseData->success) {
    // Step 1 - Enter your email address below.
    $email = 'xavier@pubeo.fr';
    // If the e-mail is not working, change the debug option to 2 | $debug = 2;
    $debug = 0;
    
    $subject = 'Demande de brochure [evocom.fr]';
    
    $fields = array(
    	0 => array(
    		'text' => 'Nom',
    		'val' => $_POST['name']
    	),
    	1 => array(
    		'text' => 'Email',
    		'val' => $_POST['email']
    	),
    	2 => array(
    		'text' => 'Tel',
    		'val' => $_POST['phone']
    	),
    	3 => array(
    		'text' => 'Message',
    		'val' => $_POST['message']
    	),
    	4 => array(
    		'text' => 'Lead ==> ',
    		'val' => $_POST['lead']
    	)	
    
    );
    
    $message = '';
    
    foreach($fields as $field) {
    	$message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";
    }
    
    $mail = new PHPMailer(true);
    
    try {
    
    	$mail->SMTPDebug = $debug;                                 // Debug Mode
    
    	// Step 2 (Optional) - If you don't receive the email, try to configure the parameters below:
    
    	//$mail->IsSMTP();                                         // Set mailer to use SMTP
    	//$mail->Host = 'mail.yourserver.com';				       // Specify main and backup server
    	//$mail->SMTPAuth = true;                                  // Enable SMTP authentication
    	//$mail->Username = 'user@example.com';                    // SMTP username
    	//$mail->Password = 'secret';                              // SMTP password
    	//$mail->SMTPSecure = 'tls';                               // Enable encryption, 'ssl' also accepted
    	//$mail->Port = 587;   								       // TCP port to connect to
    
    	$mail->AddAddress($email);	 						       // Add another recipient
    
    	//$mail->AddAddress('person2@domain.com', 'Person 2');     // Add a secondary recipient
    	//$mail->AddCC('person3@domain.com', 'Person 3');          // Add a "Cc" address. 
    	//$mail->AddBCC('person4@domain.com', 'Person 4');         // Add a "Bcc" address. 
    
    	$mail->SetFrom($email, $_POST['name']);
    	$mail->AddReplyTo($_POST['email'], $_POST['name']);
    
    	$mail->IsHTML(true);                                  // Set email format to HTML
    
    	$mail->CharSet = 'UTF-8';
    
    	$mail->Subject = $subject;
    	$mail->Body    = $message;
    
    	$mail->Send();
    	$arrResult = array ('response'=>'success');
    	//header('Location: /merci-catalogue.php');
    
    	
    	$leads = new Leads();	
    	$leads->addLeads($fields);
    
    	require_once('transfert-catalogue.php');   // On envois le catalogue automatiquement
    	
    	
    	
    	
    } catch (phpmailerException $e) {
    	$arrResult = array ('response'=>'error','errorMessage'=>$e->errorMessage());
    } catch (Exception $e) {
    	$arrResult = array ('response'=>'error','errorMessage'=>$e->getMessage());
    }
    
    if ($debug == 0) {
    	echo json_encode($arrResult);
    }
    
    	} else {
    		$arrResult = array ('response'=>'error','errorMessage'=>'Robot verification failed, please try again');
    		echo json_encode($arrResult);
    	}
    
    } else { 
    	$arrResult = array ('response'=>'error','errorMessage'=>'Please click on the reCAPTCHA box.');
    	echo json_encode($arrResult);
    }

    #10024888

    Support2
    Keymaster
    This reply has been marked as private.
    #10024889

    Support2
    Keymaster

    Hello,

    Another observation:
    * Make sure that require_once('transfert-catalogue.php'); it’s not “returning/echo” any value.

    Kind Regards,

    Rodrigo.


    #10024891

    reyvax
    Participant

    Yeah !
    That was transfert-catalogue.php who retunr an echo value !!!

    – You’r very the best !

    Do you have a service to transform/convert/change this BS3 site in BS4 website, i think i can pay to that…

    Thanks a lot,
    Xavier


    #10024896

    Support2
    Keymaster

    Hello Xavier,

    Great that solved the issue 🙂

    We don’t offer customization service.
    But work together with a developer who has advanced knowledge in the template (Porto).

    Please, feel free to contact him to discuss about customized tasks with the template.

    His e-mail is: maaprote@gmail.com

    Kind Regards,

    Rodrigo.


    #10024902

    reyvax
    Participant

    Thanks for all,
    I keep this dev email if i need
    We can close this thread, thanks again.
    Regards,
    Xavier


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