HTML form with mailto action does not work due to insecure endpoint

Question

I am trying to make a wordpress form by typing directly the html code on a template block (that's to match exactly with the visual design required) and it's not working. I receive this error message on chrome console:

Mixed Content: The page at 'https://protegetumarcaonline.com/' was loaded over a secure connection, but contains a form that targets an insecure endpoint 'mailto:[email protected]'. This endpoint should be made available over a secure connection.

https://photos.app.goo.gl/687cUavnacTQ94fF7

This is the form code:

<form action="mailto:[email protected]" method="get" enctype="text/plain">
        
                            SOBRE TI <br><br>
                            Nombre*<br>
                            <input style="width:100%;" type="text" name="nombre" required="" class="czr-focusable">
                            Email*<br>
                            <input style="width:100%;" type="text" name="email" required="" class="czr-focusable">
                            ¿Tienes web?<br>
                            <input style="width:100%;" type="text" name="web" class="czr-focusable">
                       
                            Marca*
                            <input style="width:100%;" type="text" name="marca" required="" class="czr-focusable">
                            Productos y/o Servicios de interés*
                            <textarea style="width: 100%; margin-top: 0px; margin-bottom: 0px; height: 82px;" name="mensaje" required="" class="czr-focusable">                                </textarea>
                            <input type="checkbox" name="Facebook"> Facebook<br>
                            <input type="checkbox" name="Instagram"> Instagram<br>
                            <input type="checkbox" name="Twitter"> Twitter<br>
                            <input type="checkbox" name="Web propia"> Web propia<br>
                            <input type="checkbox" name="Amazon"> Amazon<br>
                            <input type="checkbox" name="Alibaba"> Alibaba<br>
                            <input type="checkbox" name="Otras"> Otras<br>
                       
                
                            <input type="checkbox" required="" name="politica"> Acepto la política de privacidad*<br>
                            <input type="checkbox" name="comunicaciones"> Acepto recibir comunicaciones comerciales e informativas<br><br>
                            <input type="image" src="wp-content/uploads/2020/11/icono-ENVIAR.png" value="Enviar" name="enviar" alt="Enviar" width="110 style=" border:="" none;"="">

I have tried to use method post as well with same result. The website is: https://protegetumarcaonline.com/

What could I do?

Thank you very much, Miguel Gisbert

Answer 1

There is no way to use "mailto:" with a secure connection, since mailto: opens an application to send the mail. An application that may or may not use a secure protocol (TLS).

One way to fix this would be to use a POST form that calls a PHP script to send mail. So your HTML looks like something like this:

<form method="post" action="/wp-content/php_scripts/send_mail.php">
    SOBRE TI <br><br>
    Nombre*<br>
    <input style="width:100%;" type="text" name="nombre" required="" class="czr-focusable">
    Email*<br>
    <input style="width:100%;" type="text" name="email" required="" class="czr-focusable">
    ¿Tienes web?<br>
    <input style="width:100%;" type="text" name="web" class="czr-focusable">        
    Marca*
            <input style="width:100%;" type="text" name="marca" required="" class="czr-focusable">
    Productos y/o Servicios de interés*
    <textarea style="width: 100%; margin-top: 0px; margin-bottom: 0px; height: 82px;" name="mensaje" required="" class="czr-focusable">                                </textarea>
    <input type="checkbox" name="Facebook"> Facebook<br>
    <input type="checkbox" name="Instagram"> Instagram<br>
    <input type="checkbox" name="Twitter"> Twitter<br>
    [...]
    <input type="submit">
</form>

And your PHP file send_mail.php

<?php
/**
 * Filter the mail content type.
 */
function wpdocs_set_html_mail_content_type() {
    return 'text/html';
}
add_filter( 'wp_mail_content_type', 'wpdocs_set_html_mail_content_type' );

$message = '<p>Nombre:' . $_POST['nombre'] . '</p><p>Email:' . $_POST['email'] .'</p><p>...</p>';
$result = wp_mail('[email protected]', 'New mail', $message);
if ($result ) {
    // Do something here
}
// Reset content-type to avoid conflicts -- https://core.trac.wordpress.org/ticket/23578
remove_filter( 'wp_mail_content_type', 'wpdocs_set_html_mail_content_type' );
?>

wp_mail doc: https://developer.wordpress.org/reference/functions/wp_mail/

wp_mail_content_type: https://developer.wordpress.org/reference/hooks/wp_mail_content_type/

Answer 2

mailto opens your default mail-sending application. Security of sent message depends on the application and not on the mailto method.

If you are not sending anything sensitive like bank details or password, you can just click on send anyway button, and the mailto method will proceed as usual.