Wordpress:Portales municipales:Configurar el formulario de contacto: Difference between revisions
No edit summary |
|||
| Line 3: | Line 3: | ||
== Paso 1 - Instalar el plugin Ninja Forms == | == Paso 1 - Instalar el plugin Ninja Forms == | ||
Una vez en el escritorio de Wordpress nos dirigimos a la sección de Plugins y buscamos el plugin Ninja Forms. | |||
== Paso 2 - Acceder | [[File:ConfFormPaso1.PNG|600px]] | ||
[[File:ConfFormPaso2.PNG.PNG]] | |||
== Paso 2 - Acceder al Dashboard del plugin y borrar el formulario de prueba. == | |||
Instalado e activado el plugin, buscamos la sección en el menú de wordpress Ninja Forms --> Dashboard. Una vez dentro eliminamos el formulario por defecto. | |||
[[File:ConfFormPaso2.PNG.PNG|600px]] | |||
== Paso 3 - Importar el nuevo formulario == | == Paso 3 - Importar el nuevo formulario == | ||
[[File:ConfFormPaso3.PNG]] | Si se desea importar un formulario Ninja Forms --> Importar/Exportar. | ||
Seleccionamos el archivo y seguidamente pulsamos el botón de Importar Formulario. | |||
[[File:ConfFormPaso3.PNG|600px]] | |||
== Paso 4 - Añadir CSS en Divi == | == Paso 4 - Añadir CSS en Divi == | ||
Si se desea aumentar el nivel estético del formulario se puede añadir las siguientes lineas de CSS en Divi. | |||
[[File:ConfFormPaso4.PNG|600px]] | |||
Los valores de rgba corresponden con rojo,verde,azul y alpha, los tres primeros establecen el color y alpha define el nivel de opacidad de cada píxel. | |||
== Paso 5 - Cambiar imágenes en “Success Message” y “Email Confirmation” == | == Paso 5 - Cambiar imágenes en “Success Message” y “Email Confirmation” == | ||
| Line 18: | Line 29: | ||
Nos dirigimos a la segunda pestaña y editamos Success Message y Email Confirmation. | Nos dirigimos a la segunda pestaña y editamos Success Message y Email Confirmation. | ||
[[File:ConfFormPaso5.PNG|600px]] | |||
La imagen(Escudo del pueblo importado desde los medios) de “Email Confirmation” deberá ajustarse su tamaño hasta coincidir con aproximadamente 161 x 160 píxeles. | La imagen(Escudo del pueblo importado desde los medios) de “Email Confirmation” deberá ajustarse su tamaño hasta coincidir con aproximadamente 161 x 160 píxeles. | ||
| Line 33: | Line 39: | ||
Con la sesión google de webmaster iniciada entramos en ajustes de Ninja Forms y clickamos en el hipervínculo “aquí”, para obtener la Clave del sitio reCAPTCHA y Clave secreta de reCAPTCHA. Establecer Idioma de reCAPTCHA = es | Con la sesión google de webmaster iniciada entramos en ajustes de Ninja Forms y clickamos en el hipervínculo “aquí”, para obtener la Clave del sitio reCAPTCHA y Clave secreta de reCAPTCHA. Establecer Idioma de reCAPTCHA = es | ||
[[File:ConfFormPaso6_1.PNG|600px]] | |||
Nos aparecerá la siguiente pestaña y se tendrá que entrar en Admin Console. | Nos aparecerá la siguiente pestaña y se tendrá que entrar en Admin Console. | ||
[[File:ConfFormPaso6_2.PNG|600px]] | |||
[[File:ConfFormPaso6_3.PNG|600px]] | |||
Completamos con la información mostrada en la siguiente imagen. | Completamos con la información mostrada en la siguiente imagen. | ||
[[File:ConfFormPaso6_4.PNG|600px]] | |||
[[File:ConfFormPaso6_5.PNG|600px]] | |||
Copiamos las claves en los ajustes del plug-in de Ninja Forms como hemos visto anteriormente. | Copiamos las claves en los ajustes del plug-in de Ninja Forms como hemos visto anteriormente. | ||
Esto es todo lo que se tendría que hacer añadir que para mostrar el formulario en cualquier página bastaría con añadir el código del formulario a un módulo de “código” de DIVI. | |||
[[File:ConfFormPaso6_2.PNG|600px]] | |||
Revision as of 09:01, 20 November 2019
Formulario de contacto Ninja Forms (Plug-in)
Paso 1 - Instalar el plugin Ninja Forms
Una vez en el escritorio de Wordpress nos dirigimos a la sección de Plugins y buscamos el plugin Ninja Forms.
Paso 2 - Acceder al Dashboard del plugin y borrar el formulario de prueba.
Instalado e activado el plugin, buscamos la sección en el menú de wordpress Ninja Forms --> Dashboard. Una vez dentro eliminamos el formulario por defecto.
Paso 3 - Importar el nuevo formulario
Si se desea importar un formulario Ninja Forms --> Importar/Exportar. Seleccionamos el archivo y seguidamente pulsamos el botón de Importar Formulario.
Paso 4 - Añadir CSS en Divi
Si se desea aumentar el nivel estético del formulario se puede añadir las siguientes lineas de CSS en Divi.
Los valores de rgba corresponden con rojo,verde,azul y alpha, los tres primeros establecen el color y alpha define el nivel de opacidad de cada píxel.
Paso 5 - Cambiar imágenes en “Success Message” y “Email Confirmation”
Una vez en el menú de Ninja Forms, clickamos en el engranaje y seguidamente en “editar”. Nos dirigimos a la segunda pestaña y editamos Success Message y Email Confirmation.
La imagen(Escudo del pueblo importado desde los medios) de “Email Confirmation” deberá ajustarse su tamaño hasta coincidir con aproximadamente 161 x 160 píxeles.
La imagen(Escudo del pueblo importado desde los medios) de “Success Message” deberá ajustarse su tamaño hasta coincidir con aproximadamente 201x 200 píxeles.
Paso 6 - Captcha del formulario.
Con la sesión google de webmaster iniciada entramos en ajustes de Ninja Forms y clickamos en el hipervínculo “aquí”, para obtener la Clave del sitio reCAPTCHA y Clave secreta de reCAPTCHA. Establecer Idioma de reCAPTCHA = es
Nos aparecerá la siguiente pestaña y se tendrá que entrar en Admin Console.
Completamos con la información mostrada en la siguiente imagen.
Copiamos las claves en los ajustes del plug-in de Ninja Forms como hemos visto anteriormente. Esto es todo lo que se tendría que hacer añadir que para mostrar el formulario en cualquier página bastaría con añadir el código del formulario a un módulo de “código” de DIVI.