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.
[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 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.
Si se desea cambiar el correo de administrador al cual llegan las notificaciones se debe editar "Email Notificacion" y cambiar el contenido del campo "Para:".
Paso 6 - Captcha del formulario.
Con la sesión de admnistrador del sitio web (en google) 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, 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.
