Cómo crear un formulario personalizado en un sitio web o blog de WordPress
Publicado: 2021-12-27
Si acaba de configurar su primer blog, entonces ya sabrá que viene con un formulario de contacto predeterminado; la mayoría de los temas premium vienen con uno. El punto es que los formularios de contacto son esenciales cuando se trata de su audiencia que busca ponerse en contacto con usted por una razón u otra.
Además, con los formularios de contacto, la participación de los usuarios debería dispararse, por lo que es esencial que utilice uno en su blog. Pero, de nuevo, también puede usar complementos de formulario como Formulario de contacto 7, formulario de contacto rápido y seguro, entre otros, para que sus usuarios se comuniquen con usted.
Y lo que es más, este formulario de contacto debería permitirle conectarse directamente con su audiencia y también permitirle optimizar su comercialización.
Videotutorial
Sin embargo, el problema es que la mayoría de los formularios de contacto predeterminados e incluso los complementos vienen con el mismo formato de estereotipo, por lo que es posible que desee optar por algo más especializado en la línea de configurar su propio formulario de contacto en WordPress.
Si tiene bastante experiencia en php, entonces debería poder hacerlo con facilidad, por lo que es esencial que lea el resto del artículo para que pueda configurar su propio formulario personalizado para que lo utilicen sus usuarios. para conectar contigo.
1. Diseño de formulario:
Puede crear una plantilla de página separada o escribir un código HTML en su página de WordPress para esto, y como la última es infinitamente más simple, tiene más sentido optar por la misma.
Puede crear un formulario personalizado en WordPress siguiendo los pasos que se enumeran a continuación. Y como siempre, recuerde hacer una copia de seguridad de su información antes de comenzar.
- Vaya a Páginas -> Agregar nueva opción que se encuentra en su panel de WordPress.
- Proporcione el título de la página que desee, como "Información del cliente" o "detalles del cliente".
- Ahora navegue a la pestaña 'HTML' para escribir código HTML.
- crear un formulario personalizado en WordPress que desee.
- Agregue un método "POST", asígnele el nombre "detalles_cliente"
- Agregue una función "form_validation" en la propiedad onsubmit para agregar algunas validaciones de JavaScript más tarde y dar la acción.
- La acción es el archivo PHP que se ejecutará cuando se envíe el formulario.
- En este punto, es posible que desee agregar algunos campos en el formulario como nombre, correo electrónico, sexo, edad, etc. y cerrar el formulario.
El código final debería verse así
Tu nombre: <br /> Su correo electrónico: <br /> Sexo: Masculino Femenino<br /> Tu edad: <br />
2. Validación:
Ahora que ha diseñado el formulario, es hora de validar el mismo. Nunca confíes en los datos de los usuarios 'tal como son' y siempre, siempre validalos antes de ingresarlos a tu base de datos.
Simplemente siga el código que se detalla a continuación para una validación rápida y eso debería funcionar. Anote este código de validación y ciérrelo al final.
función formulario_validación() {
/* Verifique el nombre del cliente para el envío en blanco*/
var nombre_cliente = documento.formularios[“detalles_cliente”][“nombre_cliente”].valor;
if (nombre_cliente == “” || nombre_cliente == null) {
alert(“El campo de nombre debe ser llenado.”);
falso retorno;
}/* Verifique el correo electrónico del cliente en busca de un formato no válido */
var correo_email_cliente = documento.formularios[“detalles_cliente”][“correo_email_cliente”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (en_posición<1 || posición_punto=email_cliente.longitud) {
alerta ("La dirección de correo electrónico proporcionada no es válida");
falso retorno;
}
}
Esto verificará y validará el nombre del cliente y la dirección de correo electrónico. Agregue este código después de . Entonces, el código completo en WordPress se verá así:
Tu nombre: <br />
Su correo electrónico: <br />
Sexo: Masculino Femenino<br />
Tu edad: <br />
función formulario_validación() {
/* Verifique el nombre del cliente para el envío en blanco*/
var nombre_cliente = documento.formularios[“detalles_cliente”][“nombre_cliente”].valor;
if (nombre_cliente == “” || nombre_cliente == null) {
alert(“El campo de nombre debe ser llenado.”);
falso retorno;
}
/* Verifique el correo electrónico del cliente en busca de un formato no válido */
var correo_email_cliente = documento.formularios[“detalles_cliente”][“correo_email_cliente”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (en_posición<1 || posición_punto=email_cliente.longitud) {
alerta ("La dirección de correo electrónico proporcionada no es válida");
falso retorno;
}
}
Ahora, todo lo que le queda por hacer es publicar la página y eso debería ser suficiente.
3. Scripts del lado del servidor:
¿Recuerdas la parte en la que mencionamos "detalles del cliente.php"? Bueno, es hora de que nos ocupemos de esa parte también.
Abra el Bloc de notas o su editor de texto favorito y escriba el código que se explica a continuación y guarde el archivo como detalles-del-cliente.php en su escritorio.
Primero, declare algunas variables denominadas $nombre_cliente, $correo_cliente, $sexo_cliente, $edad_cliente y asigne los valores a los campos respectivos enviados por el formulario HTML.
Por ejemplo, $nombre_cliente = $_POST[“nombre_cliente”] capturará el valor del formulario HTML mediante el método POST y lo asignará a la variable $nombre_cliente.
Ahora, también debe hacer lo mismo con otros valores. Ahora necesita conectar el archivo PHP con la base de datos usando mysqli_connect. Si no recuerda la configuración de la base de datos, puede encontrar esta configuración desde su instalación de WordPress.
Descargue wp-config.php desde su instalación de WordPress a su escritorio usando su cliente FTP favorito como FileZilla. Abra wp-config.php usando su editor de texto favorito como el Bloc de notas y encontrará la configuración de la base de datos requerida.
Después de la conexión a la base de datos, inserte los datos recopilados del formulario en la base de datos de WordPress usando mysqli_query.
Hay un paso opcional en este código PHP.
Si desea mostrar algún mensaje al usuario después de enviar el formulario o desea redirigir al usuario a otra página, puede agregar un encabezado ("Ubicación:") al código. Deberá crear una página de éxito para esto más adelante.
Entonces, el cliente-detalles.php completo se verá como
// Obtener datos
$nombre_cliente = $_POST[“nombre_cliente”];
$cliente_email = $_POST[“cliente_email”];
$sexo_cliente = $_POST[“sexo_cliente”];
$edad_cliente = $_POST[“edad_cliente”];// Conexión a la base de datos
$conn = mysqli_connect(“Host de la base de datos”,”Nombre de usuario de la base de datos”,”Contraseña de la base de datos”,”Nombre de la base de datos”);
if(!$conn) {
die('Problema en la conexión a la base de datos: ' . mysql_error());
}
//Inserción de datos en la base de datos
$consulta = “INSERTAR EN 'Nombre de la base de datos'.'Nombre de la tabla' ('nombre_del_cliente', 'correo_del_cliente', 'sexo_del_cliente', 'edad_del_cliente') VALUES ($nombre_del_cliente, $correo_del_cliente, $sexo_del_cliente, $edad_del_cliente)”;
mysqli_query($conn, $consulta);
// Redirección a la página de éxito
encabezado ("Ubicación: ");
Sube este archivo customer-details.php a la carpeta de temas usando tu cliente FTP favorito.
4. Éxito:
La página de éxito es la que un usuario puede ver después de enviar el formulario con sus datos; puede configurar esta página para que muestre un mensaje personalizado como "sus datos se han enviado correctamente" o algo similar.
El punto es que puede usar el código publicado a continuación para configurar su propia página de éxito completa con un mensaje personalizado.
Cree una página de WordPress, asígnele un título como "Página de éxito", asegúrese de hacer coincidir el slug de la página con 'página de éxito' o lo que haya dado en el encabezado ("Ubicación"). Ahora escriba un mensaje, como "gracias por su cooperación" o algo por el estilo y debería estar listo.
Siempre puede volver a cargar su sitio para verificar y ver si el formulario de contacto funciona como se supone y, en casi todos los casos, debería funcionar bien. Sin embargo, si tiene algunos problemas, siempre puede consultarlo en línea o pedirle a un experto que configure su formulario personalizado.
Es importante que su formulario de contacto no parezca demasiado agresivo o intrusivo, de modo que pueda ayudar a aumentar esas tasas de conversión.
Además, también puede usar estos formularios personalizados para recopilar datos e información sobre sus clientes que puede usar para optimizar sus campañas de marketing.
Esta es una de las razones principales por las que los formularios, especialmente los formularios de contacto, son esenciales para todos los blogs y, lo que es más importante, puede usar la codificación que se enumera aquí no solo para crear un formulario personalizado en WordPress, sino que, en realidad, puede crear cualquier tipo de formulario de contacto con diferentes parámetros.
Como se sugirió anteriormente, siempre es una buena idea hacer una copia de seguridad completa antes de jugar con los archivos principales.
Una vez que tenga el formulario en funcionamiento, debería poder verificar si el formulario en cuestión valida los datos como está programado para hacerlo antes de ingresarlo en su base de datos.
En general, los formularios de contacto son bastante esenciales tanto para los blogs como para los sitios web, ya que ayudan a los clientes a comunicarse con usted y pueden generar mejores tasas de conversión a largo plazo. Así que asegúrese de probar los pasos enumerados anteriormente y su formulario de contacto personalizado debería funcionar bien.