Proporcionar a sus clientes formularios de registro y registro simples en su sitio web es esencial para capturar clientes potenciales, aumentar su lista de correo electrónico e impulsar las ventas en general.
Solo hay un problema: HTML.
HTML5 es el código estándar que se utiliza para que la mayoría de las páginas web funcionen. Es el lenguaje de internet. Pero al igual que cualquier lenguaje de programación, desde Javascript y jquery hasta PHP y CSS3, hay una curva de aprendizaje pronunciada, especialmente si nunca ha tocado ningún código.
No temas. Estamos aquí para ayudar. Es posible que podamos convertirte en Bill Gates de la noche a la mañana, pero con la ayuda de algunos ejemplos útiles, al final de este tutorial, estarás listo para crear un formulario de registro básico usando HTML en poco tiempo.
Before Antes de empezar: ¿Quieres evitar la molestia de usar HTML? Con un creador de formularios como Paperform, puede ahorrar tiempo y crear un formulario de registro potente y profesional en minutos.
5 Pasos Para Crear Un Formulario de Registro HTML
Está ocupado, lo sabemos. Hay un billón de artículos para leer. Películas de Netflix para ver. Programas de televisión para atracones. Así que vayamos directamente a la guía de cinco pasos para crear un formulario de registro en HTML.
Paso 1. Elija un editor HTML
Al igual que necesita un procesador de textos para crear un documento de texto, necesita un editor de texto para crear código HTML. Estas herramientas de desarrollo convierten el código extraño y maravilloso que escribes en un formulario de registro.
Hay docenas (si no cientos) de editores HTML en el mercado, la mayoría de los cuales tienden a ofrecer características similares. No te aburriremos con los detalles, pero hay algunas cosas clave que te harán la vida más fácil:
Detección de errores: Resalte automáticamente los errores de sintaxis para facilitar las correcciones.
Autocompletado: Sugiere elementos HTML relevantes basados en cambios anteriores (le ahorra mucho tiempo con código largo).
Reflejos de sintaxis: Aplica colores a diferentes etiquetas HTML en función de ciertas categorías para facilitar la lectura y ordenación del código.
Buscar y reemplazar: Localice y sobrescriba todas las instancias de un código en particular en lugar de editarlas individualmente.
Si realmente te estás adentrando en la codificación, hay más funciones de las que preocuparte, pero eso debería cubrirte con creces para este sencillo formulario de registro.
La aplicación que seleccione es una cuestión de preferencia personal. ¿Quieres algo que puedas usar en tu navegador? Prueba con Codepen. ¿Barebones? Bloc de notas++. ¿Una interfaz de usuario minimalista y un campo de entrada intuitivo? Texto sublime hasta el final.
Nuestro código de cofundador y residente: geek, Dean, jura por VS Code.
» Desde un punto de vista nerd VS Code encaja perfectamente en la pila tecnológica de Paperform y tiene excelentes complementos de desarrollo remoto que me encantan. También es ideal para cosas HTML, y es súper personalizable si te gusta que tus herramientas se vean bien mientras sigues teniendo toda la funcionalidad que necesitas.
No hay necesidad de obsesionarse demasiado con esto. Desafortunadamente, no hay un editor HTML que genere un formulario de registro para ti, sin importar lo genial que pueda ser. Esa parte depende de ti.
Paso 2. Crea tu archivo HTML
El siguiente paso es decirle a tu editor de texto que tienes la intención de crear un archivo HTML. Haga esto creando un nuevo archivo y luego guardándolo con «.extensión html».
Por ejemplo, » myform.HTML». Una vez que hayas indicado al editor que estás creando código HTML, debería generar automáticamente el siguiente código para ti:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Consejo: Algunos editores no se rellenan automáticamente. Está bien. Simplemente copie y pegue este código de arriba y tendrá el mismo efecto.
Paso 3. Agrega campos de texto y crea tu formulario
Bien. Es hora de empezar a agregar el código relevante y convertir ese código HTML de barebones en un formulario de registro.
Ahora, si solo estás aquí por el código que entendemos. Encontrará todo lo que necesita, un párrafo o dos a continuación. Siéntase libre de adelantarse.
Pero si está interesado en aprender un poco sobre lo que realmente significa que está ingresando, permítanos un interludio de tutorial HTML rápido.
Un formulario HTML se compone de»elementos de formulario». Estas son cosas como cuadros de texto, botones de opción, casillas de verificación y menús desplegables que hacen posible que la gente interactúe con tu formulario en vivo.
Cada elemento tiene su propia etiqueta específica. Por ejemplo, la etiqueta HTML <form> define su código como un formulario, mientras que <textarea> se puede usar para recopilar entradas de usuario.
Estos elementos son como zapatos: siempre vienen en pares. Todas las etiquetas que desee incluir en su formulario deben insertarse entre las etiquetas open <form> y closed </form>.
Bien, esas son las Sparknotes. Ahora para el código de entrada. Aquí:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>Este código HTML (básico) generará algo que se parezca a esto:
No es exactamente la cosa más atractiva del mundo, ¿verdad? Pero bueno, preguntaste cómo crear un formulario de registro HTML. No dispares al mensajero.
La etiqueta < tr> le indica que organice las respuestas en una fila, mientras que < td> (que significa datos de tabla) indica que desea capturar cualquier tipo de encuestados. En este caso, agregamos dos campos para simplificar:
- Introduce la dirección de correo electrónico
- Introduce contraseñas
No hay nada que te impida agregar campos adicionales. Los tipos de entrada van desde números y fechas hasta colores o incluso imágenes. Simplemente copie el código a continuación e inserte el tipo de entrada que desee. W3Schools tiene una gran lista para guiarlo.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Consejo: Seleccionar el tipo de entrada correcto es crucial. Le dice al formulario cómo se debe mostrar el texto en la pantalla. Por ejemplo, lo último que queremos es que la contraseña de alguien sea visible cuando la escriba, por lo que usamos el tipo de entrada «contraseña» para ocultarla.
Paso 4. Agregar marcadores de posición
Un marcador de posición es un texto dentro de los campos de tu formulario que pide a los encuestados que respondan de una manera particular. Se usa principalmente como un empujón en la dirección correcta, pero también es una estrategia útil para hacer que los formularios sean más atractivos.
Por ejemplo, digamos que estás agregando un campo de nombre simple a tu formulario. Puedes escribir » insertar nombre «y terminar con ello, o puedes arreglar las cosas escribiendo» Bruce Wayne » para un poco de estilo.
Sea cual sea la estrategia que prefieras, es bastante sencillo agregar marcadores de posición a tu formulario de registro HTML. Después del tipo de entrada, inserte «marcador de posición=» con el texto que desea mostrar.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>Introducir este código producirá un formulario como este:
Pretty barebones. Pero funciona. Puedes crear opciones adicionales para que los clientes seleccionen sus datos demográficos, como la edad o el género, utilizando un código similar al anterior.
Para crear un campo de género, inserte los siguientes valores en su código (justo encima de la última etiqueta </table>). También agregaremos un número de teléfono y la opción desplegable «Asunto».
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>Esto convertirá el campo de datos en casillas de verificación, una para hombre y otra para mujer. Ahora, así es como se verá la iteración final de su formulario de registro HTML:
No es exactamente la gran revelación que esperaba, ¿verdad? ¿Te imaginas a alguien que busca en tu negocio en Google y se encuentra con esta página? O compartir esto en las redes sociales?
Es seguro decir que este tipo de formulario de inicio de sesión HTML no alentaría exactamente a nadie a registrarse en su negocio. Habría una pregunta abrumadora en sus mentes, que probablemente sea la misma que tienes tú. . .
¿Por Qué Mi Formulario De Registro HTML Es Tan Feo?
Como no puedes ver, tu formulario HTML no es particularmente atractivo. Es un patito feo. Lo cual está bien, no todos podemos ser Margot Robbie, pero no atrae exactamente a la gente a llenarlo.
Y ese es el problema. Los formularios HTML tienden a ser:
- Aburrido
- Aburrido
- Difícil de personalizar
- Difícil de administrar
Esto se debe a la naturaleza simple del HTML. Es un marco que ayuda a completar las acciones de formulario necesarias, sin embargo, ciertamente no ganará ningún premio de diseño.
La solución fácil a este problema es usar un creador de formularios en línea dedicado como Paperform para evitar el trabajo pesado de HTML o CSS. Puede crear hermosos formularios de registro, contacto y páginas de destino completas, entre cientos de otras creaciones, en cuestión de minutos sin una sola línea de código.
Pero tal vez realmente estás listo para todo el tema HTML (o tal vez solo eres un tonto para el castigo). De cualquier manera, si realmente estás comprometido con tu formulario de registro HTML, puedes mejorar su apariencia usando CSS.
Paso 5: Edite su formulario de registro HTML con CSS
CSS es un lenguaje de programación utilizado para diseñar un documento HTML. Personaliza cómo se muestran los elementos HTML en la pantalla y le permite personalizar todo, desde los colores de fuente y la opacidad hasta agregar una imagen de fondo o vincular a otra página con una etiqueta <href>.
Ahora, estaría aquí toda la semana si enumeráramos todas y cada una de las propiedades CSS. Podríamos hacer eso e intentar aumentar el SEO de esta página, pero eso no es divertido para nadie. Si buscas una lista completa, te recomendamos la lista de referencias CSS de W3School.
Por el bien de nuestro tutorial, le daremos a nuestro formulario de registro HTML un cambio de imagen rápido con CSS. Personalizaremos el color del texto, el estilo de fuente y ajustaremos los márgenes para una apariencia general (ligeramente) mejor.
Tip Sugerencia: La forma más común de agregar CSS a una página HTML es con un archivo de hoja de estilo externo vinculado con el elemento. Esta hoja de estilo se crea en el mismo editor de texto y se guarda con «.extensión css».
Aquí está el código que usaremos:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }Y con esa magia de estilo, tu forma terminará pareciéndose a la de abajo. Es un poco como pegarle lápiz labial a un cerdo, pero es mejor en cierta medida.
Por qué un Formulario de Registro HTML No es la Mejor Solución
Si bien aprender a codificar y crear formularios de registro básicos es una habilidad divertida de aprender, debe reconsiderar seriamente usarlos para cualquier propósito importante. No intentes arrancarlo, simplemente no vale la pena el tiempo, el esfuerzo y la frustración.
Ya sea que necesite un formulario de contacto para sus clientes, un formulario de inicio de sesión para su negocio o un formulario de inscripción de estudiantes para el nuevo año escolar, cualquier solución pegada con cinta adhesiva junto con HTML y CSS terminará pareciendo sin pulir y poco profesional, especialmente si no tiene conocimientos previos de codificación.
Afortunadamente, hay otra forma de crear formularios de registro que es mucho más fácil, rápida e intuitiva: un creador de formularios en línea como Paperform. Con nuestra plataforma fácil, puede ponerse en marcha con un hermoso formulario de marca en cuestión de minutos.
Con Paperform no solo obtienes un formulario HTML básico. Obtiene una experiencia dinámica que le permite recopilar cualquier tipo de datos que necesite, desde detalles de contacto simples hasta cálculos complejos e incluso aceptar pagos. No se necesita experiencia en diseño.
Además, la personalización es sencilla. Modifica los colores y las fuentes y ajusta la interfaz de usuario de tu formulario con unos pocos clics. Luego, una vez que esté satisfecho con su nueva creación, puede incrustar el formulario en su sitio web, alojarlo en línea de forma gratuita o incrustarlo en su sitio de WordPress con nuestro plugin de WordPress.
Para mostrar lo fácil que es, preparamos un formulario de registro de aspecto elegante:
¿No te apetece crear tu propia creación? Para eso está nuestra biblioteca de más de 600 plantillas de formulario. Seleccione una de nuestras plantillas de registro, agréguela a su cuenta con un solo clic y comience a funcionar más rápido de lo que puede beber su café expreso de la mañana.
Un formulario de registro es solo el comienzo de lo que puede hacer con Paperform. Pruébelo usted mismo con nuestra prueba gratuita de 14 días—sin necesidad de tarjeta de crédito.
Formulario de registro en Preguntas frecuentes HTML
¿Puedo crear un formulario de registro HTML sin CSS?
Sí, pero no sería bonito. De hecho, parecería algo de los primeros días de Microsoft. No es nada bonito.
¿Cómo puedo crear un formulario de registro HTML con carga de imágenes?
Para agregar un campo de carga de imágenes, use el tipo de entrada» archivo».
¿Puedo hacer un formulario HTML sin usar una tabla?
Aunque el comando table ayuda con la alineación, es fácil hacer un formulario sin él. Simplemente ingrese directamente sus entradas sin los comandos ‘ tr ‘ o ‘td’.
Es posible utilizar un formulario de registro HTML para compras en línea
Sí. Para crear un formulario de compras en línea, incluya campos de información de contacto, dirección de envío, ID de producto y punto de entrega. Las cosas se complican al cobrar pagos, por lo que recomendamos los formularios de pago simples de Paperform.
¿Cómo puedo crear una página de inicio de sesión y registro?
Hemos cubierto cómo crear estos, pero la respuesta es con mucho código y ajustes. Es mucho más fácil usar un creador de formularios en línea dedicado como Paperform.