Lapsus Mentis: Informática, Tecnología, RPAS, Legislación, Ecología...: Crear formulario contacto en blogger

Para añadir un formulario de contacto en una página estática sin utilizar ningún servicio externo en Blogger solo tenemos que realizar los siguientes pasos:

1- Desde la sección de diseño añadimos el gadget "Formulario de contacto" y le ponemos el nombre que queramos.

Esto provocará que nos aparezca el formulario en el apartado de nuestro blog donde lo hayamos agregado (en mi caso en el lateral derecho). Al querer añadirlo en una página estática lo tendremos que eliminar de aquí.

2-Accedemos a editar el HTML de la plantilla para quitar todo el código del formulario. De esta manera ya no aparecerá donde actualmente aparece.

3- En el código que nos aparece tenemos que localizar la sección correspondiente al apartado de ContactForm, para ello lo más cómodo es seleccionarlo en la pestaña "Ir al widget" y seleccionar ContactForm1 (puede aparecer como ContactForm, ContactForm1, ContactForm2,...etc. ) aunque también podemos buscar la palabra ContactFormcon un crt+F sobre el código.

4- Desplegamos el código primero pinchando en el triangulo negro y después en los "..."

5- Tras desplegarlo veremos un código similar a este:

<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Deberemos quitar todo lo que marco en color morado, quedando solo lo siguiente:

<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' type='ContactForm'>
    <b:includable id='main'>
    </b:includable>
</b:widget>

Tras esto ya no tendremos visible el widget "formulario de contacto" en nuestro blog. Ahora solo queda crear una página nueva, editarla en html y añadir lo siguiente:

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Nombre<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
            <br />
Correo electrónico <span style="color: red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
            <br />
Mensaje <span style="color: red;">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea>
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
            <br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>

Con este código tendremos una página de contacto de este estilo: