HTML + AJAX: Contact form

Question

HTML + AJAX: Contact form

Navigation

#1 by (0 votes)

1

I have a contact form next to a google map. Until then blz. But I'm catching up on AJAX to do that when someone clicks SEND appear an awesome font gear and when it's done successfully come up with an awesome font check and clear the form.

CSS:

* {
  box-sizing: border-box;
}
/* Style inputs */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
     font-size: 0.7em;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Style the container/contact section */
.container2 {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}
/* Create two columns that float next to eachother */
.column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
     font-size: 0.7em !important;
     color: #000;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .column, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

HTML:

<div align="center">
    <div class="container2">
        <div class="row">
            <div class="column">
                <div id="map" style="width:100%;height:600px"></div>
            </div>
        <div class="column" align="left">
            <form action="contato.php" method="POST" id="contactform">
                <label for="fullname">Seu nome</label>
                <input type="text" id="fullname" name="fullname" placeholder="Nome" required>
                <label for="email">E-mail</label>
                <input type="text" id="email" name="email" placeholder="E-mail" required>
                <label for="assunto">Assunto</label>
                <input type="text" id="assunto" name="assunto" placeholder="Assunto" required>
                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" name="mensagem" placeholder="Escreva alguma coisa" style="height:170px"></textarea>
                <div align="right">
                    <input type="submit" value="Enviar">
                </div>
                <br />
            </form>
        </div>
        <div align="center" id="resp"></div>
    </div>
</div>

JAVASCRIPT:

$('#contactform').submit(function(e) {
    e.preventDefault();
    const nome = $('input[name="fullname"]').val();
    const email = $('input[name="email"]').val();
    const assunto = $('input[name="assunto"]').val();
    const mensagem = $('textarea[name="mensagem"]').val();
    $.ajax({
        url: 'contato.php', // caminho para o script que vai processar os dados
        type: 'POST',
        data: {nome: nome, email: email, assunto: assunto, mensagem: mensagem},
        beforeSend: function() {
            $("input[type='submit']").attr('disabled', 'disabled'); 
        },
        complete: function() {

        },
        success: function(response) {
            $('#resp').html(response);
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
    return false;
});

If anything is missing I post!

Visually looks like this:

Figure 1 - Ready to fill out form

Figure 2 - fa fa-spin fa-cog running while being sent to contact.php

Figure 3 - fa fa check for when you finish and return there in the state of Figure 1

ajax

asked by anonymous 31.10.2018 / 21:58

1 answer

Select 2 information from a json wicked_pdf trying to use wrong version of Ruby

score 0 · Accepted Answer

Create a overlay layer (a div over the semi-transparent background form) and place the gear

<div id="icone" class="w-100 h-100"><i class="fa fa-cog fa-6x icone" aria-hidden="true"></i></div>

Place this div after closing </form> .

Bootstrap native classes (v4) w-100 and h-100 make the div occupy 100% in container width and height. It is also necessary that this container has position: relative , so also add this property in:

* {
  box-sizing: border-box;
  position: relative;
}

#icone{
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(255, 255, 255, .5);
   display: none;
   justify-content: center;
   align-items: center;
}

.icone{
   color: #1D03FF;
}

In% with% a white background has been set with half transparency (% with%). The id class sets the icon color. This you can change as you see fit.

Place in% Ajax%:

$("#icone").css("display", "flex");

This will display the hidden div with the gear icon when firing Ajax.

In callback class put the code:

$("#icone").hide();

This will hide the div if there is an error in Ajax.

In <i> put the code below to change the icon in check and reset the form:

$("#icone i").addClass("fa-check").removeClass("fa-cog");
$("#contactform").trigger("reset");