modal form

Modal

by redoak2000

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//toplivo.ufapromneft.ru/assets/js/bootstrapvalidator.min.js"></script>
<link rel="stylesheet" href="//toplivo.ufapromneft.ru/assets/css/bootstrapvalidator.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<a href="#contact" type="button" class="btn btn-warning btn-lg" role="button" data-toggle="modal">Modal!</a>

<div id="contact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 class="modal-title">Contacts:</h3>
			</div>
			
			<form id="contact-form" class="form-horizontal modal-body" role="form">
				<div class="form-group">
					
					<label class="control-label col-sm-3">Name <sup>*</sup></label>
					
					<div class="col-sm-6">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
							<input type="text" class="form-control" name="name" placeholder="Name" />
						</div>
					</div>
					
				</div>
				
				<div class="form-group">
					
					<label class="control-label col-sm-3"> Email address <sup>*</sup></label>
					<div class="col-sm-6">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
							<input class="form-control" name="mail" placeholder="[email protected]"
								required
								type="email" data-bv-emailaddress-message="Not valid" />
						</div>
					</div>
					
				</div>
				
				<div class="form-group">
					
					<label class="control-label col-sm-3">Phone <sup>*</sup></label>
					
					<div class="col-sm-4">
						<div class="input-group pull-left">
							<span...

JavaScript

$(document).ready(function() {
    $('#contact-form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh fa-spin'
        },
        submitHandler: function(validator, form, submitButton) {
            var that = form
            console.log(that);
                $.ajax({           
                    url: 'https://script.google.com/macros/s/AKfycbyqxVHm4Kcx1Tk5U4GCLDontvfDri_vA-MTeNlBoPSVTMyKsra8/exec',
                    data: $(this).serialize(), 
                    jsonp: 'cb', 
                    jsonpCallback: 'bingo', 
                    dataType:'jsonp', 
                    success: function bingo(data){
                        console.log(data); 
                        if (data == 'Error') {
                            alertForm({form: that, type: 'alert-danger', msg: 'Danger'});
                            return;
                        }
                        alertForm({form: that, type: 'alert-success', msg: 'Success'});
                        that.find('textarea').val('');
                    }, 
                    error: function(){
                        alertForm({form: that, type: 'alert-danger', msg: 'Danger.'});
                    }
                });
            
            function alertForm(alert) {
                var div = $('<div class="alert ' + alert.type + '" style="display: none;">' + alert.msg + '</div>');        
                alert.form.prepend(div);
                div.slideDown(400).delay(3000).slideUp(400, function() {
                    alert.form.closest('.modal').modal('hide');
                    div.remove();    
                });
            }
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        
                    }
                }
            },
            mail: {
     ...