Wordpress:Portales municipales:Configurar el formulario de contacto

From
Revision as of 09:01, 20 November 2019 by Admin (talk | contribs)
Jump to navigation Jump to search

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.

ConfFormPaso1.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.

ConfFormPaso2.PNG.PNG

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.

ConfFormPaso3.PNG

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.

ConfFormPaso4.PNG

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.

ConfFormPaso5.PNG

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

ConfFormPaso6 1.PNG

Nos aparecerá la siguiente pestaña y se tendrá que entrar en Admin Console.

ConfFormPaso6 2.PNG

ConfFormPaso6 3.PNG

Completamos con la información mostrada en la siguiente imagen.

ConfFormPaso6 4.PNG

ConfFormPaso6 5.PNG

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.

ConfFormPaso6 2.PNG