Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- hey there,
- I 'm trying to have a proper contact form that will validate my form "on the fly" using jquery & bootstrap validator and at the end will send an email to my mail adress.
- 1 HTML
- <p><b> Specific projects* </b></p>
- <div id="alert" class="alert alert-success alert-dismissible" style="display:none" role="alert">
- <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
- <strong>Thank you for contacting me!</strong>I have received your enquiry and will respond to you within 24 hours. For urgent enquiries please call me or leave a message on skype. :)
- </div>
- <form id="contactForm" method="post" class="form-horizontal" action="_/components/php/contactformSend.php" method="POST">
- <div class="form-group">
- <label class="col-lg-3 control-label">Full name</label>
- <div class="col-lg-3">
- <input type="text" class="form-control" name="firstName" placeholder="FirstName" />
- </div>
- <div class="col-lg-3">
- <input type="text" class="form-control" name="lastName" placeholder="LastName" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">Email address</label>
- <div class="col-lg-5">
- <input type="text" class="form-control" name="email" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">Website</label>
- <div class="col-lg-5">
- <input type="text" class="form-control" name="website" placeholder="http://" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">What is this regarding?</label>
- <div class="col-lg-5">
- <div class="checkbox">
- <label>
- <input type="checkbox" name="regarding[]" value="Web Development" /> Web Development
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="regarding[]" value="SEO" /> SEO
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="regarding[]" value="Adwords" /> Adwords
- </label>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">Budget</label>
- <div class="col-lg-5">
- <select class="form-control" name="budget">
- <option value="Less than 200">Less than 200$</option>
- <option value="200-350">200$-350$</option>
- <option value="350-500">300$-500$</option>
- <option value="500-1000">500$-1000$</option>
- <option value="1000-1500">1000$-1500$</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">TimeFrame</label>
- <div class="col-lg-5">
- <select class="form-control" name="timeframe">
- <option value="">Select the timeframe </option>
- <option value="one week">1 week</option>
- <option value="two weeks">2 weeks </option>
- <option value="tree weeks or more">3 weeks or more </option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label">Brief project description</label>
- <div class="col-lg-5">
- <textarea rows="5" class="form-control" name="description"></textarea>
- </div>
- </div>
- <div class="form-group">
- <label class="col-lg-3 control-label" id="captchaOperation"></label>
- <div class="col-lg-2">
- <input type="text" class="form-control" name="captcha" />
- </div>
- </div>
- <div class="form-group">
- <button id="trimite" type="submit" class="col-lg-3 col-lg-offset-8 col-md-2 col-md-offset-8 btn btn-default btn-sm" name="signup" value="Sign up"> <b>SEND</b> </button>
- <div class="col-lg-9 col-lg-offset-3">
- <!-- <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button> <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>-->
- <button type="button" class="btn btn-link" id="resetBtn">Reset form</button>
- </div>
- </div>
- </form>
- <script type="text/javascript">
- $(document).ready(function() {
- // Generate a simple captcha
- function randomNumber(min, max) {
- return Math.floor(Math.random() * (max - min + 1) + min);
- };
- $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
- $('#contactForm').bootstrapValidator({
- // live: 'disabled',
- message: 'This value is not valid',
- feedbackIcons: {
- valid: 'glyphicon glyphicon-ok',
- invalid: 'glyphicon glyphicon-remove',
- validating: 'glyphicon glyphicon-refresh'
- },
- fields: {
- firstName: {
- validators: {
- notEmpty: {
- message: 'The first name is required and cannot be empty'
- }
- }
- },
- lastName: {
- validators: {
- notEmpty: {
- message: 'The last name is required and cannot be empty'
- }
- }
- },
- email: {
- validators: {
- emailAddress: {
- message: 'The input is not a valid email address'
- }
- }
- },
- website: {
- validators: {
- uri: {
- message: 'The input is not a valid URL'
- }
- }
- },
- 'regarding[]': {
- validators: {
- notEmpty: {
- message: 'Please specific what is this regarding'
- }
- }
- },
- budget: {
- validators: {
- notEmpty: {
- message: 'Please select the estimated time'
- }
- }
- },
- timeframe: {
- validators: {
- notEmpty: {
- message: 'Please select the estimated time'
- }
- }
- },
- description: {
- trigger: 'blur',
- validators: {
- notEmpty: {
- message: 'The brief description of the future project is required'
- }
- }
- },
- captcha: {
- validators: {
- callback: {
- message: 'Wrong answer',
- callback: function(value, validator) {
- var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
- return value == sum;
- }
- }
- }
- }
- }
- });
- // Validate the form manually
- // $('#validateBtn').click(function() {
- // $('#contactForm').bootstrapValidator('validate');
- // });
- $('#resetBtn').click(function() {
- $('#contactForm').data('bootstrapValidator').resetForm(true);
- });
- });
- </script>
- <script type="text/javascript" src="_/js/ajaxscript.js"></script>
- </div>
- 2 ajaxscript.js
- url = '_/components/php/contactformSend.php';
- function collectData(){
- firstName = $("input[name='firstName']").val();
- lastName = $("input[name='lastName']").val();
- email = $("input[name='email']").val();
- website = $("input[name='website']").val();
- budget = $("input[name='budget']").val();
- timeframe = $("select[name='timeframe']").val();
- description = $("textarea[name='description']").val();
- var valcbx = [];
- $("input[name='regarding[]']:checkbox:checked").each(function(i){
- valcbx[i] = $(this).val();
- });
- regarding = valcbx;
- //create object
- return obj =
- {'firstName' : firstName,
- 'lastName' : lastName,
- 'email' : email,
- 'website' : website,
- 'budget' : budget,
- 'timeframe' : timeframe,
- 'description' : description,
- 'regarding' : regarding};
- }
- function errorFunction(){
- }
- function alwaysFunction(){
- }
- function successFunction(){
- $('#alert').css('display', 'block');
- }
- function makeAjaxRequest(cData){
- var promise = $.ajax({
- type: "POST",
- url: url,
- data: cData,
- dataType: 'json',
- async : true
- });
- promise.done(successFunction);
- promise.fail(errorFunction);
- promise.always(alwaysFunction);
- }
- function makeRequest(){
- collectedData = collectData();
- data = JSON.stringify(collectedData);
- makeAjaxRequest(data);
- }
- $(document).ready(function(){
- $('#trimite').on('click', function(){
- //alert("hhh");
- makeRequest();
- return false;
- // return true;
- })
- });
- 3 contacformSend.php
- <?php header('Content-Type: application/json'); ?>
- <?php
- //$rest_json = json_decode(file_get_contents("php://input"), false);
- //echo $rest_json;
- //$received = json_decode($rest_json);
- //print_r($received);
- //print_r($_POST);
- //mail('elizadascal@gmail.com','te-a cautat', print_r($received, true));
- //mail('elizadascal@gmail.com','te-a cautat', print_r($_POST, true));
- $data = json_decode(file_get_contents("php://input"), false);
- //$received = print_r($data);
- //json_decode(stripslashes($_POST['data']));
- $to = "elizadascal@gmail.com";
- $header = "Content-Type: text/html\r\nReply-To";
- $subject = "This is my Subject Line";
- $body ="<strong>The data is:</strong>".print_r($_POST, true) ;
- if(@mail($to, $subject, $body, $header)) {
- die("true");
- } else {
- die("There was an error sending the email.");
- }
- ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement