1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Formulário de contato

Boa tarde, estou desenvolvendo um site e não consigo validar as informações do formulário de contato alguém poderia me ajudar ?

HTML


<!DOCTYPE HTML>
<html>
    <head>
        <title>LGR | TRANSPORTES</title>
        <link rel="icon" href="images/favicon.png" />
        <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
        <script src="js/jquery.min.js"></script>
         <!-- Custom Theme files -->
        <link href="css/style.css" rel='stylesheet' type='text/css' />
            <!-- Custom Theme files -->
             <meta name="viewport" content="width=device-width, initial-scale=1">
         <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
            <!-- webfonts -->
            <link href='http://fonts.googleapis.com/css?family=Raleway:200,400,300,600,500,900,700,100,800|Comfortaa:700' rel='stylesheet' type='text/css'>
            <link href='http://fonts.googleapis.com/css?family=Comfortaa:700,300,400' rel='stylesheet' type='text/css'>
             <!-- webfonts -->
    </head>
    <body>

        <!-- preload -->
    <div id="preload" class="preload"></div>
    <!-- fim preload -->

        <div class="header">
            <div class="container">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html"><img src="images/logo.png" title="carwash" /></a>
                </div>
                <!-- /logo -->
                <!-- top-nav -->
                <div class="top-nav">
                    <span class="menu"> </span>
                    <ul>
                        <li><a href="index.html">Inicio</a></li>
                        <li><a href="about.html">Sobre</a></li>
                        <li><a href="services.html">Serviços</a></li>
                        <li><a href="products.html">Frota</a></li>
                        <li class="active"><a href="contact.html">Contato</a></li>
                        <div class="clearfix"> </div>
                    </ul>
                </div>
                <!-- /top-nav -->
                <!-- script-for-nav -->
                <script>
                    $(document).ready(function(){
                        $("span.menu").click(function(){
                            $(".top-nav ul").slideToggle(1000);
                        });
                    });
                </script>
                <!-- script-for-nav -->
                <div class="clearfix"> </div>
            </div>
            <!-- /header -->
        </div>
                    <!-- Contact -->
                    <div class="contact">
                <div class="container">
                    <div class="contact-head text-center">
                        <h2>Entre em contato conosco!</h2>
                        <span>Orçamento, duvidas, reclamações e sugestoções.</span>
                    </div>        
                    <!----- contact-grids ----->        
                    <div class="contact-grids">
                        <div class="contact-map">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3658.389288296088!2d-46.790869585502804!3d-23.51849696589478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cefe5659fe47e3%3A0x16b8fdbbee576100!2sLGR+Transporte+de+Turismo!5e0!3m2!1spt-BR!2sbr!4v1509989899399"> </iframe>
                        </div>
                        <!----- contact-form ------>
                        <div class="contact-form">
                            <form>
                                <div class="contact-form-row">
                                    <div>
                                        <span>Nome :</span>
                                        <input type="text" class="text" value="Ex: João da Silva" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Ex: João da Silva';}">
                                    </div>
                                    <div>
                                        <span>Email :</span>
                                        <input type="text" class="text" value="Ex: joão.silva@email.com" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Ex: joão.silva@email.com';}">
                                    </div>
                                    <div>
                                        <span>Assunto :</span>
                                        <input type="text" class="text" value="Ex: Orçamento" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Ex: Orçamento';}">
                                    </div>
                                    <div class="clearfix"> </div>
                                </div>
                                <div class="clearfix"> </div>
                                <div class="contact-form-row2">
                                    <span>Mensagem :</span>
                                    <textarea> </textarea>
                                </div>
                                <input type="submit" value="Enviar">
                            </form>
                        </div>
                        <!----- contact-form ------>
                    </div>
                    <!----- contact-grids ----->
                </div>
            </div>
                    <!-- /Contact -->
                            <!-- team-grids-caption -->

                            </div>
                            <!-- team-grids-caption -->
                            <!-- /team-grids -->
                        </div>
                    </div>
                    <!-- /team -->
                    <!-- footer -->
                    <div class="footer">
                        <div class="container">
                            <div class="footer-grids">
                                <div class="col-md-3">
                                    <div class="footer-grid">
                                        <h5>Sobre A LGR</h5>
                                        <p>Prover serviços de transporte executivo, colocando sempre em primeiro lugar as necessidades de seus clientes e demais partes interessadas.</p>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="footer-grid f-blog">
                                        <h5>Contato</h5>
                                        <div class="f-blog-artical">
                                            <img src="images\envelope.png">&nbsp&nbsp <font color="white">lacirgenoino@hotmail.com</font> &nbsp&nbsp&nbsp&nbsp

                                            <img src="images\tele.png">&nbsp&nbsp <font color="white"> +55 11 3656-9053 (Comercial) </font>
                                            <img src="images\tele.png">&nbsp&nbsp <font color="white"> +55 11 3603-9226 (Central)</font>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                            <img src="images\tele.png">&nbsp&nbsp <font color="white"> +55 11 3656-9053 </font>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                            <span>Comercial das 8:00 às 17:00 horas</span>
                                        </div>
                                        <div class="f-blog-artical f-blog-artical1">
                                            <p>Ligue ! Tire suas duvidas e faça seu orçamento.</p>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="footer-grid site-map">
                                        <h5>Mapa do site</h5>
                                        <ul>
                                            <li><a href="index.html"><span> </span>Inicio</a></li>
                                            <li><a href="about.html"><span> </span>Sobre</a></li>
                                            <li><a href="services.html"><span> </span>Serviços</a></li>
                                            <li><a href="products.html"><span> </span>Frota</a></li>
                                            <li><a href="contact.html"><span> </span>Contato</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="footer-grid f-gallery">
                                        <h5>Galeria</h5>
                                        <div class="f-gallery-grids">
                                            <div class="f-gallery-grid">
                                                <ul>
                                                <li><a href="products.html"><img src="images/minisportage.jpg" title="Sportage" /></a></li>
                                                    <li><a href="#"><img src="images/minivan.jpg" title="name" /></a></li>
                                                    <li><a href="#"><img src="images/minicorolla.jpg" title="name" /></a></li>
                                                    <li><a href="#"><img src="images/miniazera.jpg" title="name" /></a></li>
                                                    <li><a href="#"><img src="images/minifusion.jpg" title="name" /></a></li>
                                                    <li><a href="#"><img src="images/minicivic.jpg" title="name" /></a></li>
                                                    <div class="clearfix"> 
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                        </div>
                    </div>
                    <!-- /footer -->
                    <!-- footer-bottom -->
                    <div class="footer-bottom">
                        <div class="container">
                            <div class="footer-bottom-left">
                                <p>&copy; 2017&nbsp;<a href="index.html">LGR TRANSPORTES</a>, All Rights Reserved</p>
                            </div>
                            <div class="footer-bottom-right">
                                <ul>
                                    <li><a href="#">Facebook</a></li>
                                    <li><a href="#">Twitter</a></li>
                                    <li><a href="#">Google+</a></li>
                                </ul>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </div>
                    <!-- footer-bottom -->
        </div>
        <!-- /container -->
    </body>
</html>

JAVASCRIPT


  $("#contactForm").submit(function (e) {

            e.preventDefault();
            var $ = jQuery;

            var postData = $(this).serializeArray(),
                formURL = $(this).attr("action"),
                $cfResponse = $('#contactFormResponse'),
                $cfsubmit = $("#cfsubmit"),
                cfsubmitText = $cfsubmit.text();

            $cfsubmit.text("Sending...");


            $.ajax(
                {
                    url: formURL,
                    type: "POST",
                    data: postData,
                    success: function (data) {
                        $cfResponse.html(data);
                        $cfsubmit.text(cfsubmitText);
                        $('#contactForm input[name=name]').val('');
                        $('#contactForm input[name=email]').val('');
                        $('#contactForm textarea[name=message]').val('');
                    },
                    error: function (data) {
                        alert("Erro ao enviar! Tente novamente");
                    }
                });

            return false;

        });


        /*===============================================================
         Working Request A Call Form
         ================================================================*/

        $("#requestACall").submit(function (e) {

            e.preventDefault();
            var $ = jQuery;

            var postData = $(this).serializeArray(),
                formURL = $(this).attr("action"),
                $cfResponse = $('#requestFormResponse'),
                $cfsubmit = $("#racSubmit"),
                cfsubmitText = $cfsubmit.text();

            $cfsubmit.text("Carregando...");


            $.ajax(
                {
                    url: formURL,
                    type: "POST",
                    data: postData,
                    success: function (data) {
                        $cfResponse.html(data);
                        $cfsubmit.text(cfsubmitText);
                        $('#requestACall input[name=name]').val('');
                        $('#requestACall input[name=subject]').val('');
                        $('#requestACall textarea[name=phone]').val('');
                    },
                    error: function (data) {
                        alert("Erro ao enviar! Tente novamente");
                    }
                });

            return false;

        });


        /*===============================================================
         Working Reservation Form
         ================================================================*/

        $("#reservationForm").submit(function (e) {

            e.preventDefault();
            var $ = jQuery;

            var postData = $(this).serializeArray(),
                formURL = $(this).attr("action"),
                $cfResponse = $('#reservationFormResponse'),
                $cfsubmit = $("#rfsubmit"),
                cfsubmitText = $cfsubmit.text();

            $cfsubmit.text("Sending...");


            $.ajax(
                {
                    url: formURL,
                    type: "POST",
                    data: postData,
                    success: function (data) {
                        $cfResponse.html(data);
                        $cfsubmit.text(cfsubmitText);
                        $('#reservationForm input[name=date]').val('');
                        $('#reservationForm input[name=time]').val('');
                        $('#reservationForm textarea[name=people]').val('');
                        $('#reservationForm textarea[name=email]').val('');
                    },
                    error: function (data) {
                        alert("Error occurd! Please try again");
                    }
                });

            return false;

        });


        /* ---------------------------------------------- /*
         * Subscribe form ajax
         /* ---------------------------------------------- */

        $('#subscription-form').submit(function(e) {

            e.preventDefault();
            var $form           = $('#subscription-form');
            var submit          = $('#subscription-form-submit');
            var ajaxResponse    = $('#subscription-response');
            var email           = $('input#semail').val();

            $.ajax({
                type: 'POST',
                url: 'confirmacao.html',
                dataType: 'json',
                data: {
                    email: diogo.reis@contecinformatica.com.br
                },
                cache: false,
                beforeSend: function(result) {
                    submit.empty();
                    submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
                },
                success: function(result) {
                    if(result.sendstatus == 1) {
                        ajaxResponse.html(result.message);
                        $form.fadeOut(500);
                    } else {
                        ajaxResponse.html(result.message);
                    }
                }
            });

        });
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags html javascript ou faça a sua própria pergunta.