\u00bfQu\u00e9 tipos de formularios de contacto hay para WordPress?<\/h2>\n
Como casi para cualquier elemento gr\u00e1fico o de dise\u00f1o web, tenemos la opci\u00f3n de quedarnos con el aspecto predefinido o b\u00e1sico, o dar un paso m\u00e1s all\u00e1 y personalizar los estilos de acuerdo a nuestra identidad corporativa<\/a>.<\/p>\n Click To Tweet<\/a><\/p>\n Nos referimos a grandes rasgos a cualquiera de los formularios modelo que traiga por defecto nuestro template o, incluso, aquellos con un dise\u00f1o est\u00e1ndar que nos ofrece la configuraci\u00f3n de partida del plugin WordPress utilizado para a\u00f1adirlos en nuestra web.<\/p>\n Para personalizar un formulario de contacto, es necesario contar con ciertos conocimientos de programaci\u00f3n en c\u00f3digo CSS para los estilos o HTML para la edici\u00f3n de los campos.<\/p>\n Aunque tambi\u00e9n hay temas que incluyen personalizaciones espec\u00edficas para los formularios incluidos con ciertos plugins, en este art\u00edculo vamos a referirnos al plugin Contact Form 7, pues es el que gana por su popularidad y, de hecho, utilizamos en nuestra p\u00e1gina web corporativa<\/a>.<\/p>\n A nivel de personalizaci\u00f3n de un formulario de contacto, con Contact Form 7 es posible:<\/p>\n Tras ver de pasada las opciones que tienes para crear y a\u00f1adir un formulario de contacto en tu sitio WordPress, como ya se ha mencionado anteriormente, vamos a entrar un poco m\u00e1s en detalle.<\/p>\n Click To Tweet<\/a><\/p>\n En particular, vamos a ver c\u00f3mo llevar esta acci\u00f3n a la pr\u00e1ctica en nuestra web gracias al plugin Contact Form 7.<\/p>\n Algunos de los motivos que hacen de Contact Form 7 un plugin WordPress tan popular son:<\/p>\n Para entender un poco mejor c\u00f3mo funciona este plugin con el que crear formularios de contacto est\u00e1ndar y personalizados, veamos las diferentes pesta\u00f1as de configuraci\u00f3n que lo componen:<\/p>\n Una vez que el plugin esta instalado, el primer paso ser\u00eda a\u00f1adir un nuevo formulario desde el bot\u00f3n a\u00f1adir nuevo. Lo primero que aparece es un ejemplo de un formulario muy simple con el nombre, el correo electr\u00f3nico, el asunto, el cuerpo del mensaje y un bot\u00f3n de enviar.<\/p>\n Este formulario ya estar\u00eda pr\u00e1cticamente listo para incorporar en cualquier p\u00e1gina o espacio donde lo necesites dentro de tu web, aunque para muchas cosas se necesitar\u00e1 algo m\u00e1s avanzado y ahi es donde entra una de las mejores caracter\u00edsticas del plugin CF7, la gran cantidad de opciones y diferentes campos que tiene.<\/p>\n Tambi\u00e9n indicar que con este plugin puedes crear un cantidad ilimitada de formularios, tantos como desees para cumplir con todas las necesidades de tus sitio web.<\/p>\n En esta pesta\u00f1a est\u00e1n opciones tanto de el correo que recibes como las del acuse de recibo que recibe tu visitante.<\/p>\n Si no est\u00e1s usando un correo smtp, el nombre del remitente es muy posible que aparezca en la cabecera como WordPress, ya que es la funci\u00f3n por defecto que el CMS tiene asignada para los correos electr\u00f3nicos.<\/p>\n – Cabeceras adicionales<\/strong>: Otra opci\u00f3n interesante aparece en el campo \u00abcabeceras adicionales\u00bb, donde puedes a\u00f1adir copias para diferentes correos, tanto normales como ocultas a\u00f1adiendo la cabecera \u00abCc:Email\u00bb para las normales y \u00abBcc:Email\u00bb para las ocultas. Se pueden crear tantas como quieras siempre que este una direcci\u00f3n por cada l\u00ednea.<\/p>\n – Cuerpo del mensaje<\/strong>:\u00a0En esta pesta\u00f1a se configura el mensaje que te llegar\u00e1, puedes usar texto o html si lo prefieres. Tambi\u00e9n puedes usar las siguientes etiquetas que has configurado anteriormente [your-name]\u00a0 [your-email]\u00a0 [your-subject]\u00a0 [your-message], son los campos que se han utilizado para recoger la informaci\u00f3n en el propio formulario de contacto.<\/p>\n – Opciones adicionales<\/strong>:<\/p>\n Esta pesta\u00f1a simplemente tiene unos mensajes predefinidos y que puedes modificar para ciertos eventos, como pueden ser mensaje enviado con \u00e9xito, mensaje no enviado, error de validaci\u00f3n y muchos otros casos comunes.<\/p>\n En esta \u00faltima secci\u00f3n, puedes a\u00f1adir manualmente ajustes adicionales con fragmento de c\u00f3digo, lo que lleva ajustes de configuraci\u00f3n m\u00e1s avanzados. Puedes leer m\u00e1s sobre esto aqu\u00ed<\/a>.<\/p>\n El plugin Contact Form 7 es ideal para crear formularios simples, aunque si quieres emplear todas sus funciones no existe una interfaz intuitiva que te ayude. La mayor\u00eda de las cosas se tendr\u00e1n que realizar manualmente y quiz\u00e1s con algo de programaci\u00f3n.<\/p>\n A veces, necesitamos establecer algunos par\u00e1metros que faciliten la entrada de datos o que aporten m\u00e1s seguridad o tambi\u00e9n facilidad para el usuario.<\/p>\n A continuaci\u00f3n puedes ver algunos ejemplos revisando las posibilidades de Contact Form 7 en cuanto a customizaci\u00f3n en campos y par\u00e1metros de configuraci\u00f3n:<\/p>\n La sintaxis para la creaci\u00f3n de campos ser\u00eda similar a este ejemplo para adjuntar un archivo al correo c\u00f3mo se vio m\u00e1s arriba:<\/p>\n [file* file-995 limit:20 filetypes:jpg|png id:archivo]<\/em><\/p>\n Para el restos de campos, la sintaxis ser\u00eda similar y se crea normalmente rellenando los campos que te piden, aunque tambi\u00e9n se puede crear manualmente.<\/p>\n Entre los diferentes par\u00e1metros que entran en juego en un formulario de contacto, aqu\u00ed tienes algunos ejemplos expresados en caracteres de los que podemos configurar con Contact Form 7:<\/p>\n Veamos ahora con detenimiento de qu\u00e9 manera podemos configurar estos 3 par\u00e1metros:<\/p>\n Con Contact Form 7 se pueden limitar tanto el tama\u00f1o de los campos como el n\u00famero de caracteres que se permiten escribir en el cuerpo del mensaje.<\/p>\n Simplemente, hay que indicarlo la siguiente forma:\u00a0[text* size:40 nombre-campo \u00a0maxlength:80 minlength:5]<\/em><\/p>\n Esto crear\u00eda un campo de texto con una anchura de 40 caracteres y con unos l\u00edmites de escritura de un m\u00e1ximo de 80 y un m\u00ednimo de 5.<\/p>\n Otra funci\u00f3n muy interesante es a\u00f1adir un contador de caracteres para los mensajes y, as\u00ed, que el usuario pueda ver cuanto texto le queda por escribir.<\/p>\n Seg\u00fan el esando el ejemplo anterior la sintaxis seria la siguiente:\u00a0[text* \u00a0nombre-campo size:40\u00a0 maxlength:80 minlength:5]\u00a0[count nombre-campo]<\/strong><\/em><\/p>\n No hay que olvidarse de a\u00f1adir el nombre del campo en este caso \u00abnombre-campo\u00bbpara que el contador funcione. Aunque muchas veces no se puede hacer directamente, los campos de los formularios admiten CSS, los ID y clases se indican al crear cada campo.<\/p>\n En este ejemplo que ya comentamos antes \u00ab[file* file-995 limit:20 filetypes:jpg|png id:archivo]<\/em>\u00ab, 2l \u00abid\u00bb del campo seria \u00abarchivo\u00bb.<\/p>\n Gracias a esto, y con un poco de conocimiento en CSS y HTML, se pueden crear infinidad de maquetaciones y aspectos diferentes.<\/p>\n Tambi\u00e9n se pueden crear m\u00faltiples columnas con ciertos par\u00e1metros para los campos de \u00e1rea de texto con la siguiente sintaxis:<\/p>\n Se emplear\u00eda alguna de las siguientes formas:<\/p>\nFormulario de contacto est\u00e1ndar<\/h3>\n
Formulario de contacto customizado o personalizado<\/h3>\n
\n
\n
\n
\u00bfC\u00f3mo crear formularios de contacto en WordPress?<\/h2>\n
Ventajas de crear formularios con Contact Form 7<\/h3>\n
\n
Caracter\u00edsticas b\u00e1sicas del plugin Contact Form 7<\/h3>\n
![\"Detalle](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2018\/04\/Como-crear-formularios-de-contacto-con-el-plugin-WP-Contact-Form-02-1024x443.jpg\")
<\/p>\nFormulario<\/h4>\n
Correo electr\u00f3nico<\/span><\/h4>\n
\n
\n
\n
\n
Mensajes<\/h4>\n
Ajustes adicionales
\n<\/span><\/h4>\nPersonalizaci\u00f3n del formulario de Contacto<\/h3>\n<\/div>\n
A\u00f1adir campos<\/h4>\n<\/div>\n
![\"Detalle](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2018\/04\/Como-crear-formularios-de-contacto-con-el-plugin-WP-Contact-Form-1024x443.jpg\")
<\/p>\n\n
\n<\/strong><\/li>\nA\u00f1adir par\u00e1metros de configuraci\u00f3n<\/h4>\n
\n
\n
![\"\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2018\/04\/Como-crear-formularios-de-contacto-con-el-plugin-WP-Contact-Form04-1024x443.jpg\")
<\/p>\n\n
\n<\/strong><\/span><\/li>\n<\/ul>\n\n
\n