Form in Html

0

I'm trying to create a contact form in html, but when I send it, it opens the Outlook and misconfigures the information. How I do? The form will be included within an ecommerce.

<form action="mailto:[email protected]" method="post">
<p><span style="color: #283649; font-size: 14px;">Equipamento*</span></p>
<input name="size" type="radio" value="Solar Banho" />Aquecedor Solar Banho<br />
<input name="size" type="radio" value="Solar Piscina" />Aquecedor Solar Piscina<br />
<input name="size" type="radio" value="Solar Piscina" />Aquecimento a Gas<br />
<input name="size" type="radio" value="Solar Piscina" />Energia Solar Fotovoltaica<br />
<input name="size" type="radio" value="Solar Piscina" />Equipamentos para Piscina
<p><span style="color: #283649; font-size: 14px;">Nome*</span></p>

<p><input maxlength="100" name="Nome1" size="100" type="text" value=" " /></p>

<p><span style="color: #283649; font-size: 14px;">E-mail*</span></p>

<p><input maxlength="100" name="Nome1" size="100" type="text" value=" " /></p>

<p><span style="color: #283649; font-size: 14px;">Cidade/Estado*</span></p>

<p><input maxlength="100" name="Nome1" size="100" type="text" value=" " /></p>

<p><span style="color: #283649; font-size: 14px;">Telefone*</span></p>

<p><input maxlength="100" name="Nome1" size="100" type="text" value=" " /><br />
<input type="submit" value="Email Yourself" /></p>
</form>
    
asked by anonymous 04.09.2018 / 00:34

1 answer

1

The mailto protocol is a special type of URL that opens the default e-mail application for the user's device.

The message was "unconfigured" because no parameters were passed to the URL. They are basically two: subject (message subject) and body (message body). The URL has the following format (removed from this link: Share Link by e -mail )

  

mailto:[E-MAIL]?subject=[ASSUNTO]&body=[CORPO-DA-MENSAGEM]

If your goal is for the contact form to open the user's default email application, then you can follow an approach like the following HTML (I basically modified your code), which gets the field via JavaScript, fills the URL mailto and opens it using the window.open(url, target) function.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Form</title>
</head>
<body>
    <script>
        function submitForm(){
            var mailtoURL = "mailto:[email protected]?"; //URL do protocolo mailto

            //obtém o equipamento
            var equipamento = document.querySelector("#contato input[name='size']:checked").value;

            //obtém o nome
            var nome = document.querySelector("#contato input[name='Nome1']").value;

            //obtém o valor do campo Cidade/Estado
            var cidadeUf = document.querySelector("#contato input[name='cidade-uf']").value;

            //obtém o e-mail do remetente
            var emailremetente = document.querySelector("#contato input[name='mail']").value;

            //obtém o telefone
            var telefone = document.querySelector("#contato input[name='telefone']").value;

            //o assunto da mensagem é o nome do equipamento (você pode mudar)
            var assunto = encodeURIComponent(equipamento);

            //corpo da mensagem: contém nome, cidade/estado, telefone e e-mail do remetente
            var corpoMgs = encodeURIComponent("Nome: " + nome) + '%0D%0A';
            corpoMgs += encodeURIComponent("Cidade/Estado: " + cidadeUf) + '%0D%0A';
            corpoMgs += encodeURIComponent("Telefone: " + telefone) + '%0D%0A';
            corpoMgs += encodeURIComponent("e-mail: " + emailremetente);

            //acrescenta o corpo da mensagem e o assunto à URL do mailto
            mailtoURL += "subject="+assunto+"&body="+corpoMgs;

            //abre uma nova guia/janela com a url (isso vai abrir o aplicativo padrão de e-mails)
            window.open(mailtoURL, '_black');
        }        
    </script>
    <form id="contato" onsubmit="submitForm()">
        <p><span style="color: #283649; font-size: 14px;">Equipamento*</span></p>
        <input name="size" type="radio" value="Solar Banho" checked />Aquecedor Solar Banho<br />
        <input name="size" type="radio" value="Solar Piscina" />Aquecedor Solar Piscina<br />
        <input name="size" type="radio" value="Aquecimento a Gás" />Aquecimento a Gás<br />
        <input name="size" type="radio" value="Energia Solar Fotovoltaica" />Energia Solar Fotovoltaica<br />
        <input name="size" type="radio" value="Equipamentos para Piscina" />Equipamentos para Piscina
        <p><span style="color: #283649; font-size: 14px;">Nome*</span></p>
        <p><input maxlength="100" name="Nome1" size="100" type="text" value=" " /></p>
        <p><span style="color: #283649; font-size: 14px;">E-mail*</span></p>
        <p><input maxlength="100" name="mail" size="100" type="text" value=" " /></p>
        <p><span style="color: #283649; font-size: 14px;">Cidade/Estado*</span></p>
        <p><input maxlength="100" name="cidade-uf" size="100" type="text" value=" " /></p>
        <p><span style="color: #283649; font-size: 14px;">Telefone*</span></p>
        <p><input maxlength="100" name="telefone" size="100" type="text" value=" " /><br />
        <input type="submit" value="Email Yourself" /></p>
    </form>    
</body>

</html>

The following image is an example of what it would look like if the default application were Gmail

Keep in mind that this method is limited and will not work if the user does not have an email application installed. I suggest you do as Anderson suggested in the commentary and use some third party service or e-mail service itself (if any).

    
04.09.2018 / 08:35