Si acaba de comenzar su primer blog, ahora sabe que viene con un formulario de contacto predeterminado: la mayoría de los temas premium tienen uno. El punto es que los formularios de contacto son esenciales cuando se trata de destinatarios que quieren conectarse contigo por una razón u otra.
Además, con los formularios de contacto, la participación de los usuarios debería aumentar, por lo que es importante que los uses en tu blog. Pero, por otro lado, también puede usar complementos de formulario como Formulario de contacto 7formulario de contacto rápido y seguro para animar a los usuarios a ponerse en contacto con usted.
Además, este formulario de contacto debería permitirle contactar a su audiencia directamente, así como mejorar el marketing.
Sin embargo, el problema es que la mayoría de los formularios de contacto predeterminados, e incluso los complementos, siguen el mismo formato estereotipado, por lo que es posible que desee optar por algo más especializado, como configurar su propio formulario de contacto en WordPress.
Si tiene bastante dominio de php, debería poder hacerlo fácilmente, por lo que es importante leer el resto del artículo para poder configurar su propio formulario personalizado para que el usuario se conecte con usted.
1. Diseño de formulario:
Puede crear una plantilla de página separada o escribir código HTML para esto en su sitio de WordPress, y dado que luego es infinitamente más simple, tiene más sentido elegir la misma.
Puede crear un formulario personalizado en WordPress siguiendo los pasos que se enumeran a continuación. Y como siempre, asegúrese de hacer una copia de seguridad de su información antes de comenzar.
- Vaya a Páginas -> Agregar nuevo en el panel de control de WordPress.
- Introduzca el título de la página seleccionada, como «Información del cliente» o «Detalles del cliente».
- Ahora ve a la pestaña «HTML» para escribir el código HTML.
- cree un formulario de WordPress personalizado que desee.
- Agregue el método «POST», asígnele el nombre «customer_details»
- Agregue una función «form_validation» en la propiedad onsubmit para agregar algunas validaciones de JavaScript más adelante y realizar una acción.
- La acción es un archivo PHP que se ejecutará después de enviar el formulario.
- En este punto, puede agregar algunos campos al formulario, como su nombre, dirección de correo electrónico, sexo, edad, etc. y cerrar el formulario.
El código final debería verse así
Your Name: <br /> Your Email: <br /> Sex: Male Female<br /> Your Age: <br />
2. Validación:
Ahora que ha diseñado su formulario, es hora de verificar lo mismo. Nunca confíe en los datos del usuario «tal cual» y siempre verifíquelos antes de ingresarlos en la base de datos.
Simplemente siga el código a continuación para una validación rápida y eso debería ser suficiente. Anote este código de verificación y ciérrelo al final.
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}/* Check the Customer Email for invalid format */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
Esto verificará y validará el nombre y la dirección de correo electrónico del cliente. Agregue este código después. Entonces, el código completo en WordPress se verá así:
Your Name: <br />
Your Email: <br />
Sex: Male Female<br />
Your Age: <br />
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}
/* Check the Customer Email for invalid format */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“Given email address is not valid.”);
return false;
}
}
Ahora todo lo que queda por hacer es publicar la página, y eso debería funcionar de manera efectiva.
3. Scripts del lado del servidor:
¿Recuerdas la parte donde mencionamos «detalles del cliente.php»? Bueno, es hora de que hagamos eso también.
Abra el Bloc de notas o su editor de texto favorito y guarde el código que se explica a continuación y guarde el archivo como detalles-del-cliente.php en su escritorio.
Primero, declare las variables denominadas $ nombre_cliente, $ correo_cliente, $ sexo_cliente, $ edad_cliente y asigne los valores a los campos apropiados enviados por el formulario HTML.
Ej. $ nombre_cliente = $ _POST[“customer_name”] tomará el valor del formulario HTML con el método POST y lo asignará a la variable $ client_name.
Ahora tienes que hacer lo mismo con los demás valores. Ahora necesita conectar el archivo PHP a 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 utilizando su cliente FTP favorito, como FileZilla. Abra wp-config.php con su editor de texto favorito, como el Bloc de notas, y encontrará la configuración necesaria de la base de datos.
Después de conectarse 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 que aparezca un mensaje para el 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 más adelante.
Entonces, el archivo completo customer-details.php se verá así
// Get data
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST[“customer_email”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// Database connection
$conn = mysqli_connect(“Database Host”,”Database Username”,”Database Password”,”Database Name”);
if(!$conn) {
die(‘Problem in database connection: ‘ . mysql_error());
}
// Data insertion into database
$query = “INSERT INTO ‘Database Name’.’Table Name’ ( ‘customer_name’, ‘customer_email’, ‘customer_sex’, ‘customer_age’ ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age )”;
mysqli_query($conn, $query);
// Redirection to the success page
header(“Location: “);
Sube este archivo customer-details.php a la carpeta de temas con tu cliente FTP favorito.
4. Éxito:
La página de éxito es la que el 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 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 fragmento de página con «Página de éxito» o lo que haya ingresado en el encabezado («Ubicación»). Ahora escriba un mensaje como «gracias por su cooperación» o algo así, y debería estar listo.
Siempre puede volver a cargar su sitio para verificar y ver si el formulario de contacto funciona como debería, 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 un formulario personalizado.
Es importante que el formulario de contacto no parezca demasiado agresivo o intrusivo para que pueda ayudar a aumentar estas 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 principales razones 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 provista aquí no solo para crear un formulario personalizado en WordPress, sino para crear cualquier formulario de contacto usando varios parámetros
Como se sugirió anteriormente, siempre es una buena idea hacer una copia de seguridad completa antes de jugar con los archivos principales.
Después de configurar y ejecutar un formulario, debería poder verificar que el formulario dado esté validando los datos antes de ingresarlo en la base de datos, ya que está programado para hacerlo.
En general, los formularios de contacto son muy importantes 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 haber probado los pasos anteriores y su formulario de contacto personalizado debería funcionar bien.
