Soy un gran fanático de la construcción de cosas desde cero. Hay muchos complementos para todo lo que podrías desear en un blog de WordPress, pero me siento recompensado y seguro cuando construyo funciones desde cero. ¿Por qué molestarse? La mayoría de las veces no quiero confunderme con la interfaz de uso de un complemento, o el complemento hace mucho más de lo que realmente quiero hacer. Sin piratas, los archivos básicos, los complementos pueden ser muy rígidos con lo que puede hacer. ¿La solución? ¡Ródate sobre el tuyo! Es una gran experiencia de aprendizaje, ya sabes lo que está sucediendo bajo el capó y obtienes habilidades para otro momento. Y créeme, necesitarás estas habilidades en el camino. Raramente aprendí a hacer algo con WordPress que no pude repetir otro proyecto.
¿Por qué no uso un complemento? Aquí hay cuatro buenas razones por las cuales los complementos son perjudiciales para los formularios de contacto simples:
Los complementos empacan mucho más de lo que (debería) interesarle
El uso de una interfaz de uso para construir un formulario de contacto simple es exagerado
Saber lo que hay debajo del capó está bien para tu conocimiento y para tu alma paz
Las hojas de estilo predeterminadas me matan lentamente desde adentro.
Probablemente podría continuar. Odio apasionadamente interfaces voluminosas. Odio a UX estúpido y odio especialmente demasiada funcionalidad. El odio es una palabra muy fuerte, pero hoy en día la mayoría de los formularios que se jactan de los formularios de contacto están en competencia para crear el mejor complemento, el más rico en funciones. Y se ve así

O peor, que

¡Odiaste desplazarse por él tanto como yo! ¡Pero necesito todas estas características! ¿En serio? Ya no es Web 2.0. Formularios complejos SHARE CLIENTES. ¿Cuántas veces ha ido a completar un formulario, solo para desanimarse por la cantidad de datos personales que necesita ingresar? Pasa todo el tiempo. La gente se pone a mitad de camino y luego se distrae. Las personas en la web tienen una atención muy corta. Por lo tanto, para que usted sea lo más fácil posible para sus clientes y clientes potenciales, contactarlo, realmente debe tratar con los huesos. Entonces, ¿qué es absolutamente esencial? Nombre, correo electrónico, mensaje y verificación humana. Pero creo que ya lo sabías. Estas cuatro pequeñas información son tan simples como el comentario de un blog: ¿por qué le gustaría que la conexión sea más difícil? No creo que haya creado un formulario con más información que si es absolutamente necesario. Si las personas quieren dejar su número de teléfono y dirección, lo harán en el mensaje. ¡Los índices visuales son suficientes, como preguntarles en un breve párrafo sobre la forma! ¿Definitivamente es un dolor que codifica todo desde cero? No realmente. Quiero decir, si eres paciente, aplastarás este tutorial en menos de media hora. Todo lo que realmente consiste es:
Un archivo de plantilla personalizada
Algunos PHP
Sí, eso es todo. Puede manejar la pantalla del formulario, la verificación humana, la validación, enviar un correo electrónico al administrador y al lector gracias porque se ha conectado, todo en un archivo. Las nociones básicas como siempre comienzan con una nueva instalación de WordPress. Si no está seguro de cómo, edítese sobre Codex. Para seguir las buenas prácticas, crearé un tema secundario de veintiséis, disponible aquí, solo con una hoja de estilo y nuestra plantilla de página personalizada. Puede eliminar la plantilla de página personalizada y colocarla en cualquiera de sus temas actuales, y debe funcionar sin problemas (a excepción de los cambios CSS). En el contenido WP/temas, agregue una nueva carpeta llamada “Forma de contacto”. Dentro de él, cree dos nuevos archivos Style.css y Page-Concact-US.Php. Inside style.css, inserte lo siguiente: /*
Nombre del tema: plantilla de página del formulario de contacto
Tema Uuri: https://wpmudev.com/blog/
Descripción: Formularios de contacto súper simples y autónomos que cae en su tema existente.
Autor: Harley
Autor: https://wpmudev.com/
Plantilla: veintiséis
Versión: 0.1
*/
@Import URL (“../ Twentytwelve/ style.css”); Ignora mi salida única premium. Trabajo aquí. ¡Es un requisito!
Hasta ahora, debería poder continuar y activar el tema en su sitio de prueba y estar listo para ejecutar.
El siguiente paso es crear una página, llamada correctamente “Contáctenos”. Este nombre es especial. Se refiere inmediatamente al archivo de plantilla que creé anteriormente, llamado Page-Contact-US.Php. Esta solución para crear una plantilla de página personalizada no es una solución general, sino solo una convención ofrecida por WordPress y me gusta. Page-bout-US.php se utilizará automáticamente para mostrar una página titulada “Acerca de nosotros”. ¡Se trata de Handy! Si creó Page-Contact-S.Php y lo dejó en blanco, visitar el recién creado “Contáctenos” producirá una página en blanco.
¡Está bien! Complete rápidamente con lo siguiente y se verá como una página normal nuevamente.


