benjamin.harris
/
modulos_internal


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Client Brief</title>
        <link rel="shortcut icon" href="images/blueprint.ico" type="image/x-icon">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/blueprint.css" rel="stylesheet">
        <link href="css/print.css" rel="stylesheet" media="print">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://use.fontawesome.com/1e2844bb90.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

    </head>
    <body>

        <div class="container">
            <div id="contact_form">
                <form id="contact" name="contact" action="">
                    <div class="mb-3">
                        <label class="form-label" for="subject">Subject</label>
                        <select name="subject" id="subject" class="form-control form-control-sm" aria-required="true" aria-invalid="false">
                            <option selected value=""></option>
                            <option value="New Residential">New Residential</option>
                            <option value="Residential Extension">Residential Extension</option>
                            <option value="New Commercial">New Commercial</option>
                            <option value="Commercial Extension">Commercial Extension</option>
                            <option value="Shed or Ancillary Dwelling">Shed or Ancillary Dwelling</option>
                            <option value="Pool">Pool</option>
                            <option value="Interior Design">Interior Design</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="name">Your name</label>
                        <input type="text" class="form-control form-control-sm" name="name" id="name" minlength="3" required >
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="email">Your email address</label>
                        <input type="email" class="form-control form-control-sm" name="email" id="email" required >
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="email">Your mobile number</label>
                        <input type="tel" class="form-control form-control-sm" name="mobile" id="mobile" required >
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="name">Proposed Project Address</label>
                        <input type="text" class="form-control form-control-sm map-autocomplete" name="property_address" id="property_address" onFocus="geolocate(this)">
                        <div id="queryHelp" class="form-text">(This is so we can conduct some preliminary searches about your site such as zoning, easements and risks and hazards on your site such as landslip and bushfire.)</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="query">Description of your project or enquiry</label>
                        <textarea cols="30" rows="8" class="form-control form-control-sm" name="query" id="query" placeholder="Your question"></textarea>
                        <div id="queryHelp" class="form-text">(Please provide any other essential details about your project such as what you are looking to build, the size, how many bedrooms, bathrooms, style, rough budget etc)</div>
                    </div>
                    <div class="mb-3">
                        <div id="postData"></div>
                    </div>
                    <input type="submit" name="submit" id="submit_btn" class="btn btn-sml btn-secondary" value="Submit">
                </form>
            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    document.getElementById('mobile').addEventListener('keyup',function(evt){
                        var phoneNumber = document.getElementById('mobile');
                        var charCode = (evt.which) ? evt.which : evt.keyCode;
                        phoneNumber.value = phoneFormat(phoneNumber.value);
                    });

                });

                window.autocompletes = {};
                var placeSearch,
                    clickedGeolocationField = null;

                var componentForm = {
                    street_number: 'short_name',
                    route: 'long_name',
                    locality: 'long_name',
                    administrative_area_level_1: 'short_name',
                    postal_code: 'short_name'
                };

            	String.prototype.toProperCase = function () {
                	return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
            	};
                // This creates a simple rectangle representing the Building Dimensions.
                function initAutocomplete() {

                    let inputs = document.getElementsByClassName('map-autocomplete');

                    for (let i = 0; i < inputs.length; i++) {
                        var autocomplete = new google.maps.places.Autocomplete(
                            inputs[i], {types: ['address'],componentRestrictions: {country: 'au'}}
                        );

                        autocomplete.name = inputs[i].name;
                        autocomplete.setFields(['address_component']);
                        autocomplete.addListener('place_changed', fillInAddress);

                        autocompletes[inputs[i].id] = autocomplete;
                    }               

                }

                function fillInAddress() {
                    let place = this.getPlace(),
                        streetNumber = '',
                        resultAddress = [];

                    for (let component in componentForm) {
                        for (let i = 0; i < place.address_components.length; i++) {
                            let addressType = place.address_components[i].types[0];

                            if (addressType == component) {
                                let val = place.address_components[i][componentForm[addressType]];

                                if (addressType == 'street_number') {
                                    streetNumber = val + ' ';
                                } else {
                                    resultAddress.push(val);
                                }
                            }
                        }
                    }

                    if (resultAddress.length > 0) {
                        resultAddress = streetNumber + resultAddress.join(', ').toProperCase();

                        $('[name="' + clickedGeolocationField + '"]').val(resultAddress);
                    }
                }
                function geolocate(el) {
                    clickedGeolocationField = el.name;

                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                            let geolocation = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };
                            let circle = new google.maps.Circle(
                                {center: geolocation, radius: position.coords.accuracy});

                            autocompletes[el.id].setBounds(circle.getBounds());
                        });
                    }
                }
                // A function to format text to look like a phone number
                function phoneFormat(input){
                    // Strip all characters from the input except digits
                    input = input.replace(/\D/g,'');
                    // Trim the remaining input to ten characters, to preserve phone number format
                    input = input.substring(0,20);
                    // Based upon the length of the string, we add formatting as necessary
                    var size = input.length;
                    if(size == 0){
                        input = input;
                    }else if(size < 4){
                        input = input + ' ';
                    }else if(size < 7){
                        input = input.substring(0,4)+' '+input.substring(4,6);
                    }else if (input.startsWith("04") ) {
                        input = input.substring(0,4)+' '+input.substring(4,7)+' '+input.substring(7,20);
                    }else if (input.startsWith("+44") ) {
                        input = input;
                    }else{
                        // for any number not starting in 04 e.g. all landlines
                        input = input.substring(0,2)+' '+input.substring(2,6)+' '+input.substring(6,20);
                    }
                    return input;
                }


                $(document).ready(function(){
                    $('#contact').submit(function(e){
                        var dataString = $(this).serialize();
                        //alert(dataString); return false; 
                        $.ajax({
                            type: "POST",
                            url: "form.php",
                            data: dataString,
                            success: function () {
                                $("#postData").text('Your enquiry has been successfully sent, we will be in contact with you shortly.');
                                $('#contact').trigger("reset");
                            },
                            error: function(){
                                //alert("Form submission failed!");
                                $("#postData").html(data);
                            }
                        });
                        e.preventDefault();
                    });
                });
            </script>

            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-QceOYrDe9otynMmQ9iNF3yEZzbpsanM&libraries=places&callback=initAutocomplete" async defer></script>
        </div>
    </body>
</html>