Páginas

Cómo poner un formulario de contacto personalizado en una página de Blogger

Una de las opciones que te ofrece Blogger a la hora de diseñar tu web es insertar un gadget con un formulario de contacto en la sidebar. Pero... ¿y si no quieres poner una barra lateral? ¿Y si no quieres que ese formulario salga en todas las páginas?

No hay problema: en el post de hoy te explicamos cómo insertarlo en una única página estática y cómo personalizarlo...


Cómo poner un formulario de contacto personalizado en una página de Blogger



...paso a paso

Lo primero que debemos hacer es ir a diseño y añadir el gadget formulario de contacto de Blogger, para que nos aparezca ContactForm1 en el desplegable de widgets de la edición HTML de la plantilla del blog y así poder modificarlo a nuestro gusto.
Una vez localizado veremos todo este texto:

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

Pues bien, lo que tenemos que hacer ahora es borrar la mayor parte de ese texto, concretamente todo lo que yo he marcado en negrilla.
Una vez hecho esto, lo siguiente es o bien ir a una página que ya tengamos creada y en la que queramos añadir el formulario al resto del contenido (por ejemplo en la página en la que habláis sobre vosotros), o bien crear una nueva exclusivamente para dicho formulario y a la que podemos poner como título "CONTACTO"
páginas > página nueva

A continuación la editamos en modo HTML y pegamos este otro código:

<div style="text-align: center;">
<br /></div>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<span style="font-size: large;">Nombre</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        </span></div>
</div>
<div style="text-align: center;">
<span style="font-size: large;">eMail *</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        Mensaje *</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;"><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" color:="" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span>
        </span></div>
</div>
<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>
<div style="text-align: center;">
<br /></div>
</form>
</div>

Le damos a "vista previa" y vemos cómo nos ha quedado. 
O mejor, para estar seguros de que funciona, la publicáis y probáis a enviar un mensaje.
¿Funciona? ¡Estupendo! Pues ahora vamos a ponerlo bonito...

¿CÓMO PERSONALIZAR EL FORMULARIO DE CONTACTO?
Añadiendo nuevos códigos esta vez en
plantilla > personalizar > avanzado > CSS
Códigos como por ejemplo estos: 

