Si quieres tener un blog Profesiones debes 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.
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;
}INSTRUCCIONES
Tenemos que ir a la sección de páginas en nuestro blog y creamos una página a continuación pegamos el siguiente código
<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>
<style scoped="" type="text/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 0px;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 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 0px;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 0.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,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#ffb80a;margin:auto;vertical-align:middle;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 only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4288891000946864685';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4288891000946864685','https://kirawuan-dinero.blogspot.com/','4288891000946864685');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Tu mensaje ha sido enviado.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'Se requiere una dirección de correo electrónico válida.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4288891000946864685', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Tienen que cambiar todos
los códigos en donde aparezca 4288891000946864685 y sustituirlo por el número de identificación de su
blog.
Luego van a buscar y
cambiar el enlace: https://kirawuan-dinero.blogspot.com/por el enlace
de su blog, (no olviden que su enlace debe contener el https://)
Ahora, para cambiar el
color del botón Enviar Mensaje van a buscar en el código lo siguiente: #ffb80a y lo sustituyen por el código del color que
ustedes prefieran.
¿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 automáticamente.
.jpg)
0 Comentarios