Diseño de Un Formulario HTML para Recabar Informacion y Ser Enviado A Una Dirección de Correo Electrónico

24/1/2020 Cómo crear un formulario HTML que pueda ser enviado a una dirección de correo electrónico
Cómo crear un formulario HTML que pueda ser enviado a

una dirección de correo electrónico
Información del autor
Puedes crear un formulario básico que envíe la información que solicites a una dirección de correo electrónico, usando
herramientas básicas como un editor de texto, un navegador y un cliente de correo electrónico. Este método emplea
elementos básicos de un formulario, que no requiere ningún programa especial en el servidor web.
Esto puede funcionar bien en un ambiente comercial interno bajo control. Sin embargo, recuerda que este método tiene una
utilidad limitada, ya que los usuarios de Internet están cambiando los clientes de correo de escritorio por los servicios de
correo web como Gmail. Tus visitantes también recibirán advertencias de seguridad al intentar enviar formularios de esta
manera. Existen muchos servicios gratuitos y pagados que no permiten recolectar información de los visitantes que escogen
usar un correo web.
Pasos
1 Abre una sesión en blanco de un editor de texto (como el Bloc de notas en Windows), o si tienes
acceso a una herramienta de edición de páginas web, crea una página web básica.
2 Crea una página web usando el esqueleto HTML básico:
<html>
<head>
<title>Inserta tu título aquí</title>
</head>
<body>
</body>
</html>
3 Ingresa cada una de estas etiquetas en un renglón diferente, excepto por las etiquetas <title> y
</title>, que pueden ir en el mismo renglón. Las páginas web no requieren este formato, pero sí le
mejora la legibilidad de los documentos web a las personas comunes y corrientes.
4 Entre las etiquetas <title> y </title> inserta el nombre de la página o del proyecto. Por ejemplo, la
información que quieras que solicite la página.
5 Presiona {Intro} después de la etiqueta <body>.
6 En el renglón resultante, escribe el código que sigue, reemplazando la dirección de correo

electrónico con aquella a la que quieras que se envíe el formulario:
<form action="MAILTO:usuario@servidordeemail.ext" method="GET" enctype="text/plain">
7 Presiona {Intro} dos veces y escribe </form> antes de la etiqueta de cierre </html>.
8
https://es.wikihow.com/crear-un-formulario-HTML-que-pueda-ser-enviado-a-una-direcci%C3%B3n-de-correo-electr%C3%B3nico 1/3
Para comenzar con los elementos de tu formulario, decide si querrás usar botones radiales (que se
puede seleccionar solo una de las opciones de la lista), casillas de verificación (respuestas múltiples en
una lista), o una caja de texto.
9 Para crear cualquier pregunta, escribe en el documento web debajo de la etiqueta <form>, en su
propio renglón. Por ejemplo,
<p> 1. ¿Cuál es tu destino turístico favorito?</p>
mostrará esa pregunta en la página.
10 Para crear un botón radial, escribe:
<input type="radio" name=“1“ value="Las Tierras Altas de Escocia"> Las Tierras Altas de Escocia
11 El valor de type le dice al navegador que busque un botón radial. Todos los botones relacionados
deben compartir un nombre. Todos los botones radiales nombrados “1” son mutuamente exclusivos, o
sea que los usuarios solo podrán seleccionar una de las opciones del grupo. El valor se pasará al mensaje de
correo electrónico, y el texto después de la etiqueta <input...> es lo que muestra el navegador. Crea más
botones radiales para todas las respuestas relacionadas.
12 Si vas a poner más botones radiales, deberán tener un nombre distinto.
13 Las casillas de verificación funcionan de la misma manera, pero el código usa type="checkbox"
en su lugar. Por ejemplo,
<input type="checkbox" name=“2“ value="Antártida" /> Donde hay pingüinos.
Las cajas de verificación no son mutuamente excluyentes, o sea que podrías seleccionar todos los elementos de un grupo de casillas de
verificación.
14 Se muestra una caja de texto en la que el usuario puede escribir una respuesta abierta. El código
es así:
<input type="text" name=“3“ size="100">
15 Se puede ajustar el tamaño para agrandar la caja, representando la cantidad de caracteres que
entrarán en la caja, según la fuente base de la página web.
16 Escribe el código que sigue para crear una lista desplegable en la que los usuarios podrán
seleccionar de entre una cantidad de opciones:
<select name=“destinos_vacaciones“>
<option value="Escoge uno:" selected="selected">Escoge uno:</option>
<option value="Manunka Chunk, NJ">Manunka Chunk, NJ</option>
<option value="Arthur's Seat">Arthur's Seat, Edinburgo, Escocia</option>
<option value="Cicely, AK">Cicely, AK</option>
</select>
17 El atributo selected=‘‘selected’‘ significa que es la opción predeterminada cuando se carga la

