I would like to ask you for help.

I created a contact form in HTML and JavaScript, but when I try to send the email, it just doesn't do anything, nothing happens.

See the code below:

/*----------------------------------------------------*/
/*  contact form
------------------------------------------------------*/

$('form#contactForm button.submit').click(function() {

  $('#image-loader').fadeIn();

  var contactName = $('#contactForm #contactName').val();
  var contactEmail = $('#contactForm #contactEmail').val();
  var contactSubject = $('#contactForm #contactSubject').val();
  var contactMessage = $('#contactForm #contactMessage').val();

  var data = 'contactName='   contactName   '&contactEmail='   contactEmail  
    '&contactSubject='   contactSubject   '&contactMessage='   contactMessage;

  $.ajax({

    type: "POST",
    url: "inc/sendEmail.php",
    data: data,
    success: function(msg) {

      // Message was sent
      if (msg == 'OK') {
        $('#image-loader').fadeOut();
        $('#message-warning').hide();
        $('#contactForm').fadeOut();
        $('#message-success').fadeIn();
      }
      // There was an error
      else {
        $('#image-loader').fadeOut();
        $('#message-warning').html(msg);
        $('#message-warning').fadeIn();
      }

    }

  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form -->
<form action="mailto:[email protected]" method="post" enctype="multipart/form-data" id="contactForm" name="contactForm">
  <fieldset>

    <div>
      <label for="contactName">Nome <span class="required">*</span></label>
      <input type="text" value="" size="35" id="contactName" name="contactName">
    </div>

    <div>
      <label for="contactEmail">E-mail <span class="required">*</span></label>
      <input type="text" value="" size="35" id="contactEmail" name="contactEmail">
    </div>

    <div>
      <label for="contactSubject">Assunto</label>
      <input type="text" value="" size="35" id="contactSubject" name="contactSubject">
    </div>

    <div>
      <label for="contactMessage">Mensagem <span class="required">*</span></label>
      <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
    </div>

    <div>
      <button class="submit" action="mailto:[email protected]">Enviar</button>
      <span id="image-loader">
                        <img alt="" src="images/loader.gif">
                     </span>
    </div> -->

  </fieldset>
</form>
<!-- Form End -->

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I hope you can help me.

Thank you in advance.

I apologize if it's a simple problem, but I'm still new to programming.

CodePudding user response：

$(document).ready(function(){
$('.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName='   contactName   '&contactEmail='   contactEmail  
'&contactSubject='   contactSubject   '&contactMessage='   contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
});

CodePudding user response：

I found a solution, faster, simpler and very cool.

See the code below:

               <form action="https://formspree.io/f/mbjwrqov" method="POST" enctype="multipart/form-data" id="contactForm" name="contactForm">
                    <fieldset>

                  <div>
                           <label for="contactName">Nome <span class="required">*</span></label>
                           <input type="text" value="" size="35" id="contactName" name="Nome">
                  </div>

                  <div>
                           <label for="contactEmail">E-mail <span class="required">*</span></label>
                           <input type="text" value="" size="35" id="contactEmail" name="Email">
                  </div>

                  <div>
                           <label for="contactSubject">Assunto</label>
                           <input type="text" value="" size="35" id="contactSubject" name="Assunto">
                  </div>

                  <div>
                     <label for="contactMessage">Mensagem <span class="required">*</span></label>
                     <textarea cols="50" rows="15" id="contactMessage" name="Mensagem"></textarea>
                  </div>

                  <div>
                     <button class="submit">Enviar</button>
                     <span id="image-loader">
                        <img alt="" src="images/loader.gif">
                     </span>
                  </div>

                    </fieldset>
                   </form>
              <!-- Form End -->

Formspree http://formspree.io/

The site itself already creates HTML, and I just had to comment on the JavaScript part so as not to give problem or conflict.

Basically, the site already does the intermediary.

A note: The site I created is hosted on GitHub Pages.