Con un portátil bajo el brazo Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Personalizar un formulario de suscripción

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilitan parte del trabajo, eligiendo nosotros únicamente la alineación y los colores de las cosas. Sin embargo cuando pasamos al campo Blogger o al HTML5 puro la situación cambia y se repite siempre la misma pregunta, ¿cómo puedo ponerle al formulario una foto de fondo y un aspecto más “suculento”? Porque como dije en la entrada sobre los filtros para tus imágenes al usuario le entramos por los ojos. Pues bien, hoy traigo un tutorial sencillo, rápido y entendible, si has estado estudiando, de como embellecer tu formulario de suscripción que puedes implantar tanto en WordPress como en HTML5 puro, aunque esté enfocado principalmente a Blogger.

personalizar-formulario-en-blogger-producto-final


Puedes poner todo el texto y campos que quieras en tu formulario este simplemente es un ejemplo para que veas que la gran que hay diferencia entre el que viene por defecto y este. Durante el tutorial y en vuestro código vas a ver muchísimas veces mencionada la palabra “input” cada vez que aparece esta palabra se está haciendo mención a un campo del formulario, o bien el del nombre, o el del e-mail… También decir que el código que he utilizado yo es el de Mailrelay pero todos los proveedores tienen códigos similares,  lo que puede cambiar es el orden de los elementos.

Para comenzar entras en tu Blogger y accedes al blog donde quieras poner este formulario. En la columna de la izquierda le das a “Diseño”, después presionas sobre añadir un gadget y en la ventana que se abre eliges HTML/JS:
1


Una vez se carga la siguiente pantalla copias y pegas el formulario de suscripción, pero antes de guardar metes el formulario entre un div llamado formulario, es decir:
<div class=”formulario”>El código de tu formulario aquí.</div>

Una vez hecho eso último guardas todo y vas a tu blog.

Como ves aparece toda la apariencia que le da el navegador por defecto y como eso es lo que estamos evitando, pasamos a la segunda parte de nuestro tutorial: el CSS, es decir, la hoja de estilos, donde vamos a decir a nuestra plantilla los estilos que queremos que tengan nuestros elementos.

Para ello en la barra lateral izquierda, donde antes seleccionamos “Diseño”, seleccionamos “Plantilla”, cargándose una página con las miniaturas de nuestra plantilla de escritorio y la de móvil, debajo de la de escritorio vemos dos opciones damos a la opción de “Personalizar”, ya que nos permite observar la vista previa de nuestros cambios antes de guardarlos.

Una vez dentro de personalizar en la barra lateral más a la izquierda buscamos Avanzado, donde se nos desplegarán varias opciones la que nos interesa está abajo del todo, “Añadir CSS”.

