Todo lo que tu página web necesita

Crear formularios en HTML – Para poner en tu web

Como crear un formulario

Te mostrare como hacer un formulario HTML de contacto tanto con PHP y CSS como sin crear códigos para insertar y mostrar en tu blog, página corporativa o tienda online.

Esto en cuestión de minutos y sin importar si eres programador o no ya que existen herramientas que permiten hacerlo sin enredarse con las lineas de códigos.

Espero que esta información te sirva mucho, es un articulo extenso que he preparado muy bien. Si tienes tiempo compartelo, gracias.

Primero:

¿En verdad te conviene un formulario HTML estandar en tu web?

Porque ys existen plugins como los chats en vivo y la verdad es que estos empiezar a funcionar mejor que cualquier otro metodo para comunicar al usuario con el webmaster o el vendedor.

La realidad es que el formulario de contacto sigue ocupando la etiqueta de “indispensable”, por lo que aun es mas que recomendable seguir contando con uno.

Formulario HTML5 + CSS3 y PHP desde cero

Programando en código

Un formulario se compone de campos (cajas) y funciones a rellenar, aceptar o cambiar y normalmente un botón del tipo “Enviar los datos”.

A continuación mostrare la realización de un forma de contacto simple utilizando solo HTML en su ultima versión mas un simple archivo PHP.

Procedimiento:

Bueno, lo primero es saber que se inicia con el elemento: <form>

Dicho elemento puede contener algunos atributos, los mas comunes son: action y method. El primero define el lugar a donde se enviaran los datos recopilados y el segundo dice con que metodo HTTP se hara esto.

<form action="/my-handling-form-page" method="post">
</form>

Mas información sobre dichos atributos aqui.

Los campos

Pondre los tres tipicos campos, el de nombre, el de correo electronico y el de mensaje. Para ello colocare tres elementos HTML, label, imput y textarea. Y tambien usare divs para agruparlos e identificarlos mejor.

Entonces quedara algo como esto:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

 

  • Dentro de los elementos labels se indica que subelemento se esta requiriendo gracias al atributo: for, por ejemplo el de nombre (name).
  • En los elementos imput, el atributo type me esta diciendo que tipo de información se tiene que colocar.
  • Y finalmente el elemento textarea se maneja como una etiqueta HTML común y corriente.

El botón de enviar

Utilizare el elemento button, con el atributo submit. Se puede especificar el texto que se quiera para que aparezca dentro del botón.

<div class="button">
        <button type="submit">Enviar</button>
    </div>

El código final del formulario es el siguiente:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensaje</label>
        <textarea id="msg"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Enviar</button>
    </div>
</form>

Para que quede mas atractivo, aplicare estilos CSS. En especifico, los siguientes:

form {
    /* Sólo para centrar el formulario a la página */
    margin: 0 auto;
    width: 400px;
    /* Para ver el borde del formulario */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}form div + div {
    margin-top: 1em;
}
label {
    /* Para asegurarse que todos los labels tienen el mismo tamaño y están alineados correctamente */
    display: inline-block;
    width: 90px;
    text-align: right;
}
input, textarea {
    /* Para asegurarse de que todos los campos de texto tienen las mismas propiedades de fuente
       Por defecto, las areas de texto tienen una fuente con monospace */
    font: 1em sans-serif;

    /* Para darle el mismo tamaño a todos los campos de texto */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Para armonizar el look&feel del borde en los campos de texto */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Para dar un pequeño destaque en elementos activos*/
    border-color: #000;
}
textarea {
    /* Para alinear campos de texto multilínea con sus labels */
    vertical-align: top;

    /* Para dar suficiente espacio para escribir texto */
    height: 5em;

    /* Para permitir a los usuarios cambiar el tamaño de cualquier textarea verticalmente
        No funciona en todos los navegadores */
    resize: vertical;
}
.button {
    /* Para posicionar los botones a la misma posición que los campos de texto */
    padding-left: 90px; /* mismo tamaño a todos los elementos label */
}
button {
    /* Este margen extra representa aproximadamente el mismo espacio que el espacio
       entre los labels y sus campos de texto */
    margin-left: .5em;
}

Recibir los datos

Creare un archivo PHP, el cual sera la página que procesara la información y la enviara en este caso a un email. Contendra lo siguiente:

<?php
if(isset($_POST['email'])) {

// Debes editar las próximas dos líneas de código de acuerdo con tus preferencias
$email_to = "destinatario@sudominio.com";
$email_subject = "Contacto desde el sitio web";

// Aquí se deberían validar los datos ingresados por el usuario
if(!isset($_POST['name']) ||
!isset($_POST['mail']) ||
!isset($_POST['msg'])) {

echo "<b>Ocurrió un error y el formulario no ha sido enviado. </b><br />";
echo "Por favor, vuelva atrás y verifique la información ingresada<br />";
die();
}

$email_message = "Detalles del formulario de contacto:\n\n";
$email_message .= "Nombre: " . $_POST['name'] . "\n";
$email_message .= "E-mail: " . $_POST['mail'] . "\n";
$email_message .= "Mensaje: " . $_POST['msg'] . "\n\n";


// Ahora se envía el e-mail usando la función mail() de PHP
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);

