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:

<div class="modern-contact-wrapper">
    <div class="contact-header">
        <h3>Ponte en contacto</h3>
        <p>¿Tienes alguna duda o sugerencia? Escríbenos y te responderemos pronto.</p>
    </div>

    <form id="kontak-Monetiza" name="contact-form" class="modern-form">
        <div class="form-group">
            <label for="ContactForm1_contact-form-name">Nombre</label>
            <input id="ContactForm1_contact-form-name" class="contact-input" name="name" placeholder="Ej. Fredy Maguiña" type="text" value="" required="required" />
        </div>

        <div class="form-group">
            <label for="ContactForm1_contact-form-email">Correo Electrónico</label>
            <input id="ContactForm1_contact-form-email" class="contact-input" name="email" placeholder="correo@ejemplo.com" type="email" value="" required="required" />
        </div>

        <div class="form-group">
            <label for="ContactForm1_contact-form-email-message">Mensaje</label>
            <textarea id="ContactForm1_contact-form-email-message" class="contact-textarea" name="email-message" placeholder="Escribe tu mensaje aquí..." rows="5" required="required"></textarea>
        </div>

        <button id="ContactForm1_contact-form-submit" class="contact-submit-btn" type="button">
            <span>Enviar Mensaje</span>
            <svg class="send-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
        </button>

        <div class="form-feedback">
            <div id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></div>
            <div id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></div>
        </div>
    </form>
</div>

<style scoped="" type="text/css">
#comments, .post_meta, #blog-pager { display: none; }
.modern-contact-wrapper { max-width: 600px; margin: 30px auto; background: #ffffff; padding: 35px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; border: 1px solid #eaeef2; }
.contact-header { margin-bottom: 25px; text-align: center; }
.contact-header h3 { margin: 0 0 8px 0; font-size: 24px; font-weight: 700; color: #1a202c; }
.contact-header p { margin: 0; font-size: 14px; color: #718096; line-height: 1.5; }
.modern-form .form-group { margin-bottom: 20px; text-align: left; }
.modern-form label { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.modern-form .contact-input, .modern-form .contact-textarea { width: 100%; padding: 14px 16px; background: #f7fafc; color: #2d3748; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 15px; box-sizing: border-box; transition: all 0.3s ease; }
.modern-form .contact-textarea { height: 140px; resize: none; }
.modern-form .contact-input:focus, .modern-form .contact-textarea:focus { outline: none; background: #ffffff; border-color: #3182ce; box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.12); }
.modern-form .contact-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%); color: #ffffff; border: none; padding: 16px; font-size: 16px; font-weight: 600; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25); transition: all 0.3s ease; margin-top: 10px; }
.modern-form .contact-submit-btn:hover { background: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%); box-shadow: 0 6px 16px rgba(49, 130, 206, 0.35); transform: translateY(-1px); }
.modern-form .contact-submit-btn:active { transform: translateY(0); }
.send-icon { transition: transform 0.3s ease; }
.modern-form .contact-submit-btn:hover .send-icon { transform: translateX(4px); }
.form-feedback { margin-top: 20px; }
#ContactForm1_contact-form-error-message:not(:empty), #ContactForm1_contact-form-success-message:not(:empty) { width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 14px; box-sizing: border-box; text-align: center; }
.contact-form-error-message-with-border, #ContactForm1_contact-form-error-message:not(:empty) { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; }
.contact-form-success-message, #ContactForm1_contact-form-success-message:not(:empty) { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
@media only screen and (max-width: 640px) { .modern-contact-wrapper { padding: 20px; margin: 15px; } }
</style>

<!-- Script interno del sistema de Blogger vinculado -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1802115162-widgets.js"></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://www.blogger.com/', '8631817981408106805');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Enviando mensaje...', 
    'contactFormMessageSentMsg': '¡Tu mensaje ha sido enviado con éxito!', 
    'contactFormMessageNotSentMsg': 'No se pudo enviar el mensaje. Por favor, inténtelo de nuevo más tarde.', 
    'contactFormInvalidEmailMsg': 'Por favor, introduce una dirección de correo electrónico válida.', 
    'contactFormEmptyMessageMsg': 'El campo de mensaje no puede estar vacío.', 
    'title': 'Contacto', 
    'blogId': '8631817981408106805', 
    'contactFormNameMsg': 'Nombre', 
    'contactFormEmailMsg': 'Email', 
    'contactFormMessageMsg': 'Mensaje', 
    '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. (PD: Ya no se agrega el enlace de nuestro blog, ahora viene de forma nativo por blogger)

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 forma genérica. Vamos ha corregir este error agregando el formulario de contacto que viene por defecto en blogger y ocultando en el html de nuestra plantilla.

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

2º Ahora 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> (En algunos diseños nuevos de plantillas viene por defecto ocultar gadget en este caso obviaríamos este paso)