Home › Forums › Porto – Responsive HTML5 Template › Contact form
- This topic has 3 replies, 2 voices, and was last updated 9 years, 5 months ago by Support. This post has been viewed 2393 times
-
AuthorPosts
-
October 16, 2014 at 11:06 am #10004362RKrijgerParticipant
Hello,
In my test server I am trying to make a sidebar that includes a contact form. To leave a Name en phone number.
It is because we want to call them back as soon as we get the email.
I have tried to make another contact-form.php (in my case afspraak.php)
But it keeps giving me the error.
Anyone?
October 16, 2014 at 11:53 am #10004367SupportKeymasterHello,
My suggestion is that you use another form, and not the same you use in the contact form:
1) Duplicate and rename the file php/contact-form.php to php/call-me-back.php
2) Set the action in the form and change the ID:
<form method="POST" action="php/call-me-back.php" id="callMeBack" novalidate="novalidate">
3) In the js file (js/views/view.contact.js) create another function to send the contact via Ajax, something like this:
Those are the basic steps.
Let me know if you have any questions.
Thanks.
October 20, 2014 at 8:32 am #10004401RKrijgerParticipantHello,
I have a very hard time to change it into a working form.
By just changing the name the contact form doesn’t work.
I just want them to leave a name and phone number.
What do i need to change in the code?
October 20, 2014 at 10:27 am #10004405SupportKeymasterHello, please try this:
HTML:
<div class="alert alert-success hidden" id="callMeBackSuccess"> <strong>Gelukt!</strong> Uw bericht is succesvol verstuurd. </div> <div class="alert alert-danger hidden" id="callMeBackError"> <strong>Mislukt!</strong> Er is een error opgetreden tijdens het versturen van uw bericht. </div> <h2 class="short"><strong>Direct</strong> een afspraak?</h2> <form id="callMeBack" action="php/call-me-back.php" method="POST"> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>Uw naam *</label> <input type="text" value="" data-msg-required="Vul uw naam in aub." maxlength="100" class="form-control" name="naam" id="naam" required> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>Telefoon *</label> <input type="text" value="" data-msg-required="Voer een telefoonnummer in aub." maxlength="100" class="form-control" name="telefoonnummer" id="telefoonnummer" required> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" value="Bel mij terug" class="btn btn-primary btn-lg" data-loading-text="Laden..."><br><br> </div> </div> </form>
JS:
(js/custom.js)(function($) { 'use strict'; $('#callMeBack').validate({ submitHandler: function(form) { var $form = $(form), $messageSuccess = $('#callMeBackSuccess'), $messageError = $('#callMeBackError'), $submitButton = $(this.submitButton); $submitButton.button('loading'); // Ajax Submit $.ajax({ type: 'POST', url: $form.attr('action'), data: { naam: $form.find('#naam').val(), telefoonnummer: $form.find('#telefoonnummer').val() }, dataType: 'json', complete: function(data) { if (typeof data.responseJSON === 'object') { if (data.responseJSON.response == 'success') { $messageSuccess.removeClass('hidden'); $messageError.addClass('hidden'); // Reset Form $form.find('.form-control') .val('') .blur() .parent() .removeClass('has-success') .removeClass('has-error') .find('label.error') .remove(); if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) { $('html, body').animate({ scrollTop: $messageSuccess.offset().top - 80 }, 300); } $submitButton.button('reset'); return; } } $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'); } }); } }); }).apply(this, [jQuery]);
PHP:
(php/call-me-back.php)<?php session_cache_limiter('nocache'); header('Expires: ' . gmdate('r', 0)); header('Content-type: application/json'); // Step 1 - Enter your email address below. $to = '[email protected]'; // Step 2 - Enable if the server requires SMTP authentication. (true/false) $enablePHPMailer = false; $subject = $_POST['subject']; $name = $_POST['naam']; $email = $to; $fields = array( 0 => array( 'text' => 'Naam', 'val' => $_POST['naam'] ), 1 => array( 'text' => 'Telefoon', 'val' => $_POST['telefoonnummer'] ) ); $message = ""; foreach($fields as $field) { $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n"; } // Simple Mail if(!$enablePHPMailer) { $headers = ''; $headers .= 'From: ' . $name . ' <' . $email . '>' . "\r\n"; $headers .= "Reply-To: " . $email . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=UTF-8\r\n"; if (mail($to, $subject, $message, $headers)){ $arrResult = array ('response'=>'success'); } else{ $arrResult = array ('response'=>'error'); } // PHP Mailer Library - Docs: https://github.com/PHPMailer/PHPMailer } else { include("php-mailer/PHPMailerAutoload.php"); $mail = new PHPMailer; $mail->IsSMTP(); // Set mailer to use SMTP $mail->SMTPDebug = 0; // Debug Mode // Step 3 - If you don't receive the email, try to configure the parameters below: //$mail->Host = 'mail.yourserver.com'; // Specify main and backup server //$mail->SMTPAuth = true; // Enable SMTP authentication //$mail->Username = 'username'; // SMTP username //$mail->Password = 'secret'; // SMTP password //$mail->SMTPSecure = 'tls'; // Enable encryption, 'ssl' also accepted $mail->From = $email; $mail->FromName = $_POST['name']; $mail->AddAddress($to); // Add a recipient $mail->AddReplyTo($email, $name); $mail->IsHTML(true); // Set email format to HTML $mail->CharSet = 'UTF-8'; $mail->Subject = $subject; $mail->Body = $message; if(!$mail->Send()) { $arrResult = array ('response'=>'error'); } $arrResult = array ('response'=>'success'); } echo json_encode($arrResult); ?>
Let me know if you have any questions.
Thanks.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.