🔥Poner Formulario de Contacto en Blogger - Página de Contacto

Si quieres tener un blog profesional debes contar con una página o formulario de contacto. En este artículo te mostraré cómo hacerlo 100% personalizado y, lo mejor, sin ser experto en programación: podrás copiar todos los códigos con un clic.

¿Qué es un Formulario de Contacto?

Es una herramienta que permite el contacto directo entre los lectores y el dueño de la web. Se usa generalmente con fines de ventas para conseguir el correo y los nombres de posibles clientes.

Añadir gadget “Formulario de contacto” en Blogger

La forma más fácil es añadir el gadget predeterminado:

1. Paso 1: En el panel de Blogger, entra a Diseño.
2. Paso 2: En la barra lateral, haz clic en Añadir un gadget.
3. Paso 3: Selecciona Formulario de contacto.
4. Paso 4: Guarda los cambios.

Crear página con formulario de contacto en Blogger

En algunos casos conviene crear una Página de Contacto donde añadas tus redes sociales, un breve mensaje y el formulario.

Paso a paso

1. Paso 1: Añade el gadget del formulario.
2. Paso 2: Oculta el formulario del layout (para usarlo dentro de la página).
3. Paso 3: Crea la página de contacto.
4. Paso 4: Copia y pega el siguiente código en la página:

HTML<form name="contact-form"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="NOMBRE" /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="CORREO" /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="MENSAJE"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /> <div style="text-align:center; width:100%;"> <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p> <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p> </div> </form>

Video Tutorial: Crear Página de contacto en Blogger

Personalizar el formulario (estilos)

En Tema > Editar HTML, busca ]]></b:skin> y, justo arriba, pega este CSS:

CSS.contacto-nombre, .contacto-correo { float:left; width:48.25% } .contacto-nombre { margin-right:3.5% } .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email:hover, .contact-form-email:focus, .contact-form-email-message:hover, .contact-form-email-message:focus { width:100%; max-width:100%; margin:0 0 20px; padding:10px 15px; font-size:12px; letter-spacing:1px; color:#444; background:#F3F3F3; border:none; box-shadow:none; } .contact-form-name, .contact-form-email { height:37px } .contact-form-email-message { height:170px } .contact-form-button-submit, .contact-form-button-submit:hover { width:20%; height:40px; font:700 13px Arial; letter-spacing:1px; color:#fff; display:block; outline:none; text-align:center; background:#fbae00; border:0; cursor:pointer; margin:0 auto 20px; float:none; } .contact-form-error-message-with-border{ background:#f9bebe; border:1px solid #d01010; box-shadow:0 2px 4px rgba(0,0,0,.2); color:#000; font-size:15px; font-weight:bold; line-height:19px; text-align:center; width:100%; padding:12px; } .contact-form-success-message-with-border{ background:#cff9c4; border:1px solid #08b555; box-shadow:0 2px 4px rgba(0,0,0,.2); color:#000; font-size:15px; font-weight:bold; line-height:19px; text-align:center; width:100%; padding:12px; } /* Ocultar widget nativo si lo usas solo embebido */ #ContactForm1 { display:none; }

Método número 2

Instrucciones

Ve a la sección de Páginas en tu blog, crea una página nueva y pega los bloque siguientes (HTML, CSS y JS):

HTML<form id="kontak-arlina" name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder=" Nombre *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder=" Email *" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder=" Mensaje *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Enviar Mensaje" /> <br /> <div style="max-width:100%; text-align:center; width:100%;"> <div id="ContactForm1_contact-form-error-message"></div> <div id="ContactForm1_contact-form-success-message"></div> </div> </form>

CSS#comments, .post_meta, #blog-pager { display:none } form { color:#666 } form.payforpal { margin:auto; text-align:center } #kontak-arlina { margin:auto; max-width:640px } #ContactForm1_contact-form-name, #ContactForm1_contact-form-email { height:auto; margin:5px auto; padding:15px 0; background:#fff; color:#444; border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); border-radius:3px; width:100%; min-width:100%; transition:all .5s ease-out; } #ContactForm1_contact-form-email-message { width:100%; height:175px; margin:5px 0; padding:15px 0; background:#fff; color:#444; border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); border-radius:3px; resize:none; transition:all .5s ease-out; } #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus { outline:none; background:#fff; color:#444; border-color:#66afe9; box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); } #ContactForm1_contact-form-submit { float:left; background:#ffb80a; margin:auto; cursor:pointer; padding:16px 20px; font-size:14px; text-align:center; letter-spacing:.5px; border:0; width:100%; border-radius:4px; color:#fff; font-weight:500; transition:all .2s ease; } #ContactForm1_contact-form-submit:hover { background:#000; color:#fff; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message { width:100%; margin-top:35px } .contact-form-error-message-with-border { background:#f47669; border:0; box-shadow:none; color:#fff; padding:5px 0; border-radius:3px } .contact-form-success-message { background:#4fc3f7; border:0; box-shadow:none; color:#fff; border-radius:3px } img.contact-form-cross { line-height:40px; margin-left:5px } .post-body input { width:initial } @media (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-submit { width:100%; } }

JS<script type="text/javascript"> // 

Cambios necesarios

• Reemplaza todas las apariciones de 4288891000946864685 por el ID de tu blog.
• Reemplaza https://kirawuan-dinero.blogspot.com/ por la URL de tu blog (con https://).
• Para cambiar el color del botón, busca #ffb80a y pon el color que prefieras.

ASÍ SE VERÁ LA PÁGINA DE CONTACTO SI HACES TODO BIEN

click para ver

¿A qué correo llegan los mensajes?

Generalmente llegan al correo con el que creaste el blog. Puedes cambiarlo en Configuración > General > Perfil de Usuario, sección Identidad.

¿Qué hago si el formulario deja de funcionar?

Ocurre a veces y es temporal: los mensajes no llegan a bandeja de entrada ni spam. Normalmente Blogger lo resuelve en horas. En pocas palabras: no hagas nada y espera a que se restablezca automáticamente.