7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Crea hermosos formularios con PHP Form Builder

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Si eres un desarrollador de PHP, crear formularios, validar envíos de formularios y administrar sesiones de PHP probablemente son tareas que forman parte integral de tu trabajo. Si bien son bastante repetitivas, todas estas tareas requieren mucho tiempo y atención, especialmente si te importan las mejores prácticas relacionadas con el diseño y la seguridad.

Mediante el uso de una biblioteca bien probada para la generación de formularios, puedes mejorar significativamente no solo tu propia eficiencia, sino también la solidez de tus aplicaciones de PHP. CodeCanyon tiene una gran variedad de bibliotecas prémium para la generación de formularios de entre las que puedes elegir. PHP Form Builder, desarrollada por el autor de Envato migli, es una de ellas.

PHP Form Builder es compatible con frameworks de CSS modernos, tales como Materialize, Foundation y Bootstrap 4, y soporta la validación de formularios tanto del lado del cliente como del lado del servidor. También incluye varias plantillas de formularios prefabricadas, complementos jQuery y utilidades de bases de datos.

En este tutorial, te mostrará cómo realizar operaciones comunes relacionadas con los formularios usando PHP Form Builder.

Requisitos previos

Para aprovechar al máximo este tutorial, necesitarás:

  • PHP 7.0 o posterior, con la extensión cURL habilitada
  • Una cuenta de Envato

1. Instalando la biblioteca

PHP Form Builder es una biblioteca prémium de PHP disponible en CodeCanyon. Así que inicia sesión en tu cuenta de Envato y compra una licencia para ella.

PHP Form Builder on CodeCanyonPHP Form Builder on CodeCanyonPHP Form Builder on CodeCanyon

Ahora podrás descargar un archivo llamado codecanyon-8790160-php-form-builder.zip. Asegúrate de que este archivo esté disponible en tu servidor de desarrollo.

Te sugiero crear un nuevo directorio de proyecto para almacenar todos los archivos que vas a crear y usar en este tutorial.

A continuación, extrae el archivo ZIP que descargaste. Además del código fuente, dentro del directorio padre, llamado phpformbuilder, encontrarás diversas plantillas, recursos y archivos de ayuda.

Por lo general, solamente necesitarás el subdirectorio phpformbuilder. Así que muévelo al directorio del proyecto.

2. Registrando la biblioteca

Si compraste una licencia regular, podrás usar la biblioteca localmente en tu servidor de desarrollo y en un dominio en producción. Por ahora, registremos la biblioteca solamente desde el servidor de desarrollo.

Comienza ejecutando un servidor de desarrollo PHP. Así es como puedes arrancar uno para que escuche en el puerto 8000:

De forma alternativa, siéntete en la libertad de usar el servidor web Apache en su lugar.

Ahora debes abrir un navegador y visitar el URL de registro local, que se ve así: https://localhost:8000/phpformbuilder/register.php.

En el formulario que se muestra, escribe tu código de compra, que encontrarás en el correo electrónico de confirmación de la compra enviado por CodeCanyon, y presiona el botón Register (Registrar).

PHP Form Builder registration pagePHP Form Builder registration pagePHP Form Builder registration page

Una vez que el registro tenga éxito, puedes comenzar a usar la biblioteca.

Es importante tener en cuenta que, si quieres usar esta biblioteca en producción, tendrás que completar este proceso de registro desde tu servidor de producción también.

3. Creando un formulario sencillo

Crea un archivo nuevo llamado index.php y ábrelo usando un editor de texto. Vamos a escribir todo nuestro código en el interior de este archivo.

La clase Form de PHP Form Builder tiene la mayoría de los métodos que necesitarás para crear tus formularios. Así es como la importas:

Por lo general, es una buena idea usar una sesión de PHP al trabajar con datos de formularios. Por lo tanto, este sería un buen momento para iniciar una nueva sesión:

Para crear un formulario nuevo, debes crear una instancia de la clase Form, cuyo constructor espera el nombre del formulario como argumento. Por ahora, hagamos un formulario simple para el registro de usuarios:

Para agregar campos de entrada al formulario puedes usar el método addInput(), que espera el tipo del campo, su nombre, su valor por defecto y su etiqueta. A excepción del nombre y del tipo, todos los demás argumentos son opcionales.

El siguiente código te muestra cómo crear algunos tipos diferentes de campos:

Para agregar un botón de envío al formulario, usa el método addBtn(), que es muy similar al método addInput().

4. Renderizando el formulario

Ahora nuestro formulario está completo. Pero vamos a necesitar un poco de código plantilla en HTML antes de poder renderizarlo. Por lo tanto, después de cerrar la etiqueta de PHP agrega el siguiente código, que genera un documento HTML vacío:

En este punto, puedes renderizar tu formulario al llamar al método render() del objeto Form dentro del <body> del documento. Sin embargo, tendrá un aspecto muy simple.

Form without any stylesForm without any stylesForm without any styles

Por lo tanto, antes de llamar al método render() debes recordar agregar algunas hojas de estilo y archivos de JavaScript al documento.

PHP Form Builder es compatible con muchos frameworks populares de CSS. Es tu responsabilidad incluir los archivos CSS y JS más recientes del framework que quieras usar. En este tutorial, usaremos el framework Twitter Bootstrap 4.3.

