{"id":27515,"date":"2018-10-16T15:55:54","date_gmt":"2018-10-16T13:55:54","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=27515"},"modified":"2018-10-16T15:55:54","modified_gmt":"2018-10-16T13:55:54","slug":"captainform-formularios-drag-drop-para-wordpress","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/wordpress\/captainform-formularios-drag-drop-para-wordpress\/","title":{"rendered":"CaptainForm – Formularios Drag & Drop para WordPress"},"content":{"rendered":"
<\/div>

\n\t\"CaptainForm\n<\/p>\n

\n\tSi hay algo por lo que se caracteriza WordPress<\/strong> es por la cantidad de plugins que dispone para poder modificar y añadir nuevas características o funcionalidades a cada instalación.\n<\/p>\n

\n\tPrácticamente existe un plugin para cada necesidad y en muchas ocasiones más de un plugin nos ofrece características similares y depende de los gustos o necesidades específicas del usuario decantarse por uno u otro.\n<\/p>\n

\n\tPor ejemplo, para añadir un formulario de contacto, existen varias opciones, como Contact Form 7<\/a><\/strong>, Ninja Form<\/a><\/strong> o WPForms Lite<\/a><\/strong>.\n<\/p>\n

\n\tHoy vamos a ver otro plugin para crear todo tipo de formularios en WordPress que está ganando muchos adeptos. El plugin se llama CaptainForm<\/strong> y una de sus características es que es drag & drop<\/em> o lo que es lo mismo, arrastrar y soltar<\/em>, algo muy útil a la hora de diseñar si no se tienen conocimientos HTML, PHP, etc…
\n\t \n<\/p>\n

\n\tPlugin CaptainForm para WordPress
\n<\/h2>\n

\n\tEl plugin CaptainForm<\/strong> para WordPress es gratuito para todos los usuarios, pero con limitaciones que comentaremos más adelante.\n<\/p>\n

\n\tEstá disponible si lo buscamos desde nuestros WordPress en Plugins > Añadir Nuevo<\/strong> o descargándolo desde aquí<\/a><\/em>.\n<\/p>\n

\n\tAl activarlo veremos que tenemos un nuevo menú en el panel de administrador de WordPress llamado, como no, CaptainForm<\/strong>, pero para empezar a usarlo nos indicará que necesitamos, o bien crear una cuenta gratuita o añadir un número de licencia si queremos usar una opción PRO.\n<\/p>\n

\n\t\"captainform\n<\/p>\n

\n\tPara usar la versión gratuita solo tenemos que hacer click en Agree & Signup<\/strong>, teniendo en cuenta que la cuenta de correo será la que tengamos asociada en nuestro usuario de WordPress.\n<\/p>\n

\n\t\"registro\n<\/p>\n

\n\tCon solo hacer click se realizará el registro, no hay que ir a otra web para crear otra cuenta, ni añadir contraseñas, etc… algo de agradecer.\n<\/p>\n

\n\tLo que si que recibiremos es un email dándonos loa bienvenida e indicándonos las limitaciones de la cuenta gratuita.\n<\/p>\n

\n\tEstas limitaciones son 3 formularios por sitio<\/strong> y 500 entradas mensuales<\/strong>. Si nuestro sitio web necesita más formularios o tenemos más registros mensuales, habrá que pasar a una versión PRO de pago o buscar alguna otra alternativa.\n<\/p>\n

\n\tTambién existe otra limitación de 15 campos por formulario con la licencia gratuita, aunque esta parece ser menos importante.
\n\t \n<\/p>\n

\n\tCreando Formularios con CaptainForm en WordPress
\n<\/h2>\n

\n\tCrear un formulario de con CaptainForm es sumamente sencillo, solo tenemos que ir al apartado New Form<\/strong> del menú de WordPress y veremos una pantalla en la cual nos mostrará varias plantillas preestablecidas<\/strong>.\n<\/p>\n

\n\t\"plantillas\n<\/p>\n

\n\tComo podemos ver, está todo en inglés, pero tenemos un botón de Preview<\/strong> que podemos usar para ver de que tipo de formulario estamos hablando.\n<\/p>\n

\n\tPor ejemplo, si hacemos click en el Preview<\/em> de la casilla Order Form<\/strong>\n<\/p>\n

\n\t\"previo\n<\/p>\n

\n\tVeremos que tenemos nos abre una página con el theme<\/em> que tenemos activo en WordPress para que veamos cómo podría quedar.\n<\/p>\n

\n\t\"ejemplo\n<\/p>\n

\n\tSi nos gusta la plantilla solo tenemos que pulsar en Use Template<\/strong> para dejarla a nuestro gusto y necesidades.\n<\/p>\n

\n\tTambién tenemos la opción de crear un formulario desde cero con Blank Form<\/strong>, que es la primera casilla que vemos.
\n\t \n<\/p>\n

\n\tCómo Editar un Formulario con CaptainForm
\n<\/h2>\n

\n\tUna vez hayamos decidido la plantilla que queremos usar, la podemos editar a nuestro gusto<\/strong>, traducir los campos, añadir o quitar, etc…\n<\/p>\n

\n\tDespués de pulsar en Use template<\/strong>, el plugin nos llevará a un editor visual muy intuitivo, incluso si nunca se ha tenido experiencia previa con editores de este tipo.\n<\/p>\n

\n\t\"editor\n<\/p>\n

\n\tLa forma de editar cualquiera de los campos es muy sencilla, simplemente hay que seleccionarlo y en la ventana flotante de la izquierda nos aparecerán las distintas opciones disponibles.\n<\/p>\n

\n\tPor ejemplo, su seleccionamos el campo T-Shirt model<\/em>, veremos que la ventana flotante nos muestra los campos que podemos cambiar.\n<\/p>\n

\n\t\"ventana\n<\/p>\n

\n\tLos cambios que hagamos los veremos al instante, así que podemos ir probando para ver como quedaría al final.\n<\/p>\n

\n\t\"ventana\n<\/p>\n

\n\tAñadir un nuevo campo es igual de sencillo. En la ventana flotante tenemos la opción Add Field<\/strong> y podemos seleccionar cualquiera de los campos y arrastrarlo a la sección que queramos, así de fácil.\n<\/p>\n

\n\t\"anadir\n<\/p>\n

\n\t
\n\tCómo Configurar un Formulario con CaptainForm
\n<\/h1>\n

\n\tUna vez tengamos editado el formulario a nuestro gusto, debemos configurarlo<\/strong>.\n<\/p>\n

\n\tPara esto iremos a la parte superior de la pantalla de edición y haremos click en pantalla en la flecha al lado de título. Esto abrirá un menú desplegable y seleccionaremos Settings<\/strong>.\n<\/p>\n

\n\t\"configurar\n<\/p>\n

\n\tLas opciones de configuración de cada formulario pueden ser distintas, dependiendo de las opciones del formulario.\n<\/p>\n

\n\tAlgunas de las opciones no estarán disponibles en la opción gratuita del plugin, como añadir plataformas de pago, algo a tener en cuenta y que cada uno tendrá que valorar.\n<\/p>\n

\n\tEn cualquier caso, la pantalla de configuración del formulario será que veremos será algo así.\n<\/p>\n

\n\t\"ventana\n<\/p>\n

\n\tDesde aquí podemos configurar:\n<\/p>\n