<Artículo id = "post- ” >
El código de formulario va aquí
<!-.
ESTÁ BIEN. Ahora tenemos la página base, es hora de introducir una forma muy simple.
Reemplace el párrafo del código El formulario estará aquí con lo siguiente: <img src = "fecha: imagen/gif; base64, r0lgodlhabaiaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaa7" data-wp-preserve = "%3cstyle%20dx 3d%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 22%3%3E%0A%20%20. RROR%7B%0A%20%20%20%20%Padting%3a%205px%209px%3B%0A%20%20%20 ABO%3A%201px%20SOLID%20Red% 3b%0a%20%20%20%20color%3A%20Red%3B%0A%20%20%20 Border-Radius%3A%203px%3B%0A%20%7d%0A%0A%20%20.Success% 7b%0a%20%20%20%20 padting%3a%205px%209px%3b%0a%20%20%20 border%3a%201px%20solid%20green%3b%0a%20%20%20%20color%3a%3A%3A%3B 20Green%3B%0A%20%20%20 Border-Radius%3A%203px%3B%0A%20%7d%0A%20%20%20FOR%20SPAN%7B%0A%20%20%20%20Color 3A%% 20Red%3b%0a%20%20%7d%0a%3c%2fstyle%3e "data-mCE-resize =" false "data-mce-placeholder =" 1 "class =" mce-object "width =" 20 " altura = "20" Alt = "” title = “” />

<Form Action = "” Method = “Post”>
nombre: *
<input type = "text" name = "message_name" value = " “>
correo electrónico: *
<input type = "text" name = "message_email" value = " “>
mensaje: *
+ 3 = 5
Disculpe el estilo en línea! Esto es solo para mensajes de error/éxito y para poner todo en un archivo. Siéntase libre de ponerlo en su estilo CSS.
Hay varias cosas que suceden aquí. En primer lugar, repetimos la variable $ respondida, que analizaremos un poco más tarde. El resto son solo etiquetas de forma, pero notará que su valor es el eco de una variable $ _post. Esto es para que, si el formulario se envía incorrectamente, todos los datos se mantienen para que el usuario no tenga que escribir todo desde cero.
También hay una introducción de formulario “oculta”, que nos permite verificar si un usuario ha publicado algo o no. Llegaré a esto más tarde. Agregué un asterisco al lado de cada entrada, para significar que son necesarios.
Si guarda y refresca, ¡tendrá un buen formulario de contacto!
La lógica que sigue al enviar el formulario es simple. Hay varios componentes para construir.
Generación de respuestas y mensajes (basado en la validación) Validación
Enviando un correo electrónico

