DISEÑO WEB
El diseño web comienza con la creación de páginas web, y una de las tecnologías fundamentales es HTML (HyperText Markup Language). HTML es un lenguaje de marcado utilizado para estructurar el contenido de una página web. Para crear una página HTML, debes entender las etiquetas HTML y cómo se utilizan para organizar texto, imágenes y otros elementos en la página. Por ejemplo, la etiqueta <html> define el inicio y el final del documento, mientras que <head> contiene información sobre la página, como el título, y <body> contiene el contenido visible.
¿Cómo hace un formulario HTML?
1. Usa PHP para crear tu página
Al momento de crear tu página web en donde habilitarás tu formulario, en lugar de utilizar la extensión .html, escribe .php. Al hacer esto, el servidor sabrá alojar el PHP que escribas, en vez de guardar la página HTML vacía. Agrega un nombre como «formulariodecontacto.php». Una vez creada y guardada, podrás comenzar a desarrollar tu formulario.
2. Añade el código
En este paso debes escribir el código HTML para crear el formulario. Para hacerlo, utiliza las etiquetas y atributos que te compartimos anteriormente. Te compartimos un código de formulario básico:
Con este formulario podrás solicitar el nombre y correo electrónico del usuario, el área que le interesa contactar, la razón por la que te contacta y también le puedes proporcionar un cuadro de texto en blanco para que pueda agregar su mensaje. Incluye un CTA que indica dónde enviar su solicitud. Cópialo y cambia los datos que desees.
<form action="contact.php" method="post"> <div class="elem-group"> <label for="name">Nombre</label> <input type="text" id="name" name="visitor_name" placeholder="Nombre de ejemplo" pattern=[A-Z\sa-z]{3,20} required> </div> <div class="elem-group"> <label for="email">Correo electrónico</label> <input type="email" id="email" name="visitor_email" placeholder="ejemplo@email.com" required> </div> <div class="elem-group"> <label for="department-selection">Área a contactar</label> <select id="department-selection" name="concerned_department" required> <option value="">Selecciona un área</option> <option value="billing">Facturación</option> <option value="marketing">Marketing</option> <option value="technical support">Servicio al cliente</option> </select> </div> <div class="elem-group"> <label for="title">Motivo de contacto</label> <input type="text" id="title" name="email_title" required placeholder="Problema/Consulta" pattern=[A-Za-z0-9\s]{8,60}> </div> <div class="elem-group"> <label for="message">Solicitud</label> <textarea id="message" name="visitor_message" placeholder="Escribe tu mensaje aquí." required></textarea> </div> <button type="submit">Enviar mensaje</button></form>
3. Habilita el envío del formulario a un correo electrónico
Una vez que realices una vista previa de tu formulario para cerciorarte de que todo aparezca justo como lo deseas, es tiempo de crear las instrucciones para que, cuando el usuario haga clic en «Enviar», el formulario se mande por mensaje de correo electrónico hasta tu bandeja.
Para ello, regresa al inicio de tu código y arriba de él agrega un código más: será el que habilite esta acción. Copia y pega el siguiente código:
<?phpif($_POST["message"]) {mail("your@email.address", "Here is the subject line",$_POST["insert your message here"]. "From: an@email.address");}?>
Recuerda cambiar los datos por tu información de contacto para que así el formulario llegue directamente a tu bandeja de entrada. Te explicamos la función de este código de manera desglosada: «mail» envía el formulario completo como un correo electrónico a «your@email.address» (el correo electrónico que elijas para recibir los formularios); lo que sigue en el código es la línea de asunto. En el párrafo siguiente posterior puedes escribir «copia del mensaje de correo electrónico» y se enviará desde la dirección de correo que escojas.
Al final, tu código debe lucir de manera similar a la imagen:
Una vez que se envía el formulario, llegarán los datos por automático. De esta manera, ya habrás creado un formulario básico para tu sitio web.
4. Especifica el destino del formulario HTML
De acuerdo con Mozilla, el atributo action especifica a qué archivo de script deben enviarse los datos del formulario para su procesamiento.
La etiqueta de este atributo es <form action="url-destino"> … </form>. En el siguiente ejemplo, podemos ver cómo se vería esta etiqueta:
<form action="envio.php" method="GET"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"/><label for="apellido">Apellido</label><input type="text" id="apellido" name="apellido"/><button id="envio">Enviar Formulario</button></form>
Al utilizar el atributo method GET, obtendríamos una URL de destino que incluye los parámetros del formulario en su estructura.
Ten en cuenta que el código HTML puede ser complejo, sobre todo si no cuentas con experiencia en programación. Por lo tanto, puedes optar por otra forma de hacer tu formulario. El Creador gratuito de formularios online de HubSpot cumple con estas y más funciones especializadas en los negocios. Lo mejor es que con su ayuda tus formularios tendrán una mejor apariencia y te olvidarás de las configuraciones complicadas:
Comentarios
Publicar un comentario