echo "¡El formulario se ha enviado con éxito!";
}
?>

Hay que editar una linea para designar el email al que llegaran los datos, En especifico tienes que cambiar el texto “aquituemail” por tu correo electronico en:

MIra:  Donde Diseñar un Logo Gratis para tu Empresa o Página Web

Se tiene que subir el archivo a un servidor y obtener su dirección URL para colocarla en la primera parte de nuestro formulario.

¿Tienes dudas o sugerencias?

No olvides comentar cualquier pregunta o sugerencia en la caja de comentarios respecto a la realización del complemento.

Crear formularios HTML5 sin menterse con códigos

Formulario de contacto

Actualmente demasiadas cosas dentro del desarrollo web se pueden llevar a cabo sin la programación en código y obtienes el mismo resultado como si mediante esta se realizara.

Este es un “vídeotour” de como se trabaja de esta manera con los formularios (ingles):

Las siguientes son potentes herramientas de creación de formularios visual, gratis y demasiado faciles de entender.

Opciones universales (para cualquier creador web)

– Form Builder by POWr

Es una gran herramienta, permite crear formularios de una manera muy intuitiva con un montón de campos a la mano, ofrece muchas opciones de configuración y su instalación es demasiado agradable, puesto que te guia paso a paso.

Probar ahora gratis

Este es su centro de ayuda.

– 123ContactForm

Una de de las opciones mas famosas, sin duda, 123ContactForm se ha posicione como el gigante en la creación de formularios de manera visual, es uno de los plugins mas potentes aqui.

Aquí puedes obtener ayuda sobre su uso.

– Formstack

Es una aplicación genial, destinada únicamente a los gadgets de contacto, a diferencia de otras muchas, que ofrecen también otros complementos. Su constructor lo tiene todo, en verdad.

Probar ahora gratis

Te dejo su centro de soporte.

– FormGet

Es una aplicacion muy completa, sin duda puede ser la que elijas, puesto que le hace frente a todas las demas, ofrece crear recopilaciones de datos de todo tipo, aunque es premium.

Probar ahora gratis

Aqui esta su espacio de soporte.

– GetSiteControl

Con esta herramienta podras diseñar un formulario de contacto flotante y con efectos visuales, ofrece muchas opciones de target y display, como la primera tambien ofrece un numéro de mensajes ilimitado.

Probar ahora gratis

Para saber como se utiliza checa este tutorial.

MIra:  Poner un foro en Blogger o cualquier otra plataforma

– JotForm

Se trata de un constructor fantastico, es realmente muy sencillo de usar y no perjudica mucho el tiempo de carga. Proporciona uitles miniwidgets para incluir en las formas como mapas. Es una de las mejores opciones.

Probar ahora gratis

Aquí puedes obtener ayuda sobre su uso.

– Wufoo

Es una herramienta muy intuitiva y una de las veteranas aquí. Sirve para la creación de todo tipo de formas, ya sean de pago, de suscripción-registro o de contacto básico. Lo malo es que limita los mensajes a recibir.

Probar ahora gratis

Puedes encontrar su centro de ayuda aquí.

– Formularios de Google

Aunque viene del gigante de internet es una opción un poco limitada en opciones de campos y personalización. Al final pues sirve para lo requerido, ademas ofrece envios ilimitados.

Probar ahora gratis

Visita su completo espacio de ayuda.

– FormLogix

Se trata de una herramienta que cumple bien con lo suyo. Tiene un editor minimalista pues lleva el modo para usar de “arrastrar y soltar”, algo que tu bien sabes es fácil, sin embargo presenta muchas limitantes.

Probar ahora gratis

Aquí esta su centro de ayuda.

– Infiniforms

Es una nueva opción y a pesar de eso como programa de creación de formularios esta muy completo. Al ser reciente su nombre no hace mucho eco en internet como otras opciones.

Probar ahora gratis

Aquí encuentras su centro de ayuda.

– Zotabox

Una estupenda plataforma de plugins web. Zotabox ofrece lo necesario y mas que eso para mejorar una página web a nivel de conversión. Es una estupenda opción para lo requerido en el articulo.

Probar ahora gratis

Visita su espacio de ayuda.

– SumoMe

Esta es otra plataforma de widgets html dedicados a aumentar la conversión en webs o blogs. Se ah hecho muy popular entre los usuarios del CMS WordPress por lo que su nombre ya nos suena a muchos webmasters.

Probar ahora gratis

Si necesitas ayuda clickea aquí.

– Cognito Forms

