Call a preloader before sending contact

I suggest using $.ajax instead of $.post , since the former has a method for doing so. In other words, it is more complete. You could use it like this:

$.ajax({
    method: "POST",
    url: "carregamentos/solucoes.php",
    beforeSend: function (xhr) {
        $('#divOndeQueresMostrarPreload').html('preload.gif');
    },
    data: $('#solucoesFormulario').serialize(),
    success: function (abc) {
        // "Mensagem enviada com sucesso", logo, o processo do post acaba aqui, já podemos retirar a imagem.
        alert('Mensagem enviada com sucesso!');
    }
});

Another suggestion to make this validation:

function solucoesForm() {
    var toValidate {
        soluctionsName: 'Nome',
        soluctionsEmail: 'E-mail',
        soluctionsPhone: 'Telefone',
        soluctionsCidade: 'Cidade',
        soluctionsEmpresa: 'Empresa'
    }
    var validated = true;
    Object.keys(toValidate).forEach(function (key) {
        if (!validated) return;
        var val = $.trim(document.getElementById(key).value);
        if (val && val != toValidate[key]) return;
        alert('Por favor complete o campo ' + key);
        validated = false;
    });

    if (validated) $.ajax({
        method: "POST",
        url: "carregamentos/solucoes.php",
        beforeSend: function (xhr) {
            $('#divOndeQueresMostrarPreload').html('preload.gif');
        },
        data: $('#solucoesFormulario').serialize(),
        success: function (abc) {
            // "Mensagem enviada com sucesso", logo, o processo do post acaba aqui, já podemos retirar a imagem.
            alert('Mensagem enviada com sucesso!');
        }
    });
    return false;
}

Do you want the code to make the gif appear? I believe that this is your responsibility, what you are looking for should be logic. It's very simple, you want an image to appear when you click to send it, and when it's over, it adds up, right? You can view the image after the validation is complete, before performing post , so it gives an immediate response to the user that something is being done. After that, you need to wait for%% to complete. In your example you already showed when it is completed, so it is there that the command should be placed for the image to disappear.

function solucoesForm() {
  if ($.trim($('#soluctionsName').val()) == '' || $.trim($('#soluctionsName').val()) == 'Nome') alert('Informe seu nome!');
  else if ($.trim($('#soluctionsEmail').val()) == '' || $.trim($('#soluctionsEmail').val()) == 'E-mail') alert('Informe seu e-mail!');
  else if ($.trim($('#soluctionsPhone').val()) == '' || $.trim($('#soluctionsPhone').val()) == 'Telefone') alert('Informe seu telefone!');
  else if ($.trim($('#soluctionsEmpresa').val()) == '' || $.trim($('#soluctionsEmpresa').val()) == 'Empresa') alert('Informe a Empresa!');
  else if ($.trim($('#soluctionsCidade').val()) == '' || $.trim($('#soluctionsCidade').val()) == 'Cidade') alert('Informe sua Cidade!');
  else {
    // Fomulário validade, exibe uma mensagem de carregamento
    $.post('carregamentos/solucoes.php',
      $('#solucoesFormulario').serialize(),
      function(abc) {
        // "Mensagem enviada com sucesso", logo, o processo do post acaba aqui, já podemos retirar a imagem.
        alert('Mensagem enviada com sucesso!');
      }
    );
  }
  return false;
}

You can create a block in your HTML document containing the content that will be shown at the time of the request. For example:

// foo.css
.imagem-carregando { visibility: hidden }

// foo.html
<img class='imgem-carregando' src='imagem.gif'>

It would only be necessary at the time of the request to change the rule of this element to visibility:visible .

To do this, you can use the $.ajax function that has more events to control the request, defining what should be done before and / or after it is sent - $. ajax events .

$(function() {
  $("#solucoesFormulario").on("submit", function(event) {
    event.preventDefault();

    var data = $(this).serialize();
    $.ajax({
      url: "carregamentos/solucoes.php",
      type: "post",
      data: data,
      
      // chamada antes de enviar a requisição
      // alteramos para mostra a imagem
      beforeSend: function(xhr) {
        $(".carregando").css('visibility', 'visible');
      },
      
      // chamada quando a requisição termina (seja com erro ou OK)
      // alteramos e escondemos a imagem
      complete: function(jqXHR, textStatus) {
        $(".carregando").css('visibility', 'hidden');
      },
      
      success: function(data, textStatus, jqXHR) {
        alert('Mensagem enviada com sucesso!');
      }
    });
  });
});

.carregando{ visibility: hidden }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><imgclass='carregando'src='http://i.stack.imgur.com/xwRrg.gif'alt=''/><formid="solucoesFormulario" action="#">
  <!--
    inputs
  -->
  <button type='submit'>Enviar</button>
</form>