HTML + AJAX: Contact form

Question

I have a contact form next to a google map. So far blz. But I’m catching in AJAX to make that when someone clicks in SEND appear an awesome font Gear and when successfully completed appear 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 there’s anything missing I put on!

Visually it is so:

Figure 1 - Form ready to be filled out

Figure 2 - fa fa-spin fa-Cog running while it is sent to contact.php

Figure 3 - fa fa-check for when to finish and then return to figure 1 state

Answer 1

Create a layer overlay (a div over the form with semi-transparent background) and place the icon Gear centralized:

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

Put this div after closing </form>.

Bootstrap native classes (v4) w-100 and h-100 cause div to occupy 100% of the container width and height. This container also needs to have position: relative, so add this property to:

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

See that I put one id in the div and a class in the <i> of the Fontawesome called icone, where in CSS I define its properties:

#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 background-color: rgba(255, 255, 255, .5); a white background with half transparency has been defined (.5). The class .icone sets the icon color. This you can change as you think best.

Put in the beforeSend: ajax:

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

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

In the callback error: enter the code:

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

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

In success: put the code below to change the icon in check in and reset the form:

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