/* Formulario de Contacto
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 25px;
float: center;
padding: 10px;
background: #ffffff;
color: #000;
border: 1px solid #ffffff;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #c5bc73;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 13px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #444444;
border: none;
}

Que son los que corresponden al diseño de la imagen con que abríamos est post...

formulario de contacto personalizado en Blogger


 ...y con los que, como veis, podemos cambiarlo todo para adaptarlo al diseño de nuestro blog. Sólo hemos de fijarnos en a qué parte del formulario corresponde cada uno de los bloques de códigos y que yo os he señalado en negrita.
En concreto, nosotros por ejemplo hemos puesto a nuestro diseño una sombra en el contenedor principal ( box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);)y un ancho de 1000px (el ancho total del blog); también hemos redondeado los bordes de las casillas donde escribir el mensaje (border-radius: 5px;)y cambiado la letra. Finalmente, también hemos cambiado el color de fondo del botón de enviar (background: #c5bc73;)

Así que... sólo es cuestión de que os pongáis a ello con cuidadito y paciencia, e ir probando hasta dar con el diseño que más os guste ;)

(fuente: www.oloblogger.com )

DIY: 5 disfraces de Halloween para los niños

Sí, aún estáis a tiempo. Tomad nota porque se trata de cinco ideas muy, muy fáciles de hacer. Sólo tenéis que conseguir pinturas, algunos cartones y... ¡poco más!  Tomad nota:

IDEA, una bruja con cara de buena
Es muy fácil hacer un vestidito como este con un retal gris o negro y un cordón ¡ fijáos en los bolsillos de cuadros !


IDEA, el duende
Aprovechad cualquier vestido que tengáis en tonos pastel
personalizad unos botines o unas botas con unos cordones de colores o pegatinas con motivos florales 


¿lo más importante? las alas...


y el maquillaje: colorete a discrección, corrector de ojeras y el lápìz de ojos de mamá
 ¡ah! y si las ramitas del tocado os parecen un poco incómodas, prescindíd de ellas y poned unas flores secas



IDEA, el murciélago
Es raro que vistamos a nuestros niños con ropa negra de manera que si no tenéis un vestidido como este, podéis recurrir a unos leggings y un jersey tipo cisne...


lo que no pueden faltar son las orejas en pico y las alas...


bueno... y unas mejillas bien coloradotas: ya sabéis que a los vampiros les "rechifla" la sangre ;)



IDEA, la libélula
También en este caso podéis aprovechar cualquier vestido en tonos pastel o con estampado de flores...


...porque lo importante son las alas y la corona, todo de cartón y ¿por qué no? con un montón de purpurina dorada



IDEA, para los más traviesos: "Skeleton Skater"


una sudadera con capucha, un pantalón de chándal, unos deportivos... todo en negro; una "horrible" careta y quizá también...
¿unos guantes blancos con los huesos de la mano pintados en color negro?

Portfolio de diseños web: Le Fle en un 'clic'

Nuevo trabajo en nuestro portfolio de diseños web para profesionales y bloggers: la web de un equipo de profesores de francés nativos, en la que podremos aprender francés en un 'clic'...


diseños web, personalizacion de blogs en Blogger, Le Fle en un 'clic'


DESCRIPCIÓN DEL PROYECTO
Página WEB profesional con tienda de eBooks integrada, y un BLOG lleno de contenidos gratuitos de gran interés para todos los interesados por el aprendizaje de este idioma.

PACK ELEGIDO: Pack completo, consistente en
1º.- DISEÑO WEB: personalización de la plantilla "Simple" de Blogger, importación de contenidos de un blog anterior e instalación de dominio propio.

2º.- SERVICIOS DE DISEÑO GRAFICO: diseño de logotipo y tarjeta de visita, personalización de cabeceras de redes sociales (facebook, twitter y google+) y 2 portadas de eBooks.

Puedes realizar un "web tour" por esta página haciendo 'clic'
 >> AQUÍ <<

QUOTE POSTERS: Simone de Beauvoir

Nos gusta y nos inspira...
la escritora y filósofa francesa Simone de Beauvoir
Simone de Beauvoir color portrait in vintage polaroid frame
"No nacemos mujeres, 
nos convertimos en mujeres"


Simone de Beauvoir quotes, feminism and women, script typography free poster
diseño: Adarve Photocollage
D E S C A R G A nuestro diseño, imprímelo...


free printable poster, Simone de Beauvoir quote about feminism and women


O úsalo como fondo de pantalla para personalizar tu PC, tablet o móvil...


Fondo de pantalla para descargar gratis,en tres tamaños diferentes 
>>AQUÍ<<
Diseño tambien disponible en nuestra tienda de   RedBubble 
  
  
impreso en camisetas, sudaderas, estuches, relojes, mochilas, "tote bags", carcasas para móviles o tablets, y mucho más...

¡ visita nuestra tienda en RedBubble !

Montaje y personalización de fotolibros: "The Tide is High"

Aunque dicen que segundas partes no son buenas, lo que os traemos hoy es un nuevo fotolibro realizado con algunas de esas fotos que todos sacamos a nuestros niños en las vacaciones de verano.

Si en el fotolibro anterior nuestro protagonista nos contaba algunas curiosidades sobre las olas mientras simulaba hacer surf en la playa (ver) hoy le vemos tripulando un patín de agua, zambulléndose en el mar, explorando una "furna" y al final del día...
¿contemplando cómo sube la marea? 


Podéis ver todas las imágenes de este fotolibro 

>> AQUÍ << 

en un video que hemos subido a nuestro canal de