Form in Html

Asked

Viewed 217 times

0

I am trying to create a contact form in html, but when I send it, it opens the outlook and defaults the information. How do I? 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>
  • 2

    Just define the action as mailto does not send the email. You will need to do this manually with some programming language (or third party service).

  • you could help me?

  • Check out this link, Paula: https://www.oficinadanet.com.br/post/12811-formulario-contactus

1 answer

2

The protocol mailto is a special type of URL that opens the default application of user device emails.

The message was "disfigured" because the parameters were not passed to the URL. There are basically two: subject (subject of the message) and body (message body). The URL has the following format (removed from this link: Email sharing link)

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

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

<!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 was Gmail

Exemplo 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 comment and use some third-party service or an email service of your own (if applicable).

  • 1

    Thank you very much! You could refer me some third party service for this type of form?

  • I know Mandrill, but now he’s paid https://medium.com/@i_shivendra/sending-a-mail-without-a-backend-using-js-ae15c0aec2cb

  • 1

    Thanks for the feedback. but the platform suggested using Jotform :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.