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:
Para cambiar el estilo os recomiendo que visitéis los diseños que nos proponen desde ciudadblogger
como agrego un campo nuevo?
ResponderEliminar