Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

Widget de formulario de contacto en Blogger

A mediados del 2013, Blogger introdujo un nuevo widget. Básicamente es un formulario de contacto que puede ser añadido al blog con facilidad. Es bastante sencillo ya que por el momento no permite incorporar archivos ni enviar nada que sea distinto a texto plano.

El formulario de contacto de Blogger tiene las siguientes características:

  • Campo para el nombre de usuario.
  • Campo para el correo electrónico del usuario.
  • Campo para el mensaje.
  • Botón de envío.

Formulario de contacto en Blogger

El diseño es bastante simple y los colores del texto son los mismos que los de la sección en que se añade el widget. Por el momento, no tiene opciones de configuración y no está disponible para vistas dinámicas.

¿Cómo añadir el formulario de contacto en Blogger?

 Par añadir el formulario al blog, debemos seleccionar la pestaña Layout y seguidamente hay que hacer clic en Add a gadget en la sección en que deseamos mostrar el widget (como por ejemplo la sidebar). Por último, se selecciona la pestaña More gadgets y y añadimos el gadget Contact Form.

Gadget de formulario de contacto en Blogger

Estilo del formulario de contacto

 Dado que el fondo es transparente, se integrará bien, estéticamente hablando. Sin embargo, el formato es fácil de modificar utilizando Styling sheets (CSS) para los sectores apropiados. A continuación mostramos un ejemplo:

/* Contact Form Container */

.contact-form-widget {

width: 500px;

max-width: 100%;

margin: 0 auto;

padding: 10px;

background: #F8F8F8;

color: #000;

border: 1px solid #C1C1C1;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);

border-radius: 10px;

}

/* Fields and submit button */

.contact-form-name, .contact-form-email, .contact-form-email-message {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

}

/* Submit button style */

.contact-form-button-submit {

border-color: #C1C1C1;

background: #E3E3E3;

color: #585858;

width: 20%;

max-width: 20%;

margin-bottom: 10px;

}

/* Submit button on mouseover */

.contact-form-button-submit:hover{

background: #4C8EF9;

color: #ffffff;

border: 1px solid #FAFAFA;

}

 

Con el código anterior, el formulario tendrá la siguiente apariencia:

cambiar el estilo en el formulario de contacto de Blogger

Para añadir este estilo, hay que ingresar en Template>Edit HTML, luego en la flecha que queda al lado de <b:skin>…</b:skin> y pegamos el código justo arriba de ]]></b:skin> (para encontrar este código tecleamos Ctrl + F y escribimos lo que buscamos).

editar-estilos-CSS-formulario-contacto

 ¿Como añadir un formulario de contacto en una página estática?

El primer paso es añadir el gadget de formulario de contacto (Layout), y posteriormente editar la plantilla (Template>Edit HTML) para remover la mayor parte del gadget. Después hay que buscar en la plantilla la ID “ContactForm“, expandir el widget haciendo clic en la flecha negra a la izquierda (lo mismo se hace con “includable“) y por último hay que borrar el código que está de color rojo.

formulario de contacto en páginas estáticas

Partes que deben ser removidas:

 <b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’>
    <b:includable id=’main’>
  <b:if cond=’data:title != &quot;&quot;’>
<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 + &quot;_contact-form-name&quot;’ 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 + &quot;_contact-form-email&quot;’ 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 + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
<p/>
<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ 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 + &quot;_contact-form-error-message&quot;’/>
<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>
</div>
</form>
</div>
</div>
<b:include name=’quickedit’/>

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

Después de salvar la plantilla, vamos a la página en que queremos implementar un formulario de contacto y colocamos el siguiente código con el título que queremos:

  <div class=’widget ContactForm’ id=’ContactForm1′>
  <div class=’contact-form-widget’>
    <div class=’form’>
      <form name=’contact-form’>
        <p>Name<p>
        <input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>
        <p>E-mail *</p>
        <input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>
        <p>Message *</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=’Submit’/>
        <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>

A partir de ahí, los mensajes serán enviados al mismo correo electrónico registrado en Blogger.


SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

CDN para WordPress

1 comment to Widget de formulario de contacto en Blogger

  • Daniel Ayala

    Hola tengo una pregunta en el formulario de contacto de blogger necesito cambiar la direccion predeterminada de gmail mia a la personal de outlook como se haria. gracias de antemano

Leave a Reply