Entonces, en el interior del <head> del documento, agrega una etiqueta <link> que apunte a la hoja de estilo de Bootstrap. Si no la tienes de manera local, siempre puedes usar una CDN. Esta es la forma de hacerlo:

PHP Form Builder tiene sus propios estilos también, los cuales debes agregar al documento. Puedes hacer eso llamado al método de utilidad printIncludes().

Además, para obtener los mejores resultados te sugiero que agregues un poco de relleno y márgenes al formulario encerrándolo en un div.

Cerca del final del <body>, también debes incluir jQuery y los archivos JavaScript de Bootstrap 4.

Por último, debes incluir el código y los archivos de JavaScript propios de PHP Form Builder llamando a los métodos printIncludes() y printJsCode().

Si abres index.php en un navegador ahora, podrás ver que el formulario tiene el siguiente aspecto:

Form with styles appliedForm with styles appliedForm with styles applied

En caso de que te lo estés preguntando, así es como se ve el formulario usando Materialize como framework de CSS:

Same form but with MaterializeCSSSame form but with MaterializeCSSSame form but with MaterializeCSS

5. Validando las entradas

PHP Form Builder tiene una clase Validator que puedes usar para simplificar la validación de formularios del lado del servidor. Así es como la importas:

En aras de otro ejemplo, construyamos ahora un formulario simple cuyas entradas podamos validar. Ya que vamos a validar las entradas en el lado del servidor, debemos enviar novalidate como argumento al constructor de la clase Form. Esto desactiva la lógica de validación predeterminada del navegador en el lado del cliente, permitiendo a los usuarios enviar el formulario independientemente de los errores de validación.

Nuestro nuevo formulario va a aceptar un nombre, una edad y una dirección de correo electrónico con las siguientes condiciones:

  • El nombre debe tener al menos ocho caracteres de longitud.
  • La edad debe ser un entero con un valor menor a 45.
  • La dirección de correo electrónico debe ser válida.

Esta es la manera en la que se usan los métodos addInput() y addBtn(), con los que ya estás familiarizado, para crear los tres campos y un botón de envío:

Como puedes ver en el código anterior, PHP Form Builder admite el encadenamiento de métodos. Los métodos startFieldSet() y endFieldSet(), como habrás imaginado, te permiten agrupar tus entradas y agregarles un encabezado.

El proceso de validación de formularios debe ejecutarse solo después de que el usuario haya enviado el formulario. Para detectar este evento, todo lo que necesitas hacer es verificar si se accedió a la página usando el método POST de HTTP.

Dentro de la instrucción if, puedes seguir adelante y crear una instancia de la clase Validator llamando al método validate(), que espera el nombre del formulario que quieras validar.

El objeto Validator tiene varios métodos con nombres intuitivos para validar los campos de entrada. Por ejemplo, puedes usar el método minLength() para verificar si el valor del campo name (nombre) tiene al menos ocho caracteres de longitud. De manera similar, puedes usar los métodos integer() y max() para verificar si el valor de age (edad) es un entero con un valor menor a 45.

Todos los métodos de validación generan útiles mensajes de error automáticamente cuando es necesario. Sin embargo, si no estás satisfecho con ellos, tienes la libertad de proporcionar tus propios mensajes personalizados.

Después de haber agregado todas las verificaciones, debes recordar llamar al método hasErrors() para revisar si alguna de ellas falló.

En caso de verificaciones fallidas, el método getAllErrors() devuelve todos los mensajes de error. Para mostrarlos, debes actualizar la variable $_SESSION. El siguiente código te muestra cómo:

Si intentas enviar el formulario con valores incorrectos ahora, podrás ver el validador en acción.

Form showing error messageForm showing error messageForm showing error message

6. Agregando estilos

PHP Form Builder te permite asignar clases CSS manualmente a los campos de tu formulario. Tanto el método addInput() como el método addBtn() aceptan un quinto parámetro, el cual puedes usar para personalizar el campo asociado.

El siguiente código te muestra cómo agregar las clases CSS btn y btn-primary al botón de envío:

Con el cambio anterior, el botón se verá de esta forma:

Submit button using a different styleSubmit button using a different styleSubmit button using a different style

Uno de los mejores aspectos del uso de PHP Form Builder es que es compatible con la mayoría de los temas de Bootstrap sin necesidad de configuración. Esto significa que cambiar de un tema de Bootstrap a otro es extremadamente sencillo.

Todo este tiempo estuvimos usando el tema predeterminado de Bootstrap. Para cambiar a uno de los temas gratuitos disponibles en Bootswatch, todo lo que tienes que hacer es cambiar la etiqueta <link> que agregaste anteriormente. Esta es la forma en la que puedes usar el tema "Slate":

Con este nuevo tema, como puedes ver en la captura de pantalla a continuación, el aspecto del formulario es muy diferente.

Form with Slate themeForm with Slate themeForm with Slate theme

Conclusión

Ahora sabes cómo crear atractivos formularios y gestionar los envíos de formularios usando PHP Form Builder. En este tutorial, también viste lo sencillo que es usar estilos y temas CSS personalizados para embellecer tus formularios.

Para aprender más, consulta la extensa documentación que está presente en el archivo ZIP que descargaste.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.