Generación de respuesta Para ahorrar el código PHP desordenado, colocamos la variable de respuesta $ en el formulario. Es genial, manteniendo la lógica en gran medida separada de las vistas. Sin embargo, ¿cómo establecemos eso? Es bastante fácil, debemos escribir una función que llene la variable de respuesta $ con los comentarios que recibimos de la validación. Debe contener mensajes para responder a cada requisito de validación. En la parte superior de la página-Contact-US.Php antes de get_header (), pegue el siguiente texto. <? Php
// función de generación de respuesta

$ respuesta = “”;
// Funcionar para generar respuesta
Función my_contact_form_generate_response ($ type, $ mensaje) {
Respuesta global de $;
if ($ type == “éxito”) $ respuesta = ”
{$ mensaje}
“;
else $ respuesta = ”
{$ mensaje}
“;
}
?> Frío. Esto aún no hace mucho, pero si tiene conocimientos básicos de PHP, comprenderá que a) creamos una respuesta variable de $ y b) lo llenamos con $ el mensaje transmitido de acuerdo con $ type, que será un error o éxito. Ahora, cuando construimos la validación, podemos llamar a Generate_Response () en cada caso (ya sea un éxito o un fracaso), enviamos un mensaje (es decir, la dirección de correo electrónico no válida) y estaremos justo por encima del formulario! Algunas variables que nos permiten ir allí son 3 grupos de variables que necesitamos para un formulario de contacto exitoso.
Mensajes de validación
Entrada variable de forma
Correo de PHP variable
El proceso de validación utilizará todos estos tres grupos para validar, enviar un correo electrónico y notificar al usuario de un mensaje enviado.En la función my_contact_form_generate_response (), escriba las siguientes doce variables: // Mensajes de respuesta $ noT_HUMAN = “Verificación humana incorrecta”;
$ Talls_content = “Por favor proporcione toda la información”;
$ email_invalid = “dirección de correo electrónico inválida”;
$ Message_unsent = “No se envió el mensaje. Inténtalo de nuevo”;
$ Message_sent = “¡Gracias! Tu mensaje ha sido enviado”;
// variables publicadas por el usuario
$ name = $ _post [‘Message_name’];
$ correo electrónico = $ _post [‘Message_email’];
$ Message = $ _Post [‘Message_Text’];
$ Humano = $ _post [‘Message_Human’];
// variables de correo de php
$ a = get_option (‘admin_email’);
$ temas = “alguien envió un mensaje de” .get_bloginfo (‘nombre’);
$ Headers = ‘De:’.$ Correo electrónico.”
“.
‘Responder a:’. $ Correo electrónico. ”
“; Cada grupo es bastante simple. El grupo de mensajes de respuesta almacena todos nuestros mensajes de retroalimentación en variables. Las variables publicadas por el usuario toman lo que se introdujo en el formulario y los coloca en variables bien calificadas para evitar la necesidad de acceder a la variable $ _Post una y otra vez. Y algunos encabezados que especifican las direcciones desde y hacia la dirección de respuesta. Validación Esta es la parte de carne. Queremos verificar todos los problemas posibles, de la manera más breve posible. Esto requiere más condicional si/else declaraciones, pero no lo suficiente como para explotar su cerebro. En orden, verifique que el usuario envió el formulario (usando la entrada oculta)
Si no, verifique los permisos de verificación humana (es decir, el usuario puede hacer matemáticas correctamente!)
Si ha pasado, valida la dirección de correo electrónico
Si ha pasado, verifique la presencia de un nombre y mensaje (según sea necesario)
Si todo lo anterior pasa, ¡envíe un correo electrónico!
¡Así que vamos a atascarse en esto! Verificación humana Esto es bastante simple. Queremos probar para ver si la forma del formulario ha introducido correctamente algunas matemáticas, para asegurarse de que sean personas. Si mira hacia atrás en nuestro campo de formulario, ¿notará que la ecuación es? + 3 = 5. Obviamente, queremos probar primero si el valor no es 2, escupe un error. Si son 2, entonces continuamos. Bajo los grupos de variables, pegue lo siguiente. If (! $ Humano == 0) {
if ($ humano! = 2) my_contact_form_genrate_esponse (“error”, $ non_human); // no humano!
// validar correo electrónico
// Validar la presencia de nombre y mesaje
// Enviar correo electrónico
}
}
else if ($ _post [‘enviado’]) my_contact_form_genrate_esponse (“error”, $ talls_content); Aquí, verificamos primero si la verificación humana no es igual a 0. Si es así, verificamos si es incorrecto. Si es así, genere una respuesta adecuada. La última línea verifica si se ha enviado el campo oculto y si se ha enviado otro error. Prueba para dos casos: contenido vacío y verificación humana. Si intenta enviar el formulario mientras esto está vacío, debe recibir un buen mensaje de error.
¡Frío! Si ingresa algo más que “2” en verificación humana, también recibirá un error. La siguiente parte de la validación es la validación del correo electrónico. Ahora sabemos que hay personas, queremos asegurarnos de que proporcionen una dirección de respuesta legítima para poder contactar. Para hacer esto muy fácilmente, utilizamos una función PHP llamada filter_var () que tiene una serie de modelos de validación. Obviamente, utilizaremos el modelo Filter_Validate_Email para validar el correo electrónico. Reemplace las tres filas de comentarios en el medio de nuestra validación con lo siguiente. // validar correo electrónico
if (! Filter_var ($ correo electrónico, filter_validate_mail))
my_contact_form_generate_response (“Error”, $ Eage_inValid);
else // El correo electrónico es válido
{
// Validar la presencia de nombre y mesaje
// Enviar correo electrónico

} Aquí, filtramos la verificación de correo electrónico de $ variable si es una dirección de correo electrónico válida. Si no, arroja un error. De lo contrario, continúe!
¡Validación por correo electrónico en una sola línea! Verificar la presencia de un nombre y un mensaje es relativamente fácil. Solo usamos la función PHP vacía (), que devuelve verdadero o falso, dependiendo de si la variable que transmite está vacía. // Validar la presencia de nombre y Mesageif (vacía ($ name) || vacía ($ mensaje)) {
my_contact_form_generate_response (“Error”, $ talls_content);
}
Más // listo para usar!
{
// Enviar correo electrónico
} Finalmente, la última pieza de nuestro rompecabezas es enviar el correo electrónico. Una vez que toda nuestra validación ha pasado, utilizamos la función incorporada por correo () PHP para enviar un correo electrónico rápidamente. También debemos generar un éxito para el éxito, pero también para el fracaso. Reemplazar // Enviar correo electrónico con: $ SENT = WP_MAIL ($ TO, $ SUMPORT, Strip_tags ($ Mensaje), $ encabezados);

if ($ enviado) my_contact_form_genrate_esponse (“éxito”, $ mensaje_sent); // ¡Mensaje enviado!
Else My_Contact_Form_Generate_Response (“Error”, $ Message_unsent); // El mensaje no se envió o no, ¡ya terminaste! Ahora tiene un formulario de contacto completamente funcional. Si completa todo correctamente, debe recibir un mensaje exitoso feliz que dice que se ha enviado su correo electrónico.
¡Éxito!Y esto es. El desarrollo de su propia página de contacto no es difícil y mantiene las cosas lo antes posible, sin ninguna sobrecarga.Dependiendo de sus habilidades, puede, por supuesto, construir arriba.Es una excelente manera de aprender cosas nuevas y construir en función de su experiencia.¡No digamos exactamente lo que está sucediendo debajo del capó!Crédito adicional Si desea llevar esto más allá, intente obtener el formulario para insertar cada entrada como una publicación personalizada.Deberá usar Nonces y wp_insert_post ().¡Entonces puedes convertirlo en un motor de testimonio totalmente conducido!Descargue el código Sourcema del formulario de contacto
Etiquetas:
formado
Php

homefinance blog