página.
18 Escribe los dos renglones que siguen al final del documento, antes de la etiqueta </form>, para
colocar los botones que enviarán o restaurarán el formulario:
<input type="submit" value="Enviar">
<input type="reset" value="Restaurar">
19 Escoge el menú Archivo, Guardar como en el procesador de texto, dale un nombre al archivo y
agrégale la extensión .htm o .html al final, para que los navegadores lo reconozcan como una
página web.
20 Previsualiza tu página abriéndola en un navegador. En Firefox, por ejemplo, ve a “Archivo”, “Abrir

archivo”, o presiona Ctrl+O o Comando+O para abrir un documento nuevo.
21 Navega hasta el archivo que creaste y presiona OK para abrir el formulario web.
22 Comprueba el formulario seleccionando algunos botones y haciendo clic en Enviar para enviar
las respuestas.
23 Cuando un usuario haga clic en Enviar, sus respuestas aparecerán en un mensaje nuevo de
correo con el nombre y el valor ya escritos en el cuerpo del mensaje.
Consejos
La función de multitarea puede facilitarte el trabajo: abre ventanas del procesador de texto, del navegador y del
programa de correo electrónico, y cambia entre ellos.
Para volver a editar el documento en un procesador de texto, recuerda que el archivo tendrá una extensión distinta y
que no aparecerá en la lista de los archivos de texto*.txt. Escoge enumerar “Todos los archivos” para ver los que tienen
extensión*.htm o*.html.
Advertencias
El correo electrónico no estará cifrado, por lo que no es adecuado para recolectar información confidencial (como
información médica o financiera). Afortunadamente, existen muchos servicios respetables para ayudar a recolectar
dicha información.
Las páginas web son documentos de texto guardados con extensión*.htm o*.html. El navegador se puede confundir si
no se guardan con esas extensiones, por lo que podría no mostrar adecuadamente la página.
Cosas que necesitarás
Un editor de texto, por ejemplo el Bloc de notas.

Un navegador web, por ejemplo Mozilla Firefox.
Una computadora configurada con un cliente de correo electrónico para comprobaciones.

Diseño de Un Formulario HTML para Recabar Informacion y Ser Enviado A Una Dirección de Correo Electrónico

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño de Un Formulario HTML para Recabar Informacion y Ser Enviado A Una Dirección de Correo Electrónico

Cargado por

Copyright:

Formatos disponibles

24/1/2020 Cómo crear un formulario HTML que pueda ser enviado a una dirección de correo electrónico

Cómo crear un formulario HTML que pueda ser enviado a

2 Crea una página web usando el esqueleto HTML básico:

<title>Inserta tu título aquí</title>

5 Presiona {Intro} después de la etiqueta <body>.

6 En el renglón resultante, escribe el código que sigue, reemplazando la dirección de correo

<form action="MAILTO:usuario@servidordeemail.ext" method="GET" enctype="text/plain">

<p> 1. ¿Cuál es tu destino turístico favorito?</p>

mostrará esa pregunta en la página.

10 Para crear un botón radial, escribe:

12 Si vas a poner más botones radiales, deberán tener un nombre distinto.

<input type="checkbox" name=“2“ value="Antártida" /> Donde hay pingüinos.

<input type="text" name=“3“ size="100">

<option value="Escoge uno:" selected="selected">Escoge uno:</option>

<option value="Manunka Chunk, NJ">Manunka Chunk, NJ</option>

<option value="Arthur's Seat">Arthur's Seat, Edinburgo, Escocia</option>

<option value="Cicely, AK">Cicely, AK</option>

17 El atributo selected=‘‘selected’‘ significa que es la opción predeterminada cuando se carga la

<input type="submit" value="Enviar">

<input type="reset" value="Restaurar">

20 Previsualiza tu página abriéndola en un navegador. En Firefox, por ejemplo, ve a “Archivo”, “Abrir

Cosas que necesitarás

Un editor de texto, por ejemplo el Bloc de notas.

También podría gustarte