El siguiente es un ejemplo básico de la utilización de JQuery Form Builder en donde podrás crear un formulario con los campos que necesites según tus necesidades. En este caso solo será un formulario de contacto a modo de ejemplo.
1.- Ingresa en el siguiente enlace para comenzar con la creación de tu formulario: Jquery Form Builder
2.- Al ingresar aparecerá un formulario pre-configurado con los 3 campos. Para tu propio formulario tendrás que eliminar los campos haciendo clic en el icono rojo indicado en la imagen.
3.- Ahora, ir a la pestaña Field y luego clic en Name para poder agregar un campo “Nombre“.
4.- Al crear el campo, podrás cambiar el título y configurarlo para que sea un campo obligatorio
5.- Luego de editarlo, clic en Field
6.- Clic en Email para poder crear un campo tipo correo
7.- Ahora, deberás editar el nombre del campo y tildar Requerid para que sea un campo obligatorio. Luego clic en Field
8.- Para finalizar este ejemplo, deberás crear un campo Text para el campo comentario
9.- Nuevamente, deberás editar el campo “Comentario” creado recientemente y luego clic en Submit para editar el botón
10.- Ahora, modifica el nombre del botón y el mensaje de error en caso de no completar los campos obligatorios y luego clic en Settings
11.- En la pestaña de Email Message deberás ingresar tu correo donde recibirás la información del formulario y el asunto
12.- Ahora, en la pestaña Choose Mailer, clic en SMTP para configurar el formulario con tu propia cuenta de correo utilizando phpmailer. Ingresa la casilla de correo que utilizarás para enviar el formulario y su contraseña, en Host ingresa mail.tu-dominio.com, en Port ingresa 25 y en Security selecciona None
13.- Ahora, en la pestaña Thank You Message puedes configurar el formulario para redireccionar a una URL al enviar o mostrar un mensaje durante tantos segundos
14.- Ya tienes creado tu formulario, ahora deberás descargarlo a tu PC
15.- Podrás observar como quedó tu formulario y ver como se adapta a cualquier tamaño. Luego clic en Download Form para descargar el archivo que contiene los archivos para que funcione el formulario
16.- Luego de guardar el archivo en tu PC, ingresa a tu Cpanel y luego al Administrador de archivos
17.- Crear una carpeta con el nombre que desees para poder publicar el archivo
18.- Ahora, clic en Cargar para subir el archivo al servidor
19.- Selecciona el archivo descargado y clic en Abrir
20.- Selecciona el archivo comprimido y clic en Extraer
21.- Ahora deberás crear un enlace desde tu página hacia la carpeta donde se encuentra tu form.html
Listo! ya tienes creado tu formulario configurado con SMTP
