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 escritorio del plugin y borrar el formulario de prueba.

Instalado e activado el plugin, buscamos la sección en el menú lateral de wordpress Ninja Forms → Escritorio. Una vez dentro eliminamos el formulario por defecto.

Paso 3 - Importar el nuevo formulario

El formulario por defecto para la importación se encuentra alojado en I:\CMS\WordPress\Recursos\Ninja-forms.

Seleccionamos el archivo nf_form_11_20_2019_Contact_Me.nff 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

En el escritorio de Ninja Forms, clicamos en el engranaje de la línea del formulario y seguidamente en “editar”:

• Nos dirigimos a la pestaña "Correos electrónicos y acciones" y editamos:

• • Email Confirmation: Sustituir imágen por el escudo del municipio (importado desde biblioteca de medios) Ajustar tamaño de la imagen aproximadamente a 161x160px. Para ello es conveniente seleccionarla (que no clicarla) primero y rellenar el campo "Responder a" con el correo del ayuntamiento.
  • 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 200x200px. aproximadamente.
• "Publicar".
• Cerrar (clic en el aspa "x").

Paso 6 - Captcha del formulario.

Con la sesión Google del administrador del sitio web iniciada (webmaster@eprinsa.es para los portales municipales) entramos en ajustes de Ninja Forms (en el menú lateral del escritorio de WordPress) y clicamos 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 plugin de Ninja Forms como hemos visto anteriormente.

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” (o texto) de DIVI.