¿Alguna vez has visto mi contáctenos página en mi web si no lo ves. Si tiene alguna consulta, puede publicarla en ese formulario de contacto y recibiré su correo electrónico en unos segundos.
¿Quieres saber cómo creé este formulario de contacto y lo importante es que está funcionando? No es un formulario de contacto de volcado, tiene la funcionalidad de entregar sus consultas que agrega en ese formulario de contacto.
No he usado ningún lenguaje de programación de alto nivel para hacer esa página de contacto. Normalmente, si desea enviar cualquier correo electrónico, necesita soporte de PHP para que cualquier otro sitio de terceros entregue sus correos electrónicos. Pero este formulario de contacto no utiliza ningún lenguaje de programación de alto nivel ni ningún sitio de terceros, solo utiliza JavaScript para enviar sus correos electrónicos.
La funcionalidad de entrega de correo electrónico es proporcionada por blogger lo que nos ayuda a enviar correos electrónicos al administrador de ese sitio web.
Entonces, si desea agregar este tipo de página de contacto en su blog de Blogger, siga los pasos que se proporcionan a continuación.
Pasos a seguir:
- Ir Panel de Blogger
- Ir Sección de páginas
- Crear nueva página estática
- Ahora copie el código proporcionado a continuación y péguelo en el editor HTML de su nueva página.
- Hacer clic Publicar botón
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<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>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#ContactForm1,#comments,.post-body form.paypalpay br{display:none}
.post-body form.paypalpay{margin:0;text-align:center}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Quicksand',sans-serif;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Google Sans',sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{font-family:'Quicksand',sans-serif;background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "457558259419389908";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogIDx3d457558259419389908","https://www.tongasoft.com/","457558259419389908");
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "Your message has been sent.", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "457558259419389908", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>Reemplazar 457558259419389908 con su ID de blog de blogger y https://www.tongasoft.com/ con la URL de tu sitio web.
Después de agregar los códigos en su blog de Blogger, ahora su formulario de contacto funcionará correctamente.
Usted recibirá correos electrónicos en su cuenta de correo electrónico que se utiliza para su blog de blogger.
Ahora sus usuarios pueden contactarlo fácilmente y conversar sobre cualquier tipo de problema.
Conclusión:
Ha agregado con éxito la página de contacto en su blog de Blogger y está funcionando. El formulario de contacto envía un correo electrónico al administrador de ese sitio web.
Si tiene algún problema al crear este tipo de página de contacto en su blog de blogger, puede contactarme fácilmente a través de mi página de contacto o mi perfil de Facebook o página de Facebook.