CATEGORÍAS

Main Tags

JUEGOS RECIENTES

4/recent/post-list

JUEGOS RECIENTES

recent/hot-posts

¿CÓMO CREAR UN FORMULARIO DE CONTACTO PARA UN BLOG EN BLOGGER?



Tener un formulario de contacto en nuestro blog en Blogger es muy importante, para poder tener contacto con los seguidores de nuestro blog.

En esta oportunidad les traigo un formulario responsivo bastante sencillo de implementar en nuestras páginas de nuestro blog. ¡Comencemos con el tutorial!

1. Copiar 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:#504de3;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'] = '1269883587715307025';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1269883587715307025','https://tutorialesvicman.blogspot.com','1269883587715307025');
_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': '1269883587715307025', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

2. Crear una nueva página en el blog, y pegar el código copiado en la sección Vista HTML y reemplazar lo siguiente:

-Cambiar todos los códigos  1269883587715307025  por el código de Identidad de su blog.

EJEMPLO:  https://www.blogger.com/blog/posts/1269883587715307025 

-Cambiar el enlace URL:  https://tutorialesvicman.blogspot.com  por el enlace URL de su blog.
 
3. Si gustan pueden cambiar el color del botón 'Enviar Mensaje', para eso tendrán que buscar el siguiente código:  #504de3  y lo sustituyen por el código del color que ustedes prefieran.

4. Una vez ya listo solo publican la página.

Esto sería todo el tutorial, espero les sirva, ¡Hasta Luego!

Entradas que pueden interesarte