Flo Forms - Formulario de Contacto Personalizado

Para los usuarios de Flothemes hemos creado un formulario de contacto personalizado, del método de arrastrar y soltar, y súper simple de usar. Queríamos desarrollar una forma de contacto ofrecida por nosotros, para ayudar a prevenir problemas con los envíos de correo electrónico que otras formas de contacto han tenido.

Flo Forms tiene como objetivo resolver este problema. También hemos añadido un área de envíos y un área de configuración que le permitirá a tu sitio enviarte un recordatorio para comprobar tus entradas si no las ha leído.

El siguiente artículo explica cómo instalar y utilizar Flo Forms.

Puedes descargar nuestro nuevo plugin en tu página de plugins aquí.

Descargar e Instalar el Plugin

Puedes descargar el plugin de Flo Forms en nuestra página de plugins aquí. Una vez descargado, debes tener un archivo .zip llamado Flo-forms.zip.

flo-forms-zip

Para cargar el plugin, ve a tu panel de administración de WordPress, ve a los plugins, y presiona en “agregar nuevo”, luego, “subir plugin”:

Cursor_and_Plugins_‹_Mark_Allen_—_WordPress

Add_Plugins_‹_Mark_Allen_—_WordPress

Desde aquí puedes seleccionar tu plugin, o arrastrarlo y soltarlo en la sección de elegir archivo, y luego pulsa instalar ahora:

Cursor_and_Add_Plugins_‹_Mark_Allen_—_WordPress

Una vez cargado, activa el plugin:

upload-success

Ahora el complemento está activado, tendrás 2 nuevas áreas de configuración en el área back end de WordPress, Flo Forms  y Configuración de Flo Forms, estas serán las 2 áreas principales que necesitarás al configurar tus formularios:

Cursor_and_Plugins_‹_Mark_Allen_—_WordPress

Crear un Formulario

Ahora que el complemento está activado, es hora de crear un nuevo formulario.

Ve al área Flo Forms en tu backend de WordPress, y haz clic en “Add New Form”:

click-to-add-new-form

A continuación, se presentará un formulario en blanco, con sólo un botón de envío. Introduce el título del formulario y, a continuación, podrás seleccionar cualquiera de las opciones del lado izquierdo para agregarlas como entradas en tu formulario ve a la ficha, Agregar un campo:

new-contact-form

Los siguientes campos estan disponibles:

form-input-options

La siguiente sección explica mas detalladamente los campos disponibles para el formulario.

Campos Disponibles

Los siguientes campos están disponibles para tu formulario de contacto.

form-input-options

Texto de línea única: este campo permite una sola línea de texto, útil para elementos de texto cortos, como nombre, ubicación del lugar, etc.

Texto de párrafo: este campo permitirá un párrafo de texto más grande, generalmente utilizado para las secciones en las que se requiere más información.

Correo electrónico: la pestaña de correo electrónico para recolectar el correo electrónico de los usuarios.

Fecha: esto agregará un selector de fechas a su formulario.

Casilla de verificación: el campo de casilla de verificación te permite agregar casillas de verificación para tu sitio. Esto es genial si quieres encontrar nuestra información específica, como servicios adicionales. Permite múltiples selecciones.

Botón de radio – El botón de opción permite al usuario seleccionar una opción para una selección de opciones.

Menú Desplegable– El menú desplegable es el mismo que el botón de opción, permitiendo al usuario seleccionar una opción para una selección de opciones.

Interrupción de sección – Esto agregará una línea de interrupción en su forma.

La siguiente sección explica cómo agregar campos y la pestaña de configuración.

Agregar Campos y Pestaña de Configuración de Campos

Agregar entradas a tu Flo Form es simple, simplemente haz clic en cualquier elemento en la sección de añadir un campo a la izquierda y aparecerá en el lado derecho. Selecciona todas las opciones de entrada según sea necesario, o agrega de una por una. Desde aquí puedes seleccionar las distintas opciones relacionadas con la entrada:

select-input-flo-form

Configuración del campo

Para cambiar los detalles sobre el campo específico, haz clic en el elemento a la derecha, entonces deberás resaltarse en gris claro, y a la izquierda deberás ver la pestaña de configuración de campo:

field-settings-tab