Se trata de otro muy buen programa. Este como otros del post se especializa solo en formas de contacto, así como tambien en los sistemas de “rating”, es decir en widgets para recopilar data tipo feedback.

Probar ahora gratis

Visita su espacio de ayuda.

– Responster

Aun aquí, vemos increíbles opciones. Este programa también se centra en los gadgets para la recopilación de feedback. Aunque ofrece funciones avanzadas esta app es de pago, pero lo vale.

Probar ahora gratis

Encuentra aqui su centro de ayuda.

– Typeform

Es una de las tres apps para diseñar formas de contacto mas famosas. Typeform es en verdad increíble y aunque como otros servicios esta en ingles, su extrema simplicidad hace que eso no sea un problema en absoluto.

Probar ahora gratis

Y sin mas rollo este es su espacio de soporte.

– Zoho Forms

Zoho Forms es otra maravillosa herramienta. Es también una de las mejores opciones de este articulo, pues es tan potente y a la vez tan simple. Ofrece muchas opciones de personalización.

Probar ahora gratis

Te dejo su centro de ayuda.

– Foxyform

Un programa sencillo pero no por ello nada eficaz. La verdad es que aunque se ve muy simplon y así, no decepciona con todas las configuraciones que ofrece. Es una de las opciones en español mas utilizadas.

Probar ahora gratis

No tiene centro de soporte :(.

– Formmule

La ultima aplicación, pero no por eso la menos eficaz. Aunque se ve un poco simplona, cumple con lo suyo mas o menos pues en verdad presenta demasiadas limitaciones y aun en su modo premium.

MIra:  YouTube - Widget Botón de Suscripción para tu web
Probar ahora gratis

Este es su centro de ayuda.

 

– TellForm

Esta opción es de código abierto y se instala en el servidor, por lo tanto requiere de procesos mas tecnicos. Aun asi segun entiendo es una aplicacion a la que no le falta nada.

Probar ahora gratis.

En esta página puedes esta su ayuda.

– Getform

Otra opción increible, Ofrece un modo de trabajo un poco distinto, creo que puede llegar a funcionar mas que bien, incluso su plan premium es uno de los mas baratos.

Probar ahora gratis

Este es su lugar de apoyo.

– FormtTitan

Una aplicación que tambien sirve para crear landing pages, es un poco nueva, pero se nota muy completa, la verdad tiene mucho potencial, puedes apostarle.

Probar ahora gratis

Aqui su lugar de ayuda.

Plugins para hacer formularios PHP exclusivos

A continuación estan los widgets hechos especialmente para algun CMS, la ventaja de elegir uno, es que contaras con una adaptación aun mas poderosa.

El mundo de las “Add-ons” empieza a tomar gran relevancia dentro de los sistemas de desarrollo web, actualmente son varios los que ofrecen un repositorio o tienda de complementos.

Para WordPress

Se trata probablemente del mas conocido dentro del repositorio.

Un complemento diseño perfectamente para el sistema.

Es una de las opciones mas completas en cuanto a funciones.

Hablamos de un proyecto abierto, sin modelos premium.

Es una de las herramientas mas intuitivas, talves la mas.

Para Joomla

Es la extension gratuita mas completa dentro del directorio.

Se trata de un widget gratuito muy bueno para lo requerido.

Ofrece muchas opciones de personalización en su editor.

Una de las extensiones de su tipo mas veteranas.

Para Drupal

Fue uno de los primeros plugins en su tipo en aparecer para el CMS.

Posiblemente es la opción mas completa.

Para Wix

Una herramienta demasiado facil de usar y mas con el editor de Wix.

A simple vista se nota como una aplicación muy intuitiva.

En verdad, probablemente la que tiene mas opciones.

Preguntas que puedes hacerte respecto al post:

¿Como insertar los que son universales en mi web?

Este tipo de plugin como cualquier otro se incorpora en una web mediante un simple código html, es decir cuando llegues en este caso a ver uno de estos, tan solo habrías de añadirlo en tu sitio para tener instalado tu gadget.

Por si aun hay problemas para lo anterior, te dejo un tutorial donde se muestra como insertar un código html en las plataformas mas populares de creación web.

¿Debo de pagar por crear los formularios?

No. Estas herramientas ofrecen versiones gratuitas, quiere decir que eso es opcional y para conseguir mejores funciones o soporte.

¿En donde puedo encontrar mas ayuda sobre estas apps?

Al final en la reseña de cada una, deje un enlace donde hay esto, donde puedes hallar sus tutoriales o foros de ayuda.

¿Que mas le puede ayudar a mi web?

Mira, puedes ver los demás artículos de la plataforma TodopatuWeb Explorarlos aquí.

¿Debería compartir este post?

Pues si crees que es útil y le serviría mucho a alguien mas, si. Gracias si lo haces :), pues ayudas a posicionar mejor los contenidos de este sitio web.

Si tienes problemas puedes siempre comentar o enviarme un email, un gran saludo webmaster.