trassyblog: Colocar formulario de contacto en Blogger.

Si lo que deseamos es recibir emails desde nuestro blog de Blogger tenemos dos alternativas. El gadget propio de blogger y utilizar formularios externos, nosotros recomendamos foxyform.es.

Hablemos primero del gadget de blogger:

Para poder añadirlo debemos entrar en plantilla y clicar sobre "añadir Gadget" de la zona donde queramos insertarlo, ya sea en la barra lateral o al final.

Una vez se nos abra la ventana con todas las aplicaciones de Blogger debemos clicar en "Mas gadget" y "Formulario de contacto", como se muestra en la imagen.

Le colocamos el nombre que queramos y en nuestro Blog ya estará insertado.

Este widget mandará un email a todas las cuentas de correo vinculados a este blog. Si queremos que este formulario se muestre en una página aparte debemos seguir primero los pasos anteriores también.

Después ir a "Páginas" e insertar una pagina en blanco que editar.

Ahora deberemos insertar el siguiente código html:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Nombre<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' /> <p>Correo electrónico *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
<p>Mensaje *</p>
<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' />
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>

En este punto del tutorial tendremos dos formularios, el que está en el blog que insertamos al principio y el que hemos insertado en la nueva página.

Ahora deberemos "eliminar" el que insertamos al principio, y lo decimos entre comillas ya que no puede eliminarse propiamente. Si lo sacamos de la plantilla, el que está en la página nueva dejará de funcionar y eso es debido a la forma de trabajar de Blogger.

Cuando insertamos en la plantilla una formulario de correo, Blogger inserta las llamadas a las funciones que permiten que mandemos emails. Por lo que en este caso deberemos eliminar solo el formulario que aparece en la pantalla, no el widget.

Para haberlo es necesario que entremos en "Plantilla" y "Editar HTML". En el selector de widget seleccionamos "ContactForm1" y desplegamos todo el widget clicando en los ... que veremos, y nos quedará algo así:

<b:widget id='ContactForm1' locked='false' title='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>

Ahora comentamos el código insertando  en dos puntos concretos como se muestra.

<b:widget id='ContactForm1' locked='false' title='Contacto' type='ContactForm'>
<b:includable id='main'>

</b:includable>
</b:widget>

Ahora ya solo tendremos el formulario de la página que insertamos, el del blog habrá desaparecido. Y ya está.

Recordamos que este widget manda un mail a las cuentas que estén asociados al blog. Si tenemos otro mail a parte y queremos que nos lleguen allí, la alternativa es usar los formularios externos como foxyform.es.

Estos te darán el código que debes pegar en "Editar página en blanco" o en añadir widget "HTML/JavaScript" y colocarlo donde queramos.

Eso es todo amigos, un cordial saludo.

PosData: Si queremos personalizar el formulario de blogger podemos editar el CSS en "Plantilla" Editar HTML y justo antes de "]]></b:skin>" colocamos:

.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
color: #E21A1A;
}

.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 0px;
border-radius:8px;
}

.contact-form-button-submit {
border-color: #fff;
border-radius:8px;
height:40px;
width:200px;
background: #e36f6f;
color: #fff;
}

Renewing Experiences

Blog sobre electrónica, programación y alguna cosa más

martes, 10 de diciembre de 2013

Colocar formulario de contacto en Blogger.

No hay comentarios:

Publicar un comentario