¿Cómo crear un formulario de contacto en WordPress?

1. ¿Qué vamos a aprender en este curso corto?: Hola y bienvenidos a squishier. Esperoque te vaya bien. En este video, vamos a aprender cómo podemos crear un sencillo formulario de contacto en WordPress. Así que el formulario de contacto que vamos a crear se verá algo así. Sepuede ver. Teorías simples etiquetadas como su nombre, su asunto de correo electrónico. Y aquí utilizo un solo campo llamado desde donde escuchaste de nosotros. Ves disputado como comida y diferentes formas cómicas para mencionar para, ya sabes, obtener comentarios de los clientes, como de dónde escucharon, Acerca de Nosotros. Y luego el campo de mensaje simple con algunos opcionales ahora mismo aquí. Y luego un hermoso botón de enviar. Y puedes ver efectos simples yendo aquí. Entonces vamos a aprender cómo podemos crear este increíble formulario de contacto en WordPress. Entonces, vamos a sumergirnos en ello. 2. ¿Cómo desarrollar y personalizar un formulario de contacto?: Hola y bienvenidos al segundo video de este curso. Gracias por ver este curso de descarga de neón. Entonces en este video realmente vamos a comenzar cómo podemos construir el formulario de contacto en el sitio web de WordPress. Entonces esta es una nueva instalación de WordPress. Y estamos dispuestos a usar equipo extra para construir el formulario de contacto sobre esto, en este curso. Y ahora vas a instalar un plugin que usemos para crear el formulario de contrato. Entremos e instalemos el plugin llamado formulario de contacto siete. Ciertamente en su totalidad, muy sencillo. Te mostraré paso a paso cómo puedes configurar este formulario. Activando este plugin. Y encontrarás el plugin aquí. Contenido rebelde. Simplemente ingrese y encontrará un formulario de contacto predeterminado que ingresará y creará un nuevo formulario para nuestras necesidades. Entonces agregando nuevo formulario aquí, aquí encontrará un valor predeterminado, los campos de entrada predeterminados. Así que vamos a limpiar este formulario, sencillo formulario de contacto, y veamos cómo va a quedar. Este será el valor por defecto. Mira el plugin, personalizaré este formulario ya que acabo de señalarte en el video demo. Entonces ahora mismo vamos a ver cómo se ve esto. Por cierto, déjame decirte también cómo puedes instalar el plug-in está en la página en hombro. Mostrar mostrar el formulario en la pieza. Entonces iremos a las páginas, crearemos una nueva página. Por lo general ves la página de contacto como contactame, contáctanos. Así que entra y nombra las páginas, contratistas. Y aquí, si estás usando el plugin de Gutenberg, encontrarás un formulario de contacto extinción contacto de por aquí. Simplemente puedes entrar y seleccionar esto. Y si no estás usando Gutenberg o si no hay ningún otro plug-in, simplemente puedes copiar este código corto desde aquí y pegarlo en tu página. Y para trabajar. En nuestro caso, aquí está en Gotemburgo. Así que aquí puedes ver el campo del formulario de contacto. Selecciona el contrato simple aquí que vamos a levantarnos y publicando esta página. Solo ve cómo se ve este formulario como tu página. Y puedes ver esto es, esta es una configuración sencilla de esto, el plug-in, la vista por defecto de esta entidad plugin. Así que ahora vamos a personalizar este plugin. Cortando a la demo que acabamos de ver, acabamos de ver. Entonces dividimos esto, pasamos las tres primeras filas y tres columnas. Te sentirás tan etiquetado como de donde escuchaste de nosotros. Y luego también agregaremos algunas pequeñas cosas CSS para embellecer esta forma. Así que comencemos. En primer lugar, vamos a agregar un nuevo campo. Para eso. Puedes usar la etiqueta de la etiqueta y la entrega. Escuche de usted, oí hablar de nosotros. Y aquí vamos a usar el campo desplegable. Estos son los campos que puedes usar en textos simples de una firma al principio guisante y la URL y el número de teléfono, o un campo de fecha y puedes ver así sucesivamente. Aquí hay simples, diferentes periodos. Entonces aquí vamos a usar este campo de menú desplegable, que es un virtual ser en realidad el menú Select que verás en diferentes sitios web. Nombremos el campo como amigos. Aquí vamos a agregar algunas opciones como YouTube. Facebook. Aún seguro. También agregaremos una opción llamada other, porque habrá algunas plataformas, ya sabes, para no especificar fuente para que la gente pueda elegir el blanco. Entonces vamos a hacer que se requiera. Es, está en ti si has hecho que el campo sea requerido o no. Pero aquí está la opción de cumplir con la fluidez tranquila o no. No lo estoy haciendo requerido. Si lo desea, puede hacer clic en este icono de verificación. Y el miedo de que hayamos insertado una etiqueta aquí. Y ahora van a ver cómo se ve este campo. Guardando este otoño y refrescando la página aquí. Y ves este periodo carótida, ¿verdad? Entonces como estos campos son obligatorios, así que esto seguirá mostrando este mensaje de error hasta que llenemos esto. Ahora personalizaremos el CSS del mismo para embellecer esta forma. Para ello, tendremos que agregar algunas etiquetas aquí, algunas etiquetas HTML aquí para usar estas etiquetas de usuarios en el cuadro HTML y CSS. Así que comencemos. En primer lugar, vamos a agregar algunas etiquetas div para romper las reglas. En este video, voy a usar las nubes, ver f guión fila. Y voy a usar una clase C, F, la columna de edad para las columnas y cerrar esto. Y ya veremos si clase de Rich Paul, también voy a usar esta clase de tamaño. Ese será un término. Porque necesitamos dividir estos tres primeros periodos y tres columnas. Entonces voy a estar usando esta 1 tercera clase. Y antes de eso, solo voy a agregar algunos CM iniciales, que estas iniciales son muy importantes si quieres ver si tus estilos, tu CSS de conflictos. Porque cuando instalamos diferentes plugins, diferentes CSS se integran en el sitio web y a veces se construye. Entonces agregamos algunas iniciales para que sea diferente de los diferentes plugins. Tal vez puedas usar CF o tal vez puedas usar tu sitio web, FirstName o cualquier cosa por el estilo que lo haga diferente de las otras clases de competencias. Entonces por ahora, estoy usando el CF 1 tercero. 1 tercio es en realidad el CSS que voy a hacer para que sea 1 tercera columna y todo eso. Entonces voy a copiar esto tres veces. Para que pueda usar los tres muebles para el otoño. Voy a copiar este campo de nombre URL, y voy a editar aquí. Y luego copiando este campo de correo electrónico agregado aquí. Voy a copiar el campo de asunto y agregarlo. ¿Correcto? Entonces cerrando aquí la auditoría CFR. Entonces nuestra primera fila está terminada. Ahora estoy jalando otro día por otro CFL. Podemos usar el otro campo aquí, ¿verdad? Copiando este bloque aquí y pegándolo. También quería agregar CF llamado div aquí. Porque fila y columna es antes de la cirugía usando todos los sitios web. Entonces ahora esta vez vamos a estar usando CF uno porque esta será la fila completa. Dos espacios típicamente para ello. Y ahora esta fila es autocompletar abriendo otro CFO o el campo de mensaje, y otra columna cf. C, F, uno genial, porque esta también será la fila completa. Y cerrando este engranaje y destruye el autocompletado. Ahora abriendo otro CFO para un botón de envío. Lo siento, aquí cometí mi error. Veremos si se llama la columna cf aquí. Columna. Se puede ver Oakland porque esto también necesitará la fila completa, el material de la columna. Entonces nuestra estructura HTML básica está completa. Verás lo hermoso que se ve con el espaciado adecuado de Peano y todo eso. La razón por la que uso estas clases es en realidad un hábito para hacer CSS fácil porque estas clases podrán apuntar fácilmente a estas entradas de diferentes tamaños. Y podremos reutilizarla posteriormente en distintas formas. O tal vez si tenemos múltiples formularios, puedes usar las mismas clases para minimizar el CSS y después de todo, disminuye de Laura, el sitio web. Y así, si realizas estos sitios endometriales, también mejorará los tiempos de carga y todo eso. Entonces sí, vamos a guardar esta forma. Ahora. Aquí no habrá diferencia porque acabamos de agregar las etiquetas HTML. Ahora vamos a hacer el CSS aquí. Eso es magia real. Abriendo el inspector aquí. Y vamos a hacer algo de CSS. Entremos y aquí también usaré el estilo CSS común para, como mencioné, en realidad tengo la costumbre de reutilizar el flujo CSS. Por lo que también hago este pelo fila CF. Voy a hacerlo display flex. Y aquí voy a estar usando justificar el espacio de contenido entre. Y ahora voy a darle estilo a la convocatoria del CF. Vamos a apuntar a la curva CF1. Y aquí voy a usar el 3%. Y vamos a disminuirlo más. 2.5. Creo que es perfecto. Y aquí voy a estar usando el selector maravilloso CF para hacer las columnas completas COVID. Voy a estar usando un 100 por ciento. Y ves que todo está alineado brevemente. ¿ Correcto? Entonces ahora entraré y estilizaré nuestras etiquetas aquí. Vamos a usar el CF all gloss. Porque se usa en todos los elementos inspiradores de empatía. Etiqueta. Hagamos transformación de texto. Transformar texto es básicamente, cambia la transformación de los textos como catalizar minúsculas, mayúsculas, conocer todas estas cosas. Entonces voy a estar usando aquí mayúsculas, tamaño de fuente 12 px. Y voy a estar usando font-weight. El peso de la fuente es en realidad, cambia el peso de las fuentes. Se ve la función de la lana y luciendo muy hermosa. ¿ Correcto? Entonces ahora también estilizaré los campos de entrada. Aquí. Voy a estar usando esta entrada. Y después de usar las comas, también apuntaré seleccionados y exteriores. Pero aquí está la cosa, porque estamos usando entradas con la clase llamada CF. También apuntará a este insumo. Entonces Melbourne, no queremos cambiar esto acuerdo a estos campos de entrada porque esto es algo diferente y esto son cosas diferentes. Entonces excepción aquí y exocrina, también aprenderás 11 más la cabeza de Zeus, que no es un soporte. Y aquí voy a estar agregando el tipo de atributo submit what, entonces es una tibia, entonces elemento, es, ya sabes, cuando ignorar esto. Toda la entrada que tiene este atributo tipos de hombres. Entonces estamos como Esto hará caso omiso de este botón. Y también vamos a simplemente, solo hablaremos de estos campos de entrada excepto este número aquí mismo. Cambiemos el fondo a blanco, transparente en realidad. Y borde a px sólido. Justo aquí. Voy a estar usando una fundación. Si quieres más detalles, ya sabes, video de celebración CSS, voy a pausar esto en unos días. Pero mientras tanto, se puede ver el, ya sabe, el curso es de nuestros instructores. Se puede usar así. Ahora mismo podrás aprender más sobre CSS. Solo estoy tratando de explicarlo desde un prime para expandirlo en general. Entonces solo puedes tener una idea. Y si conoces algunas de las estaciones, también conocerás todos estos atributos. Estos son elementos básicos de CSS. No demasiado complejo. Transición de todas las imágenes renderizadas Oriente. Simplemente agregará una transición simple cuando cambiará algo o tal vez se enfocará. Te lo diré en un rato aquí. ¿ Correcto? Entonces estos son los campos de entrada básicos. Y si ves los resultados de la fuente escribiendo en negrita porque cambiamos la etiqueta aquí demasiado negrita. Entonces lo que haremos es cambiar el peso de la fuente aquí a cuatrocientas, cuatrocientas bacterias fuente regular. Ves que todas estas cosas están arregladas, ¿verdad? Entonces esto se configura aquí. Ahora vamos a estar apuntando para agregar un efecto simple aquí en el enfoque. Entonces agreguemos un elemento tubo más. Cómo se hará agregará una columna más aquí y agregará seleccione el área de texto. ¿Correcto? Así enfoque menú objetivo eléctrico. Entonces voy a hacer click en esta entrada. Va a apuntar, este campo está enfocado. Entonces podremos hacer el CSS aquí para hacerlo un poco diferente cuando alguien esté leyendo o escribiendo en un campo de entrada. Entonces aquí si estás usando Chrome, también tienes una opción para darle al campo enfocado para que puedas hacer el CSS correctamente. Voy a añadir un borde. En realidad va a cambiar el color del borde a azul. O tal vez haya un poco de cambio. Mira hermosa. Sí. Usando esto por ahora, generalmente la gente usa los colores del tema. Entonces coincide con el sitio web, ¿verdad? Entonces se hace aquí. Solo volvamos a enfocarnos. Y ahora te voy a mostrar cómo funciona. Ver que alguien está haciendo clic en esta entrada aquí, va a cambiar. Está cambiando el color del borde maravillosamente, ¿verdad? El efecto, el efecto que ves aquí y cambiar la fuente, cambiar el color del borde es en realidad lo que el elemento de transición está haciendo ahí. ¿ Correcto? Si vamos a tratar de desactivar esto, se ve realmente en este equipo que transición en realidad se aplica globalmente. Entonces voy a tratar de mostrarte, ofrecer la transición de nadarlo y verás cómo se ve esta serie. Es solo volver a mí y no quedar muy bien. Entonces la transición en realidad agregará efecto álgebra aquí. También puedes aumentar los milisegundos para hacerlo más lento. ¿Ves esto? Entonces así es como funciona. Y ahora también faltamos a prueba este botón de enviar muchos. Para ello vamos a utilizar de nuevo el CF llamado. Y luego otra vez tipos de ello. ¿ Correcto? Entonces aquí voy a estar cambiando el tamaño de fuente, 14 PX. Transformemos las mayúsculas que coincidiste con las etiquetas. Punto extra. El peso de la fuente será de 700. Y tal vez cambiemos el tamaño de la fuente a 14. Agrega un poco de espacio entre letras aquí. A lo mejor un pixel, aumenta el botón. Deshacerse de la persona con selector de min-width o un atributo min-width. Cambiémoslo a 200. O tal vez un poco menos de 270. Se ve bien. ¿ Correcto? Y hacer diferente transición. Ya ves cómo se ve. Así es como el vientre, la frontera de contacto. Y ahora entraremos en apariencia interrogar a los ratones. Y un CRC está aquí. CSS adicional y publicarlo y encontrarlo para refrescar la página. Y ves que nuestro formulario está cumplimentado. Así es como construimos unos formularios de contacto. Y espero que hayan disfrutado el video. Por favor, hazme cualquier duda que tengas en la sección de comentarios a continuación, y estaré encantado de responderlas. Gracias. Cuídate. Y además no olvides ver el video completo de este curso en el que te explicaré cómo puedes publicar tus tareas y reproducir todas estas cosas en ti mismo. Gracias. Cuídate. Adiós. 3. ¿Cómo podemos cambiar la configuración del correo electrónico y configurar otras cosas?: Oye, en este video, vamos a aprender cómo puedes establecer la configuración del formulario de contacto, dónde y cómo obtienes los formularios de contacto. Las fases del cliente. El cliente envía las bombas estaban en qué correo electrónico obtendrá las respuestas, y cómo puede establecer nuevas plantillas y todo eso. Así que comencemos. Entonces, antes que nada, este era un teléfono, el Belt and Road último video. Y ahora vamos al tablero. Y nuevamente, esta opción de contacto aquí. Y nuestra forma era simple contexto hogar. Esto era daga. Configuramos los ajustes de la granja y todo eso. Y ahora ves estas tres pestañas diferentes aquí, mensajes de correo y configuraciones adicionales. Entonces macho es una pestaña donde vamos a poner correos electrónicos y todo eso. Entonces hay diferentes campos a es un campo, se le enviará el correo electrónico, habrá uno a las respuestas, ¿verdad? Entonces por ejemplo, si quiero la respuesta para probarlo, use este correo electrónico y enviará todas las respuestas a esta dirección de correo electrónico. Y si quieres agregar la dinámica de correo electrónico etiquetamos. Enviará todas las respuestas al correo electrónico de administración del sitio, que en realidad se almacena en un segundo aquí. Ajustes Generales. Y ve esta dirección de correo electrónico de administración. Este será el correo electrónico que llamamos aquí. Y de es en realidad un estándar de correo electrónico y eso se usa para enviar los correos electrónicos. Tal vez puedas quedarte con esto tal cual. O si a lo mejor tendrás que cambiar este dominio a veces. Por lo tanto, este dominio debería coincidir con su dominio actual, la dirección de dominio actual. Por ejemplo, estaré usando este notch.com para emparejarlo con mi dominio actual y el título del sitio, puedes dejarlo como está, en realidad llamará al título del sitio. Por lo general, lo verás aquí. Entonces para nosotros, llamará aquí a esta clase de Skillshare. Y luego la dirección de correo electrónico de WordPress aquí mismo en el asunto. Se puede cambiar. Tal vez puedas escribir algún tema personalizado aquí. O de nuevo, puedes usar este texto dinámico, citar otra trama, el título del sitio, y tu tema sacará el contenido de este campo, de este pueblo, de cualquier tema aquí. O tal vez puedas usar un tema estático aquí. Alguien se cae. O tal vez puedas usar esto aquí. Estas son en realidad la x que creamos, los campos para tu nombre, correo electrónico, asunto, referencia y mensaje. Entonces tal vez lo que suele hacer la gente es usar tu nombre aquí. Enviarte un mensaje desde el lado izquierdo. O puedes usar cualquier tema que quieras. En realidad está totalmente sobre ti. Y luego habrá algunos encabezados adicionales. Simplemente, puedes quedártelo tal cual. Y aquí, este es el cuerpo del mensaje que será el principal contenido de correo electrónico que reciba la gente. Así que asegúrate de que si agregas nuevos campos, te quedas, agregas un nuevo filtro también. Así que prométeme en realidad ya ahí. El sujeto ya está ahí en la referencia. Y luego copiaremos esto de aquí y lo pegaremos aquí. Y luego el cuerpo del mensaje. Y a lo mejor puedes quitar estas cosas o si quieres, puedes quedarte. Y tal vez puedas agregar más contenido aquí como quieras. Entonces esta es una configuración de correo electrónico simple que haces para obtener las respuestas inmunitarias. Y aquí, hay otra pestaña de mensajes principales que puedes usar para cambiar la respuesta. Por ejemplo, esto comprueba los zapatos cuando el mensaje del remitente se envió correctamente. Se pueden cambiar estos mensajes fácilmente desde aquí hay diferentes condiciones y diferentes mensajes se utilizan aquí. Y luego para configuraciones adicionales, si queremos agregar algo de JavaScript o alguna configuración avanzada y compleja, usamos esto. Entonces tal vez deje esto como está por ahora. Y estas fueron las configuraciones simples de conducta com que usamos que usamos para cambiar el contrato desde diferentes configuraciones y cambiar las direcciones de correo electrónico entre los mensajes y configurar el formulario con disputas. Así que avísame si tienes alguna duda. Espero haber podido explicar las cosas en detalle. Y si, es tu turno ahora tal vez instalar WordPress en tu servidor local o tal vez intentaste reproducir esto en tus sitios web. Instala de nuevo este increíble Formulario de Contacto 72 e intenta construir estos huesos. Y si quieres publicar tus proyectos en Skillshare para que la gente pueda ver y comentar. Puedes usar una deuda simple debajo de la pestaña Proyecto y Recursos debajo del siguiente video. Y trata de publicar tus proyectos, tus asignaciones. Y me alegrará ver, y diferentes pueblos también verán sus proyectos y los comentarán. Así que será increíble practicar, practica este curso. Y espero que haya sido un curso increíble para ti. Entonces, gracias por vigilar esto. Y tal vez deja tus comentarios y dime como fue este curso para ti. Si esto cumplió tus expectativas son superadas tus expectativas. También intenté escribir algunos comentarios para mí y estaré creando más cursos en el futuro. Así que sígueme y para obtener las últimas actualizaciones en Skillshare. Gracias. Cuídate. Adiós.