Si deseas mantener tu formulario limpio y sin etiquetas, quita la etiqueta de campo y rellena el marcador de posición de campo:

placeholder-only-field

 

Aparecerá como el siguiente: ( con la etiqueta dentro de la caja):

placeholder-field

En esta área, puedes agregar la etiqueta para el campo, un elemento de marcador de posición si deseas tener un valor predeterminado para que los usuarios vean un ejemplo, puedes seleccionar el ancho del campo, 100% o 50% y si es necesario agregar un tipo de CSS (avanzado) si deseas adecuar un estilo un campo en particular más, así como la caja de selección requerida.

Repite el proceso para agregar todos los elementos a tu formulario. Si deseas artículos en 2 columnas, asegúrate de utilizar 50% de ancho.

La posición de envío puede alinearse de la misma manera, simplemente haz clic en el botón Enviar y el área de ajustes de campo te permitirá establecer el texto del botón de envío y su posición:

Edit_Form_‹_Mark_Allen_—_WordPress

Una vez que hayas construido el formulario, agregado las etiquetas y establecido los anchos, etc, tendrás que configurar el la ficha del formulario final, se explica en la siguiente sección.

Pestaña de Configuración del Formulario

La pestaña de configuración del formulario es el último elemento necesario para configurar el formulario antes de añadirlo a una página. Aquí puedes configurar el correo electrónico al que se enviará tu formulario (éste será tu correo electrónico), el asunto del correo electrónico, la ubicación de las etiquetas y la opción de confirmación, puede ser un simple mensaje de texto o puede redirigir al usuario a otra página .
sc

Lo primero que debes hacer es agregar tu correo electrónico a la sección “Correo electrónico del destinatario” y, a continuación, seleccionar el asunto del correo electrónico. Generalmente, el “Mensaje del formulario de contacto” funcionará bien. El asunto del correo electrónico se puede personalizar utilizando los valores de los campos existentes. Puedes ver la imagen anterior resaltada en rojo. El ID de campo se puede encontrar cuando se hace clic en cualquier campo:

sc2

Así, por ejemplo, si el usuario escribe en el campo ‘Nombre’, ‘Juan’, entonces el asunto del correo electrónico en este caso será ‘Un nuevo mensaje de Juan’. Si es necesario, puedes utilizar varios campos en la línea de asunto.

A continuación, puedes seleccionar la alineación de las etiquetas en el formulario, arriba, a la izquierda o a la derecha. El siguiente ejemplo muestra la alineación a la izquierda.

label-placements

Por último, puedes seleccionar si el mensaje de confirmación es un simple mensaje de agradecimiento o puede ser redirigido a otra página:

Edit_Form_‹_Mark_Allen_—_WordPressEdit_Form_‹_Mark_Allen_—_WordPress

Una vez que todo esté completo, guarda el formulario en la parte inferior derecha:

Cursor_and_Edit_Form_‹_Mark_Allen_—_WordPress

Añadir el Formulario a Páginas y Publicaciones

Agregar el formulario a cualquier página o publicación es simple. Después de guardar el formulario, verás una opción para copiar un código corto. Este código abreviado se puede utilizar en cualquier widget de página, publicación o texto. Simplemente copia y pegua el código en el formulario mostrado.

Cursor_and_Edit_Form_‹_Mark_Allen_—_WordPress

Pegar Código:

Cursor_and_Edit_Page_‹_Mark_Allen_—_WordPress

Guardar el área relevante a la que se ha agregado el formulario y ver la página:

Cursor_and_Contact_Page_-_Mark_Allen

El estilo del formulario tomará el estilo de tu tema para que se ajuste bien con todos tus Flothemes.

Formulario en Dos Columnas

Si deseas crear 2 columnas en tu formulario de contacto, puedes hacer esta configuración en tu formulario:
2-col

Alternativamente, puedes hacerlo utilizando la opción Ancho de campo en la pestaña “Configuración de campo” al crear tu formulario.

Para ello, seleccione cualquier elemento del lado derecho donde haya creado su formulario, se resaltará y la pestaña “Configuración de campo” se mostrará a la izquierda:

select-field-width

Selecciona 50% para el ancho del campo de la pestaña. Para alinear otro elemento al lado de este, sigue el mismo proceso, selecciona y establece a 50%, los elementos deben alinearse uno al lado del otro:

50-50-side-by-side

Envíos

Cada mensaje enviado se envía por correo electrónico, pero también se almacena en la Base de Datos como entradas de formulario.

Si hay entradas no leídas, un círculo rojo mostrará el número de mensajes no leídos:

submissions-messages

Cuando el mensaje se revisa por correo electrónico, la Entrada relacionada se marcará como leída automáticamente.

También hay configuraciones de plugin que afectarán a todos los formularios. http://i.imgur.com/8gpx41h.png

Y si hay varios formularios utilizados en el mismo sitio, las entradas pueden ser filtradas por el formulario principal:

Cursor_and_Slack

Configuración de Flo Forms

El área de configuración Flo Forms te permite crear un recordatorio de correo electrónico que se puede enviar a tu correo electrónico cuando una mensaje no se ha leído después de un determinado período de tiempo.

Ve a la pestaña Flo Form Settings (Configuración de formularios Flo) y, a continuación, activa los recordatorios de correo electrónico, seleccionea el número de días en los que deseas recibir un recordatorio si la solicitud no se ha leído e ingresa la dirección de correo electrónico a la que se enviará el recordatorio:

flo-form-settings-email

Traducir los Plugins

Todas las etiquetas y mensajes de texto utilizados en el complemento están en inglés y tienen soporte de localización (pueden traducirse). El archivo .pot que contiene las cadenas traducibles se puede encontrar en la carpeta ‘/ flo-forms / languages’.

Ese archivo se puede traducir utilizando la aplicación de escritorio Poedit o un complemento WP.

Se recomienda utilizar el complemento Loco Translate. Lee las instrucciones en la página del plugin. Nuestra única recomendación es, guardar los archivos .po y .mo traducidos fuera del plugin. De esta manera, si el complemento se actualiza, no perderá la traducción.

Screen Shot 2016-06-22 at 6.32.34 PM

Y si traduces el complemento en cualquier idioma, puedes ponerte en contacto con nosotros y enviar el archivo .po para que podamos añadirlo al complemento para que esté disponible para todos.

Problemas con Correos Electrónicos

Hay algunos usuarios que tienen problemas con el correo electrónico del formulario de contacto. Puede haber más razones por las que el formulario de contacto no envíe los correos electrónicos. A continuación describiremos los pasos que debes seguir para intentar solucionar este problema.

1) Revisa la carpeta de spam. A veces los mensajes de correo electrónico se dirigen a spam, y puedes pensar que el formulario no está funcionando. Si encuentras el correo electrónico en el spam, márquelo como No Spam y los futuros correos electrónicos de ese servidor deberán llegar a la bandeja de entrada.

2) Deshabilitar los encabezados “Responder a” – En algunos servidores, los correos electrónicos no funcionarán si los encabezados están habilitados. Por lo tanto, es necesario desactivar el encabezado de correo electrónico “Responder a” y, a veces, enviar sólo correos electrónicos de texto en lugar de html.

form

3) Necesitamos comprobar si tu servidor está enviando corres en absoluto. Para ello, puedes crear un nuevo usuario mediante un correo electrónico al que tengas acceso. Asegúrate de marcar la opción que envía la contraseña al usuario

Screen Shot 2015-03-13 at 9.06.14 AM

A continuación, comprueba si has recibido por correo electrónico las credenciales del nuevo usuario (asegúrate de revisar el spam). Si recibste las credenciales, el correo electrónico está funcionando y debemos depurar más (consulta el paso 4.). Si no recibiste correos electrónicos, debes ponerse en contacto con tu proveedor del servidor .

4) Utiliza un proveedor de SMTP como mandrill para que genere los correos electrónicos para ti, con una tasa de éxito del 99% es una manera fantástica de evitar los problemas de parte del servidor que pueden ser causados al usar correos electrónicos de WordPress. Regístrate para obtener una cuenta de Mandrill aquí, genera el API y empieza. También rastrea tus mensajes para que puedas verlos en tu cuenta de mandrill.

5) Desactiva todos los plugins que tienes y vuelve a intentarlo. Si el formulario de contacto todavía no envía los correos electrónicos, envía un ticket de soporte.