Si quieres tener un blog Profesiones bebes tener una página o formulario de contacto. En este artículo te mostrare como hacerlo 100% personalizado y lo mejor de todo es que no necesitas ser un experto en programación porque todos los códigos necesarios podrás copiarlos con solo un clic.
¿Qué es un Formulario de Contacto?
Es una herramientas 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 los posibles clientes.
Anadir Gadget Formulario de contacto en Blogger
La forma más fácil de conseguir un formulario de contacto en Blogger es añadiendo uno de los gadgets que la plataforma trae de forma predeterminada, el proceso para añadirlo es el siguiente:
- Paso 1: Busca en el panel de control de Blogger la opción Diseño.
- Paso 2: En la barra lateral haz clic en Añadir un Gadget.
- Paso 3: Selecciona el que dice Formulario de Contacto.
- Paso 4: Guarda los cambios.
Crear Página con Formulario de Contacto en Blogger
En algunos casos es preferible crear una Página de Contacto en la cual podamos añadir todos nuestros perfiles de redes sociales y en ella incluir un pequeño mensaje para nuestros lectores acompañado de un formulario de contacto.
Ahora te voy a mostrar cómo hacerlo Paso a Paso:
- Paso 1: Añadir el gadget del formulario.
- Paso 2: Ocultar formulario.
- Paso 3: Crear la página de contacto.
- Paso 4: Copiar y pegar el siguiente código en la página:
<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>Si no sabes cómo hacerlo no te preocupes, no eres el único, por eso he creado un video donde te mostrare detalladamente como realizar todo el proceso.
Video Tutorial: Crear Pagina de contacto en Blogger
Personalizar Formulario de Contacto:
Vamos a darle estilo propio a nuestro formulario, lo primero que deben hacer es buscar la opción Tema en el panel de control de Blogger y luego hacer clic donde dice Editar HTML. Luego debes presionar las teclas Ctrl + F para activar el buscador y buscar la siguiente línea de código ]]></b:skin> arriba de ella debes pegar lo siguiente:
.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: medium none;
-webkit-box-shadow: none;
-moz-box-shadow: 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: 13%;
height: 30px;
font: normal 12px Arial;
letter-spacing: 1px;
color: #444;
display: block;
outline: none;
margin-bottom: 20px;
text-align: center;
background: #E6E6E6;
border: 0;
cursor: pointer
}
.contact-form-button-submit:active {
outline: none;
-webkit-box-shadow: none;
box-shadow: none
}
/* Comienzo - mensajes del formulario*/
.contact-form-error-message-with-border {
background: #f9bebe;
border: 1px solid #d01010;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #000;
font-size: 15px;
font-weight: bold;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
width: 100%;
padding: 12px;
}
.contact-form-success-message-with-border{
background: #cff9c4;
border: 1px solid #08b555;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #000;
font-size: 15px;
font-weight: bold;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
width: 100%;
padding: 12px;
}
/* Fin - de Mensajes del formulario*/
.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-cross {
border: solid red 12px;
display: none;
}
#ContactForm1 {
display:none;
}ASÍ SE VERA LA PÁGINA DE CONTACTO SI HACES TODO BIEN
¿A qué correo llegan los mensajes del formulario de contacto?
Generalmente los mensajes llegan al mismo correo con el cual tienes tu blog creado, sin embargo, puedes cambiar la dirección de correo si te vas a la opción Configuración, luego buscas General - Perfil de Usuario. En la parte de Identidad podrás cambiar el correo electrónico al cual quieres que lleguen los mensajes del formulario.
¿Qué hago si el formulario de contacto deja de funcionar?
Es normal que esto suceda, de vez en cuando el formulario de contacto deja de funcionar y los mensaje no te llegan a tu bandeja de entrada ni a la de Spam, pero no te preocupes, Este tipo de fallas es temporal y generalmente Blogger lo resuelve en cuestión de horas.
En pocas palabras, no tienes que hacer nada, solo esperar a que el problema se resuelva automaticamente.
