{"id":1811,"date":"2015-06-10T00:06:50","date_gmt":"2015-06-09T22:06:50","guid":{"rendered":"http:\/\/dejujo.com\/?p=1811"},"modified":"2026-04-21T00:27:32","modified_gmt":"2026-04-20T22:27:32","slug":"contact-form-7-totalmente-personalizable","status":"publish","type":"post","link":"https:\/\/dejujo.com\/staging\/2015\/06\/10\/contact-form-7-totalmente-personalizable\/","title":{"rendered":"Contact Form  7 &#8211; Totalmente personalizable"},"content":{"rendered":"<h1>Contact Form \u00a07 &#8211; Totalmente personalizable<\/h1>\n<p>Hoy quiero ense\u00f1aros personalizar totalmente nuestros formularios creados en <strong><em>Contact Form 7<\/em><\/strong>, muchas veces creamos los <strong><em>formularios<\/em><\/strong> y quedan muy sosos y para que no se vea de una forma que no llega mucho a los ojos, vamos a meter c\u00f3digo <strong><em>HTML<\/em><\/strong>, para darle un toque diferente a nuestros formularios.<\/p>\n<p style=\"text-align: center;\"><!--more--><\/p>\n<h2>Descargar &#8211; Instalar &#8211; Contact Form 7<\/h2>\n<p>Lo primero que tenemos que hacer, es instalar nuestro Plugin WordPress, me imagino que ya lo sab\u00e9is como hacerlo, as\u00ed que \u00e9sta parte la vamos a obviar.<\/p>\n<p>Aqu\u00ed os dejo un V\u00eddeo Tutorial que he realizado para \u00e9ste post.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe title=\"Contact Form  7 - Totalmente personalizable\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/GeMrqV5JPXw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Una vez instalado vamos a Contacto de nuestro Men\u00fa WordPress<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/4MEdT2R4vv1u397wdJQQ9fObMWrPQLLQwIiuQndl6Zw=w154-h192-no\" alt=\"Contact Form\" width=\"154\" height=\"192\" \/><\/p>\n<p>Una vez dentro de Contact Form 7 vemos que hay uno creado, asi que vamos a editar ese mismo.<\/p>\n<p>&nbsp;<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/kFsnhjz72uP_fjnMp7W3CdwiCmRffTQQOPIUDAFxqik=w914-h127-no\" alt=\"\" width=\"914\" height=\"127\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Como vemos, ha generado un Shortcode para insertar en una p\u00e1gina.<\/p>\n<p><img decoding=\"async\" class=\"alignnone aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/HT6MYVTiceVOjn8AUFA5azHx1ZLW3GIRNaTt8jj12iE=w862-h108-no\" alt=\"\" width=\"862\" height=\"108\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Vamos a P\u00e1gina y creamos una nueva, le damos el nombre que queramos y pegamos el Shortcode, guardamos y vamos a ver que dise\u00f1o tiene.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/nZkp5rUwd0aCTzAudU3_ZXiDsfEQ9UZ364vnv9mlrJ8=w683-h559-no\" alt=\"Contact Form\" width=\"683\" height=\"559\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ese es el aspecto que tiene nuestro formulario, ahora vamos a cambiarlo un poco, le vamos a dar color a las letras, vamos a cambiar de tama\u00f1o y vamos a cambiar la fuente de las letras.<\/p>\n<p>Para quien no conozca c\u00f3digo HTML \u00a0y para quienes si lo conozcan, vamos a introducirlo dentro de nuestro Contact Form 7, volvemos a la edici\u00f3n de nuestro formulario.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/cye9isTOhL4hTDHNB0oX-oMTuHzc8H-jiKfJqxWCDLM=w912-h480-no\" alt=\"Contact Form\" width=\"912\" height=\"480\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Meter c\u00f3digo HTM<\/h3>\n<ul>\n<li>Para poder cambiar el tama\u00f1o de la fuente vamos a utilizar \u00a0<span style=\"background-color: #d6d2ce;\">&lt;font size=2&gt;&lt;\/font&gt;<\/span><\/li>\n<li>Le daremos un color, usaremos colores\u00a0hexadecimales <span style=\"background-color: #d6d2ce;\">&lt;font color=#DA3A3A&gt;&lt;\/font&gt;<\/span><\/li>\n<li>Tambi\u00e9n cambiaremos la fuente\u00a0<span style=\"background-color: #d6d2ce;\">&lt;font\u00a0face=\u00bbComic Sans MS,arial,verdana\u00bb&gt;&lt;\/font&gt;<\/span><\/li>\n<\/ul>\n<p>Esos tres c\u00f3digos utilizaremos, para que pod\u00e1is elegir el mejor color os dejo una p\u00e1gina donde podemos elegir nuestro color hexadecimal \u00ab<a target=\"_blank\" href=\"http:\/\/html-color-codes.info\/codigos-de-colores-hexadecimales\/\" rel=\"noopener\">Elige tu color<\/a>\u00ab<\/p>\n<p>Antes de utilizar nuestro c\u00f3digo HTML voy a escribir como quedar\u00eda el c\u00f3digo terminado<\/p>\n<p style=\"text-align: center;\"><span style=\"background-color: #d6d2ce;\">&lt;font size=2 color=#DA3A3A face=\u00bbComic Sans MS,arial,verdana\u00bb&gt;Texto&lt;\/font&gt;<\/span><\/p>\n<p style=\"text-align: left;\">Ahora vamos a ir a configurar nuestro formulario de Contact Form 7, y vamos a pegar el c\u00f3digo de \u00e9sta manera.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/NPJt09P5I9QkQi1WkO25gtChqvaouQ3y2IxAbt-JbcU=w874-h136-no\" alt=\"Contact Form\" width=\"874\" height=\"136\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">Guardamos y vamos a ver como ha quedado nuestro formulario, actualizamos&#8230;<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/lh3.googleusercontent.com\/pUp2sx5uCaCmfx-zzOlW3A4eh02Gk7DEKZ0z0k397fA=w676-h537-no\" alt=\"Contact Form\" width=\"676\" height=\"537\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">Y vemos como es m\u00e1s peque\u00f1a, tiene un color rojo y ha cambiado la fuente, el tama\u00f1o de la letra lo vamos bien nosotros mismo, podemos poner cualquier valor del 1 al 6, y lo mismo con el color y la fuente.<\/p>\n<p style=\"text-align: left;\">Como veis es muy sencillo dar un poco de forma nuestros formularios,<\/p>\n<p style=\"text-align: left;\">Si quieres leer m\u00e1s post interesantes debajo tienes enlaces que te llevar\u00e1n a ellos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contact Form \u00a07 &#8211; Totalmente personalizable Hoy quiero ense\u00f1aros personalizar totalmente nuestros formularios creados en Contact Form 7, muchas veces creamos los formularios y quedan muy sosos y para que no se vea de una forma que no llega mucho a los ojos, vamos a meter c\u00f3digo HTML, para darle un toque diferente a nuestros [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":25744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[4,196,197,198,35,50,6,8],"class_list":["post-1811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-community-manager","tag-contact-form","tag-formularios","tag-formularios-wordpress","tag-plugin-wordpress","tag-plugins-wordpress","tag-redes-sociales-2","tag-social-media"],"_links":{"self":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/1811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/comments?post=1811"}],"version-history":[{"count":1,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/1811\/revisions"}],"predecessor-version":[{"id":30504,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/posts\/1811\/revisions\/30504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/media\/25744"}],"wp:attachment":[{"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/media?parent=1811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/categories?post=1811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dejujo.com\/staging\/wp-json\/wp\/v2\/tags?post=1811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}