Wordpress:Portales municipales:Configurar el formulario de contacto

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.

Si aparece el siguiente error. Pulsamos en la cruz de la esquina superior derecha. Añadimos a la WhiteList.

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. (comprobar antes si se encuentra ya en CSS Adicional por haber sido añadido mediante clonación)

[CSS]
/* Da estilos al formulario de contacto */
.nf-form-wrap .nf-form-content input.ninja-forms-field.nf-element {
	background-color:white;
	border-color:rgba(49,100,0,0.2);
	border-radius:2px;
}
.nf-form-wrap .nf-form-content textarea.ninja-forms-field.nf-element {
	background-color:white;
	border-color:rgba(20,46,95,0.2);
	border-radius:2px;
}
.nf-form-wrap .nf-form-content .submit-container input.ninja-forms-field.nf-element {
	background-color:#142E5F;
}
.nf-form-wrap .nf-form-content .checkbox-wrap {flex-direction:column;}
.nf-form-wrap .nf-form-content .checkbox-wrap label {padding-bottom:10px;}

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 - Correos electrónicos y acciones

Una vez en el menú de Ninja Forms, clickamos en el engranaje y seguidamente en “editar”. Nos dirigimos a la pestaña "Correos electrónicos y acciones" y editamos "Email Confirmation", "Email Notification" y "Success Message".

Email Confirmation: Sustituir imágen por el escudo del municipio (importado desde biblioteca de medios) Ajustar tamaño de la imagen aproximadamente a 161x160px.

Email Notification: Rellenar el contenido del campo "Para:" con el correo del ayuntamiento.

Success Message: Sustituir imágen por el escudo del municipio (importado desde biblioteca de medios) Ajustar tamaño de la imagen de 161x160px. a 200x20px. aproximadamente

Paso 6 - Captcha del formulario.

Con la sesión Google del admnistrador del sitio web iniciada (webmaster@eprinsa.es para los portales municipales) entramos en ajustes de Ninja Forms (en el escritorio de WordPress) 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, entramos 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.