{"id":1769,"date":"2016-07-31T11:36:29","date_gmt":"2016-07-31T01:36:29","guid":{"rendered":"http:\/\/mbrsolution.com\/es\/?p=1769"},"modified":"2023-10-18T13:33:14","modified_gmt":"2023-10-18T03:33:14","slug":"crear-formulario-contacto-dos-columnas","status":"publish","type":"post","link":"https:\/\/mbrsolution.com\/es\/wordpress\/crear-formulario-contacto-dos-columnas\/","title":{"rendered":"Crear Formulario De Contacto De Dos Columnas"},"content":{"rendered":"<p><span class=\"notranslate\">Crear Formulario De Contacto De Dos Columnas le mostrar\u00e1 c\u00f3mo agregar dos columnas a su formulario de contacto.<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"text-decoration: underline;\"><strong>Actualizado: 7 de Mayo, 2017<\/strong><\/span><\/p>\n<p><span class=\"notranslate\">En este tutorial se muestra un m\u00e9todo para configurar un formulario de contacto en dos columnas en su sitio web o blog a trav\u00e9s de Fast Secure Contact Form Plugin.<\/span> <span class=\"notranslate\">Hay otros m\u00e9todos para lograr es, sin embargo pens\u00e9 en compartir mi m\u00e9todo.<\/span><\/p>\n<p><span class=\"notranslate\">Por favor aseg\u00farese de comprobar el formulario antes de publicarlo.\u00a0<\/span><span class=\"notranslate\">Tambi\u00e9n pruebe utilizando pantallas con diferente resoluci\u00f3n y tambi\u00e9n comprobar el formulario en dispositivos m\u00f3viles como el tel\u00e9fono o tableta port\u00e1til.<\/span><\/p>\n<p><span class=\"notranslate\"><strong><em>Importante: Este dise\u00f1o no est\u00e1 preparado totalmente para m\u00f3viles o tabletas.\u00a0<\/em><\/strong><\/span><span class=\"notranslate\"><strong><em>Por favor, visite la siguiente direcci\u00f3n URL <a title=\"sistema de red sensibles\" href=\"http:\/\/www.responsivegridsystem.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">sistema de red m\u00f3vil de dise\u00f1o<\/a>\u00a0tutorial que le guiar\u00e1 y ayudar\u00e1 a convertir este dise\u00f1o de dos columnas para que se pueda ver en tel\u00e9fonos m\u00f3viles. <span style=\"color: #ff0000;\">(Esta materia esta escrita en Ingles).<\/span><\/em><\/strong><\/span><\/p>\n<p>He utilizado <em><strong>position: relative<\/strong><\/em> lugar de la <em><strong>position: absolute<\/strong><\/em>. La raz\u00f3n se debe a que en el panel formulario de administraci\u00f3n de contactos, cuando vi el formulario todo estaba desordenado. Utilizando el m\u00e9todo de <em><strong>relative<\/strong><\/em> me permiti\u00f3 verlo mejor en el \u00e1rea de administraci\u00f3n. Por supuesto, lo m\u00e1s importante es asegurarse que el formulario se vea correctamente desde la parte delantera de su sitio web.<\/p>\n<p><em><strong><span style=\"color: #ff0000;\">Nota:<\/span> Para poner en pr\u00e1ctica este m\u00e9todo su mejor opci\u00f3n es ocultar las etiquetas. Cada campo tiene que se agrega una opci\u00f3n para ocultar la etiqueta y a\u00f1adir el nombre de campo a <span style=\"color: #000080;\">Por Defecto:<\/span>. Esto mostrar\u00e1 el nombre en el cuadro de texto, incluso si oculta la etiqueta.<\/strong><\/em><\/p>\n<h2 style=\"text-align: center;\"><span class=\"notranslate\"><strong>Crear Formulario De Contacto De Dos Columnas<\/strong><\/span><\/h2>\n<p><span class=\"notranslate\"><strong>Paso 1 )<\/strong> Ir a <em><strong>Plugins -&gt; FS Contact Form -&gt; Estilos<\/strong><\/em> para editar los siguientes campos. Ver la siguiente imagen.<br \/>\n<\/span><\/p>\n<ul>\n<li><span class=\"notranslate\">Formulario DIV = a\u00f1ad\u00ed la altura: 390px <span style=\"color: #ff0000;\"><em><strong>(Esto es opcional)<\/strong><\/em><\/span><\/span><\/li>\n<li><span class=\"notranslate\">CAPTCHA Grande DIV <em><strong>(Puede que est\u00e9 utilizando la pantalla peque\u00f1a CAPTCHA de Div)<\/strong><\/em><\/span><\/li>\n<li><span class=\"notranslate\">Enviar DIV<\/span><\/li>\n<li><span class=\"notranslate\">Haga clic en <strong>Guardar Cambios<\/strong> una vez que haya finalizado editar el formulario.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1770 size-full\" title=\"cambiar-formulario-de-contacto-en-dos-columnas-css\" src=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-css.jpg\" alt=\"cambiar-formulario-de-contacto-en-dos-columnas-css\" width=\"531\" height=\"557\" srcset=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-css.jpg 531w, https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-css-286x300.jpg 286w, https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-css-24x24.jpg 24w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/p>\n<p><span class=\"notranslate\"><strong>Paso 2)<\/strong> La siguiente imagen muestra el siguiente campo para editar <em><strong>E<\/strong><\/em><em><strong>ntrada de campo de texto CAPTCHA.<\/strong><\/em><\/span><\/p>\n<p><span class=\"notranslate\">Aqu\u00ed podr\u00e1s agregar lo siguiente<\/span><\/p>\n<ul>\n<li><span class=\"notranslate\">position: relative;<\/span> left<span class=\"notranslate\">: 158px;<\/span> top<span class=\"notranslate\">: -75px; <em><strong>(Recuerde que en su sitio web estos ajustes ser\u00e1n diferentes)<\/strong><\/em><\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1773 size-full\" title=\"cambiar-formulario-de-contacto-en-dos-columnas-texto-captcha\" src=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-texto-captcha.jpg\" alt=\"cambiar-formulario-de-contacto-en-dos-columnas-texto-captcha\" width=\"626\" height=\"148\" srcset=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-texto-captcha.jpg 626w, https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-texto-captcha-300x71.jpg 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/p>\n<p><span class=\"notranslate\"><strong>Paso 3 )<\/strong> Ir a <em><strong>Plugins -&gt; FS Contact Form -&gt; Campos<\/strong><\/em> para editar los siguientes campos del formulario de contacto <em><strong>Nombre, Email, Tema<\/strong><\/em> y <em><strong>Mensaje.<\/strong><\/em><\/span> Necesitas agregar ajustes CSS en el siguiente campo <em><strong>Enrada CSS:<\/strong><\/em>. <span class=\"notranslate\">Ver la siguiente imagen.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1771 size-full\" title=\"cambiar-formulario-de-contacto-en-dos-columnas-entrada-css\" src=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-entrada-css.jpg\" alt=\"cambiar-formulario-de-contacto-en-dos-columnas-entrada-css\" width=\"438\" height=\"199\" srcset=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-entrada-css.jpg 438w, https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-entrada-css-300x136.jpg 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><\/p>\n<p><span class=\"notranslate\">Para el campo <strong>Nombre<\/strong> es necesario agregar el siguiente c\u00f3digo <strong>CSS de entrada.<\/strong><\/span><\/p>\n<ul>\n<li><strong>position: relative; top: -0px; left: 0px;<\/strong><\/li>\n<\/ul>\n<p><span class=\"notranslate\">Para el campo <strong>Email<\/strong> tienes que agregar el siguiente c\u00f3digo <strong>CSS de entrada.<\/strong><\/span><\/p>\n<ul>\n<li><strong>position: relative; top: -40px; left: 158px;<\/strong><\/li>\n<\/ul>\n<p><span class=\"notranslate\">Para el campo <strong>Tema<\/strong> es necesario agregar el siguiente c\u00f3digo <strong>CSS de entrada.<\/strong><\/span><\/p>\n<ul>\n<li><strong>position: relative; top: -40px; left: 0px;<\/strong><\/li>\n<\/ul>\n<p><span class=\"notranslate\">Para el campo <strong>Mensaje<\/strong> es necesario agregar el siguiente c\u00f3digo <strong>CSS de entrada.<\/strong><\/span><\/p>\n<ul>\n<li><strong>height: 120px; margin: 0; max-width: 250px; text-align: left; width: 99%; position: relative;\u00a0 left: 158px; top: -78px;<\/strong><\/li>\n<\/ul>\n<h3 style=\"text-align: center;\">C\u00f3digo CSS Personalizado<\/h3>\n<p><span class=\"notranslate\"><strong>Paso 4 )<\/strong> El siguiente c\u00f3digo CSS debe ser incluido como un c\u00f3digo personalizado.<\/span> <span class=\"notranslate\">Este c\u00f3digo controla la etiqueta de C<strong>\u00f3digo CAPTCHA.<\/strong><\/span> <span class=\"notranslate\">Estoy trabajando con el tema Suffusion para este tutorial, que tiene un \u00e1rea en la configuraci\u00f3n del tema que permite a\u00f1adir c\u00f3digo personalizado.<\/span> <span class=\"notranslate\">En su caso, tendr\u00e1 que usar un plugin o editar el archivo CSS si esta trabajando con el tema ni\u00f1o <span style=\"color: #ff0000;\"><em><strong>\u00abChild Theme\u00bb<\/strong><\/em><\/span>.<\/span><\/p>\n<p><strong><em><span class=\"notranslate\">Por favor tome Nota: El campo id es <span style=\"color: #ff0000;\">fsct_captcha_field2<\/span> se a\u00f1ade autom\u00e1ticamente por el plugin.<\/span> El <span class=\"notranslate\">siguiente campo <span style=\"color: #ff0000;\">field2<\/span> se refiere a el ID del formulario de contacto, en este caso se trata del formulario de contacto <span style=\"color: #ff0000;\">form 2<\/span>.<\/span><\/em><\/strong><\/p>\n<p style=\"text-align: center;\"><span style=\"color: #000080;\"><strong><em><span class=\"notranslate\">(Recuerde su formulario de contacto tendr\u00e1 un n\u00famero de identificaci\u00f3n id diferente)<\/span><\/em><\/strong><\/span><\/p>\n<p>El siguiente c\u00f3digo CSS podr\u00eda no funcionar por varias razones. Una de las razones podr\u00eda ser debido a que este tutorial est\u00e1 usando la siguiente funci\u00f3n.<\/p>\n<p><span style=\"color: #000080;\"><em><strong>Seleccione el m\u00e9todo de entregar el estilo formulario: hoja de estilo CSS interno (por defecto, editar m\u00e1s adelante)<\/strong><\/em><\/span><\/p>\n<p>Si no funciona siguiendo los pasos de arriba, entonces es necesario agregar el siguiente c\u00f3digo CSS al campo <em><strong>Alineaci\u00f3n etiquetas de entrada DIV:<\/strong><\/em> localizado en la pesta\u00f1a <em><strong>Estilos<\/strong><\/em>. Puedes ver este campo en la imagen de arriba con una flecha <span style=\"color: #ff0000;\"><em><strong>extra c\u00f3digo CSS<\/strong><\/em><\/span> en el <em><strong>Paso 1 ).<\/strong><\/em><\/p>\n<p><span class=\"notranslate\"><strong>El c\u00f3digo personalizado para incluir:<\/strong><\/span><\/p>\n<p><span class=\"notranslate\">#fscf_captcha_field2{<br \/>\npadding-top: 5px;<br \/>\ntext-align: left;<br \/>\nposition: relative;<br \/>\nleft: 158px;<br \/>\ntop: -75px;<br \/>\n}<\/span><span class=\"notranslate\"><br \/>\n<\/span><\/p>\n<h3 style=\"text-align: center;\">Formulario Final<\/h3>\n<p><span class=\"notranslate\"><strong>Paso 5 )<\/strong> La siguiente imagen <strong>Formulario De Prueba <\/strong>muestra las dos columnas a\u00f1adidas utilizado el c\u00f3digo de arriba.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1772 size-full\" title=\"cambiar-formulario-de-contacto-en-dos-columnas-formulario-final\" src=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-formulario-final.jpg\" alt=\"cambiar-formulario-de-contacto-en-dos-columnas-formulario-final\" width=\"470\" height=\"541\" srcset=\"https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-formulario-final.jpg 470w, https:\/\/mbrsolution.com\/es\/wp-content\/uploads\/2016\/07\/cambiar-formulario-de-contacto-en-dos-columnas-formulario-final-261x300.jpg 261w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/p>\n<p><span class=\"notranslate\">Espero que esto le ayuda a lograr un formulario de contacto dise\u00f1ado con dos columnas en su sitio web o blog.<\/span><\/p>\n<p><span class=\"notranslate\"><em><strong><span style=\"color: #ff0000;\">Nota:<\/span> Este m\u00e9todo representa una manera de lograr dos columnas en el dise\u00f1o. Se pueden aplicar otros m\u00e9todos para lograr dos columnas si tienes conocimientos en HTML y CSS.<\/strong><\/em><\/span> <span class=\"notranslate\"><em><strong>Estas instrucciones son simples y f\u00e1ciles de seguir.<\/strong><\/em><\/span><\/p>\n<p><span class=\"notranslate\">Con este m\u00e9todo se puede lograr otros dise\u00f1os diferentes, es decir, tres columnas, cuatro columnas, alinear los campos de manera diferente y mucho m\u00e1s.<\/span><\/p>\n<p><span class=\"notranslate\">Pincha en el siguiente enlace\u00a0<a href=\"https:\/\/mbrsolution.com\/es\/wordpress\/ajuste-casilla-verificacion-campo-seleccionado-por-defecto-fscf\/\">Ajuste De Casilla De Verificaci\u00f3n Campo Seleccionado Por Defecto FSCF<\/a> para continuar con el siguiente tutorial.<\/span><\/p>\n<p><span class=\"notranslate\">Estar\u00e9 actualizando este tutorial de vez en cuando para seguir yendo a ver la \u00faltima.<\/span><\/p>\n<p>Si tiene alguna pregunta, o sugerencia no dude en preguntar.<\/p>\n<p>Disfrutar.<\/p>\n<p><strong>M\u00e1s Cursos de Fast Secure Contact Form:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/mbrsolution.com\/es\/wordpress-plugin-formulario-de-contacto-fscf\/\">WordPress Plugin Formulario De Contacto FSCF<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Crear Formulario De Contacto De Dos Columnas le mostrar\u00e1 c\u00f3mo agregar dos columnas a su formulario de contacto. Actualizado: 7 de Mayo, 2017 En este tutorial se muestra un m\u00e9todo para configurar un formulario de contacto en dos columnas en su sitio web o blog a trav\u00e9s de Fast Secure Contact Form Plugin. Hay otros <a href='https:\/\/mbrsolution.com\/es\/wordpress\/crear-formulario-contacto-dos-columnas\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[132,148,131,147],"class_list":["post-1769","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-campos","tag-dos-columnas","tag-formulario","tag-formulario-de-contacto","category-15-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/posts\/1769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/comments?post=1769"}],"version-history":[{"count":0,"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/posts\/1769\/revisions"}],"wp:attachment":[{"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/media?parent=1769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/categories?post=1769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mbrsolution.com\/es\/wp-json\/wp\/v2\/tags?post=1769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}