Crear Formulario de Contactos para Blogger

Como implementar un formulario de contactos para Blogger o páginas web importante para todo sitio web en internet, el sistema de contactos para enviar o recibir mensajes de las personas que visitan nuestra web, podemos utilizarlo para recibir mensajes, sugerencias, recomendaciones, ventas, negocios, monetización y muchas opciones mas útiles para todo sitio web.

El sistema de contactos que viene implementado en blogger tienes errores o simplemente no funciona en plantillas modernas por ese motivo en esta oportunidad tutoriales gratis de internet les trae un formulario de contactos adaptado para su sitio web en blogger totalmente responsivo y sencillo de implementar en simples pasos. Funciona para paginas, entradas o gadget.

1º Copiar el siguiente código:

Hola Puede enviar su consulta, duda, sugerencia, pedidos y que le gustaría ver en esta pagina. En el siguiente formulario tratare de responderte siendo lo mas breve posible gracias.

<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 12px;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 12px;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:#ff5000;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:#F57C00;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#F70D0F;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'] = '8631817981408106805';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8631817981408106805','https://dirakiongames.blogspot.com','8631817981408106805');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Enviando...', 'contactFormMessageSentMsg': 'Tu mensaje ha sido enviado.', 'contactFormMessageNotSentMsg': 'No se pudo enviar el mensaje. Por favor, inténtelo de nuevo más tarde.', 'contactFormInvalidEmailMsg': 'Se requiere una dirección de correo electrónico válida.', 'contactFormEmptyMessageMsg': 'El campo de mensaje no puede estar vacío.', 'title': 'Contact Form', 'blogId': '8631817981408106805', 'contactFormNameMsg': 'Nombre', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Mensage', 'contactFormSendMsg': 'Enviar', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

2º Dentro de su blog crear una nueva Página con el nombre Contactos, tiene que pegar el código de Formulario de Contactos en la sección ✅ Vista HTML y reemplazar las siguientes opciones marcados en rojo:

✅ Cambiar todos los códigos 8631817981408106805 por el código de Identidad de su blog en blogger.
✅ Cambie el enlaces url https://dirakiongames.blogspot.com por el enlace url de su sitio web principal.

Luego de implementar el nuevo Formulario de Contactos actualizado en su blog no funciona o se queda en la opción enviando mensaje o simplemente tiene algún tipo de error, estas fallas se viene realizando en las ultimas actualizaciones de blogger sobre la opción de contactos, fallas que generalmente se dan en el diseño Html de las plantillas. Se puede corregir este error agregando el formulario de contacto que viene por defecto en blogger y ocultando en el html.

1º Entrar a Diseño agregar gadget de formulario de contactos que viene por defecto en blogger.

2º Entrar a Editar HTML del blog agregar el siguiente código para ocultar el formulario de contacto que acabamos de agregar arriba de código de cierre ]]></b:skin>