Primero vamos a añadir al div formulario una imagen de fondo, para ello escribimos en la zona de “Añadir CSS” lo siguiente:
.formulario{
background-image: url(‘http://65.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg’);

}

En la url sitúas la imagen que tu quieras siempre y cuando lo hagas entre las comillas pues si no no cargará. Una vez te cargan los cambios en la vista previa verás que no te ocupa el 100% del blog el formulario con la imagen.

5


Esto es porque como dice el inspector (bloque que se encuentra a la derecha en la imagen) el gadget se encuentra metido en varios divs con sus propios padding, que equivalen a la distancia entre el elemento y el final de él; y, margins, distancia entre el final del elemento y el siguiente, como una caja de matriuscas, pero esto se puede arreglar fácilmente jugando con las medidas.

Para ello vamos a añadir dos nuevas declaraciones a .formulario, estas son margin-left y margin-right, es decir la distancia derecha e izquierda entre el div y lo que se encuentra fuera de él, como nosotros queremos acercarlo y no alejarlo vamos a jugar con valores negativos:
.formulario{
background-image: url(‘http://65.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg’);

margin-left: -3.5em;
margin-right: -3.5em;
}

A mi poniendo -3.5em en ambos lados el div me ha encajado, sin embargo a veces los tamaños varían de un Blogger a otro por lo que a ti te puede encajar a -2.1em y a otro en -4em, por lo que lo único que tienes que hacer es probar e ir mirando en la vista previa a ver si encaja. Yo suelo empezar con un lado y una vez está encajado sigo con el otro, que normalmente lleva el mismo valor.

Ya casi hemos terminado con el div, no sé tú pero yo odio añadir cosas y que estás se peguen totalmente a arriba y abajo o a los lados, por ejemplo el texto del formulario y los campos de este veo que rozan por todos lados el principio desde arriba y el final del gadget, para arreglar esto he añadido dos nuevas clases: padding-bottom y padding-top, que miden la distancia por arriba y por abajo desde principio del div hasta el formulario.
.formulario{
background-image: url(‘http://65.media.tumblr.com/408fbfeae2d8590512b9fc9cc6207090/tumblr_mr807bH7hh1st5lhmo1_1280.jpg’);

margin-left: -3.5em;
margin-right: -3.5em;

padding-top: 8em;
padding-bottom: 8em;

}

Puedes poner y quitar todo el padding que desees, ya que este es una forma para separar elementos pero también para que se vea más cantidad de foto. Y con esto último ya habríamos terminado de estilizar el div, pero nos falta todo lo de dentro.

Vamos a seguir por el formulario y ya más tarde terminaremos con el texto que queramos añadir a nuestro formulario. Primero vamos a empezar a dar forma a los campos que se deben rellenar, para ello vamos a hacer uso del “input[type=”text”]”.
input[type=”text”]{
width: 50%; Ancho de los campos
border: 1px solid #333;Borde
height: 25px;Altura
background-color: transparent!important;Fondo
color: #333;Color de  las letras al escribir

font-family: ‘Arial’; Tipografía al escribir

font-size: 15px; Tamaño de la fuente al escribir
}

Algunos campos de formulario tienen dentro un pequeño texto, como el mio en la foto del resultado final, para añadirlo en tu formulario solo tienes que dar con este trozo de código dentro de tu formulario:
<input id=”email” name=”email” type=”text” value=””>

Y añadirle este pequeña “frase”:

<input id=”email” name=”email” type=”text” value=”” placeholder=”Escribe aquí tu email“>

Puedes poner la frase que desees en el placeholder mientras esté entre comillas. Sin embargo, verás que el placeholder no comparte ninguno de los estilos que has predeterminado y es que él va a su aire y para darle estilos necesitas hacer uso del “placeholder” más los prefijos para hacerlo compatible a todos los navegadores y que no se vea un Miró en el Exploter, un Picasso en el Opera…

::-webkit-input-placeholder { Chrome/Opera/Safari
color: #333; color del texto del placeholder
text-align: center;alineación
}
::-moz-placeholder { Firefox 19+
color: #333;
text-align: center;
}
:-ms-input-placeholder { IE 10+
color: #333;
text-align: center;
}
:-moz-placeholder { Firefox 18-
color: #333;
text-align: center;
}

Puedes añadir tantos estilos como quieras al placeholder, yo he añadido los básicos, pero acuérdate de que tienen que ser comunes a todos los navegadores.

Tras editar los campos de formulario pasamos al botón de enviar, el más importante y el que por defecto es más feo, para ello vamos a hacernos uso de “input[type=”submit”]” y ya verás que bonito lo vamos a dejar:
input[type=”submit”]{
background-color: #333; color de fondo del botón
color: #fff;color del texto en él
width: 25%;tamaño del botón
height: 28px;altura del botón
border: none;borde, poner ninguno para quitar el de defecto
margin: 1em;margenes, distancia entre el resto de elementos

font-size: 12px; tamaño del botón

font-family: ‘Arial’;
}

Pero yo creo que el botón solamente así pierde un poco de salero, ¿no crees? Por eso escribimos otra vez “input[type=”submit”] pero esta vez vamos a añadirle un :hover al final y así cuando el usuario pase el ratón por el botón este de verdad parezca lo que es cambiando su color de letra y/o su fondo:

input[type=”submit”]:hover{
background-color: transparent;color de fondo
border: 1px solid #333;color del borde
color: #333;color del texto
}

Normalmente con la suscripción a tu lista se suele regalar algo o sueles contar al futuro suscriptor a que tendrá acceso, que recibirá… Para ello guardamos todo lo que hayamos avanzado en el css y vamos a añadir un párrafo con la clase headline entre el div y el principio del formulario. Para ello volvemos a “Diseño” y editamos el gadget donde tenemos todo nuestro formulario.
12


Dentro del párrafo, antes de guardar, escribimos lo que queramos y ahora si que guardamos volviendo al css, donde vamos a editar el aspecto de este último párrafo.
.headline{
font-size: 20px;tamaño del texto
font-family: ‘Arial’;tipografía
margin: 1em;margenes
text-align: center;alineación
}

 Y ahora si que sí ya hemos conseguido un formulario de suscripción bonito, que multiplique el número de altas, y totalmente de nuestra web: con sus colores, sus tipografías… Por lo que si te ha sido de ayuda este tutorial te animo a compartirlo en tus redes sociales favoritas para seguir la lucha contra los formularios nada artísticos.

Fuente: este post proviene de Con un portátil bajo el brazo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: CSS: Nivel B1

Recomendamos

Relacionado

Tutorial

Personalizar un formulario en Blogger

Tener una lista de suscripción es muy importante en el camino de convertirse en un Blogger de éxito, sin embargo muchos piensan que una vez hecha la lista vale todo el resto, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilita ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

Tutoriales Redes Sociales Web

Como Personalizar botones de compartir.

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

SEO código html Contenido ...

Qué son los datos estructurados y para qué sirven

En la actualidad, nos guste o no, el mundo en el que vivimos poco a poco cada día se digitaliza más. Esa es la razón por la que cada día más empresas se adaptan a este mundo, para llegar más a los usuarios y tratar de tener una presencia notable en la red. Pero si cada vez son más los que entran en el mundo digital y todos quieren posicionar sobre los demás, ¿cómo se puede destacar? En SEO la list ...

Redes sociales Uncategorized Blogger ...

Añade un Social Locker en blogspot e impulsa tus redes sociales

Añade un Social Locker en blogspot e impulsa tus redes sociales Los social Locker son una manera de conseguir que tus lectores compartan o den me gusta en las redes para poder acceder a un contenido especial. El pago social o el pay per action es cada vez mas frecuente en los blogs, en principio era algo reservado a los blogs de descargas y gracias a su efectividad se han extendido por la blogsfer ...

BLOGGER jimdo marketing digital ...

Cómo afecta al email marketing y al blog el RGPD?

El email marketing está afectado al igual que tu blog por el RGPD, es decir el reglamento general de protección de datos, que durante el 2018 entró en vigor en la Unión Europea. RGPD para cumplimiento legal de tu blog y el email marketing El RGPD está provocando que los datos de los usuarios sean protegidos dentro de la navegación como en formularios para suscripción, descarga u otras acciones en ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

propuestas

Cómo crear un menú a pantalla completa para tu Blog

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

Netflix Noticias

Los planes de suscripción de Netflix se verían afectados con el nuevo plan Ultra

Netflix sigue en crecimiento a nivel mundial, produciendo nuevas series y películas así como abonando nuevos suscriptores, sin embargo, estaría pensando en incorporar un nuevo plan en México llamado “Ultra”. Recordemos que el plan Premium es el que tiene todos los beneficios que ofrece Netflix a sus suscriptores, tales como 4 pantallas simultáneas y 4K con tecnología HDR, sin embarg ...