Email form does not only work on smartphones!

Question

Hey, guys! All right? This is my first post here. I’m in a bit of a silly problem, but three, four days ago! I started to develop recently and this is my first commercial project. It’s practically ready, but my email form isn’t working when the resolution is 360px (for smartphones). The funny thing is that it works for desktops, it works on laptops, tablets, but not for mobile. Another important information is that it is not local, it is already on server.

For the collection and sending of the information, I am using Phpmailer. I will pass the source codes to please take a look!

In addition to Phpmailer, I’m also using the slim Framework v2 and bootstrap 3.

CONTACT FORM - DESKTOPS

 <div class="contato-Coluna1 col-sm-4 col-md-4 col-lg-4">
        <h4>ENTRE EM CONTATO</h4>
        <hr>

        <form action="mail" method="POST">
              <div class="form-group">
                <input type="text" class="form-control" name="campoNome" placeholder="Nome: ">                 
              </div>

              <div class="form-group">                  
                <input type="text" class="form-control" name="campoCidade" placeholder="Cidade: ">
              </div>

              <div class="form-group">                  
                <input type="email" class="form-control" name="campoEmail" placeholder="Email: ">
              </div>

              <div class="form-group">                  
                <input type="number" class="form-control" name="campoTelefone" placeholder="Telefone: ">
              </div>

              <div class="form-group">
                  <label for="comment">Deixe sua mensagem:</label>
                  <textarea class="form-control" rows="5" name="campoMensagem"></textarea>
              </div>                  

              <button type="submit" class="btn btn-primary" id="btnEnviarForm">Enviar</button>
        </form>
    </div>

SOURCE CODE MOBILE VERSION

    <div class="mobileContato visible-xs visible-sm">
    <h4 class="text-center">ENTRE EM CONTATO</h4>
        <hr>

        <form action="mail" method="POST">
              <div class="form-group">
                <input type="text" class="form-control" name="campoNome" placeholder="Nome: ">                 
              </div>

              <div class="form-group">                  
                <input type="text" class="form-control" name="campoCidade" placeholder="Cidade: ">
              </div>

              <div class="form-group">                  
                <input type="email" class="form-control" name="campoEmail" placeholder="Email: ">
              </div>

              <div class="form-group">                  
                <input type="number" class="form-control" name="campoTelefone" placeholder="Telefone: ">
              </div>

              <div class="form-group">
                  <label for="comment">Deixe sua mensagem:</label>
                  <textarea class="form-control" rows="5" name="campoMensagem"></textarea>
              </div>                  

              <button type="submit" class="btn btn-primary" id="btnEnviarForm">Enviar</button>
        </form>
</div>

PHPMAILER CONFIGURATION (I removed the information like emails and passwords here from the code, but in this part, it’s all right. So much so that, as I said, for desktop it sends).

$app->post(
'/mail',
function () {

    $nome = $_POST['campoNome'];
    $cidade = $_POST['campoCidade'];
    $email = $_POST['campoEmail'];
    $tel = $_POST['campoTelefone'];
    $msg = $_POST['campoMensagem'];

    $mensagem = "<strong>Nome: </strong>" . $nome . "<br>";
    $mensagem .= "<strong>Cidade: </strong>" . $cidade . "<br>";
    $mensagem .= "<strong>Email: </strong>" . $email . "<br>";
    $mensagem .= "<strong>Telefone: </strong>" . $tel . "<br><br>";
    $mensagem .= "<strong>Mensagem: </strong>" . "<br>" . $msg;

    require_once("class/class.phpmailer.php");

    $mail = new PHPMailer(true);

    $mail->IsSMTP();

    try {
         $mail->Host = '' ; // Endereço do servidor SMTP (Autenticação, utilize o host smtp.seudomínio.com.br)
         $mail->SMTPAuth   = true;  // Usar autenticação SMTP (obrigatório para smtp.seudomínio.com.br)
         $mail->Port       = 587; //  Usar 587 porta SMTP
         $mail->Username = ''; // Usuário do servidor SMTP (endereço de email)
         $mail->Password = ''; // Senha do servidor SMTP (senha do email usado)

         //Define o remetente
         // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=    
         $mail->SetFrom('', ''); //Seu e-mail
         $mail->AddReplyTo('', ''); //Seu e-mail
         $mail->Subject = '' . $nome;//Assunto do e-mail

        //Define os destinatário(s)
         //=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
         $mail->AddAddress('', '');

         //Define o corpo do email
         $mail->MsgHTML('corpo do email'); 

         $mail->Body = $mensagem;

         $mail->Send();


         //caso apresente algum erro é apresentado abaixo com essa exceção.
        } catch (phpmailerException $e) {
            echo $e->errorMessage(); //Mensagem de erro costumizada do PHPMailer
          }
});

If you can then help me in this, I will be very grateful because this is all missing to finish the project.

Thanks a lot!

Answer 1

There is a conflict between forms on the page. When you submit the second form, you are actually sending the first one. To avoid this, use the HTML5 attribute formaction in each button Submit of each form.

It is necessary also include the attribute formmethod="post", and dispense with the attribute method="post" in tag <form>:

<form>
    <button formmethod="post" formaction="pagina1.php" type="submit">Enviar</button>
</form>

<form>
    <button formmethod="post" formaction="pagina2.php" type="submit">Enviar</button>
</form>

Compatibility:

References:

• formaction
• formmethod