[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-disenar-formularios-de-formulario-de-contacto-7-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-disenar-formularios-de-formulario-de-contacto-7-en-wordpress\/","headline":"C\u00f3mo dise\u00f1ar formularios de formulario de contacto 7 en WordPress","name":"C\u00f3mo dise\u00f1ar formularios de formulario de contacto 7 en WordPress","description":"Con m\u00e1s de 1 mill\u00f3n de usuarios activos, Contact Form 7 es uno de los complementos de formulario de contacto m\u00e1s populares para WordPress. Su ... Leer m\u00e1s<\/a>","datePublished":"2021-06-27","dateModified":"2021-06-27","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/1624799526_695_Como-disenar-formularios-de-formulario-de-contacto-7-en-WordPress.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/1624799526_695_Como-disenar-formularios-de-formulario-de-contacto-7-en-WordPress.png","height":324,"width":520},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-disenar-formularios-de-formulario-de-contacto-7-en-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":939,"articleBody":"Con m\u00e1s de 1 mill\u00f3n de usuarios activos, Contact Form 7 es uno de los complementos de formulario de contacto m\u00e1s populares para WordPress. Su mayor desventaja es que los formularios listos para usar que agrega son muy sencillos. Afortunadamente, el Formulario de contacto 7 se puede dise\u00f1ar f\u00e1cilmente usando CSS en su tema de WordPress. En este art\u00edculo, le mostraremos c\u00f3mo dise\u00f1ar formularios de formulario de contacto 7 en WordPress. Nota: Ya no recomendamos el complemento Contact Form 7. En cambio, recomendamos WPForms, que es el complemento de formulario de contacto m\u00e1s amigable para principiantes. Tambi\u00e9n puedes descargar WPForms Lite gratis. Tenemos una gu\u00eda paso a paso sobre c\u00f3mo crear un formulario de contacto en WordPress. Tutorial en videoSi no le gusta el video o necesita m\u00e1s instrucciones, contin\u00fae leyendo.EmpezandoSuponemos que ya ha instalado Formulario de contacto 7 plugin y ha creado su primer formulario de contacto. El siguiente paso es copiar el c\u00f3digo corto de su formulario de contacto y pegarlo en una publicaci\u00f3n de WordPress o en una p\u00e1gina donde le gustar\u00eda que aparezca su formulario. Por el bien de este art\u00edculo, hemos utilizado el formulario de contacto predeterminado y lo hemos agregado a una p\u00e1gina de WordPress. As\u00ed es como se ve\u00eda el formulario de contacto en nuestro sitio de prueba. Como puede ver, el formulario de contacto hereda algunos estilos de formulario de su tema de WordPress. Aparte de eso, es muy b\u00e1sico. Dise\u00f1aremos formularios de Contact Form 7 usando CSS. Todo el CSS entra en la hoja de estilo de su tema o tema hijo. Dise\u00f1ando Formularios de Contacto 7 en WordPressContact Form 7 genera un c\u00f3digo est\u00e1ndar y muy \u00fatil para los formularios. Cada elemento del formulario tiene un ID y una clase CSS adecuados asociados. Cada formulario de contacto usa la clase CSS .wpcf7 que puede utilizar para dise\u00f1ar su formulario.En este ejemplo, estamos usando una fuente de Google Lora en nuestros campos de entrada. Vea c\u00f3mo agregar fuentes de Google en WordPress. div.wpcf7 { background-color: #fbefde;border: 1px solid #f28f27;padding:20px;}.wpcf7 input[type=\"text\"],.wpcf7 input[type=\"email\"],.wpcf7 textarea {background:#725f4c;color:#FFF;font-family:lora, sans-serif; font-style:italic; }.wpcf7 input[type=\"submit\"],.wpcf7 input[type=\"button\"] { background-color:#725f4c;width:100%;text-align:center;text-transform:uppercase;}As\u00ed luc\u00eda nuestro formulario de contacto tras aplicar este CSS. Dise\u00f1o de formularios de contacto m\u00faltiple 7 formulariosEl problema con el CSS que usamos anteriormente es que se aplicar\u00e1 a todos los formularios del Formulario de contacto 7 en su sitio web. Si est\u00e1 utilizando varios formularios de contacto y desea aplicarles un estilo diferente, deber\u00e1 utilizar el ID generado por el formulario de contacto 7 para cada formulario. Simplemente abra una p\u00e1gina que contenga el formulario que desea modificar. Lleve el mouse al primer campo del formulario, haga clic con el bot\u00f3n derecho y seleccione Inspeccionar elemento. La pantalla del navegador se dividir\u00e1 y ver\u00e1 el c\u00f3digo fuente de la p\u00e1gina. En el c\u00f3digo fuente, debe ubicar la l\u00ednea de inicio del c\u00f3digo del formulario. Como puede ver en la captura de pantalla anterior, nuestro c\u00f3digo de formulario de contacto comienza con la l\u00ednea: <div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f201-p203-o1\" lang=\"en-US\" dir=\"ltr\">El atributo id es un identificador \u00fanico generado por Contact Form 7 para este formulario en particular. Es una combinaci\u00f3n de la identificaci\u00f3n del formulario y la identificaci\u00f3n de la publicaci\u00f3n donde se agrega este formulario. Usaremos esta ID en nuestro CSS para dise\u00f1ar nuestro formulario de contacto. Reemplazaremos .wpcf7 en nuestro primer fragmento de CSS con #wpcf7-f201-p203-o1.div#wpcf7-f201-p203-o1{ background-color: #fbefde;border: 1px solid #f28f27;padding:20px;}#wpcf7-f201-p203-o1 input[type=\"text\"],#wpcf7-f201-p203-o1 input[type=\"email\"],#wpcf7-f201-p203-o1 textarea {background:#725f4c;color:#FFF;font-family:lora, \"Open Sans\", sans-serif; font-style:italic; }#wpcf7-f201-p203-o1 input[type=\"submit\"],#wpcf7-f201-p203-o1 input[type=\"button\"] { background-color:#725f4c;width:100%;text-align:center;text-transform:uppercase;}Dise\u00f1ando Formularios de Contact Form 7 con CSS HeroMuchos principiantes de WordPress no tienen experiencia en escribir CSS y no quieren perder tiempo aprendi\u00e9ndolo. Afortunadamente, existe una soluci\u00f3n maravillosa para principiantes que le permitir\u00e1 no solo dise\u00f1ar su formulario de contacto, sino tambi\u00e9n casi todos los aspectos de su sitio de WordPress. Simplemente instale y active el complemento CSS Hero y vaya a la p\u00e1gina que contiene su formulario. Haga clic en la barra de herramientas de CSS Hero y luego haga clic en el elemento que desea dise\u00f1ar. CSS Hero le proporcionar\u00e1 una interfaz de usuario f\u00e1cil para editar el CSS sin tener que escribir ning\u00fan c\u00f3digo. Vea nuestra revisi\u00f3n completa de CSS Hero y c\u00f3mo usarlo para dise\u00f1ar cualquier cosa en su sitio de WordPress. Puedes usar el c\u00f3digo de cup\u00f3n de CSS Hero adrimadise\u00f1o para obtener un descuento exclusivo del 34%.Eso es todo lo que esperamos que este art\u00edculo le haya ayudado a aprender a dise\u00f1ar formularios de Contact Form 7 en WordPress. Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre c\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress.Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.4 \/ 5 ( 300 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo dise\u00f1ar formularios de formulario de contacto 7 en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-disenar-formularios-de-formulario-de-contacto-7-en-wordpress\/#breadcrumbitem"}]}]