Generador de formularios CSS, con
opciones de personalización completa

Crea gratis atractivos formularios online y encuestas, tan fácil como 1-2-3, con el generador de formularios CSS de 123ContactForm

Generador de Formularios CSS

123ContactForm es un simple generador de formularios online que te ayuda a crear atractivos formularios web con la simplicidad de arrastrar & soltar. Una vez que los formularios son creados, pueden personalizarse fácilmente usando nuestros temas de formulario CSS ya listos, o el simple editor CSS.

Cuando uses el generador de formularios CSS de 123ContactForm para crear formularios web para tu sitio web puede que quieras enfatizar algunos campos, cambiando su apariencia. Esto se hace fácilmente usando código CSS para darle estilo a los elementos del formulario. Puedes retocar todos los campos del mismo tipo (todas las casillas de texto por ejemplo), o un campo único. Los formularios web creados con el generador de formularios CSS de 123ContactForm son construídos de forma tal que cada elemento tiene un ID único, y usándolo puedes modificar la forma en la que se ve es elemento en particular.

Personalización de los Elementos del Formulario CSS

Personalización completa de formularios web creados con el generador de formularios CSS de 123ContactForm

Tomemos este formulario como ejemplo (haz clic para vista previa). Usando menos de 15 líneas de código CSS podemos modificar los elementos del formulario CSS exáctamente como queramos. Para seguir con el ejemplo, digamos que quisieras que se viese así (clic para vista previa).

Tienes que crear un archivo CSS, miestilo.css por ejemplo, modificarlo como se describe aquí debajo, subir el archivo a tu sitio y, en la página de Configuración de Formulario, configurar su URL para que se use. O puedes añadir el código CSS directamente desde la interfaz de 123ContactForm.

Ejemplo de personalización de formulario CSS en menos de 15 líneas de código - clic para agrandar

+ Si miras al código fuente del formulario, verás que la mayoría de los elementos tienen classes e IDs, como aquí abajo:

<select id="id123-control4346747" name="control4346747" class="class123-select">
Este campo de selección (desplegable) pertenece al class llamado class123-select y tiene el ID id123-control4346747. Modificar el class class123-select usando CSS, aplicará los cambios a todos los campos de selección. Modificar el ID id123-control4346747 usando CSS, cambiará la apariencia sólo de este campo de selección particular. Añadamos un borde izquierdo rojo a todos los controles desplegables (de selección) y un borde inferior azul sólo a este control desplegable:
.class123-select { border-left:3px solid #FF0000; }
#id123-control4346747 { border-bottom:3px solid #0000FF; }

+ Hagamos que todo el texto de esta página sea azul:

.class123-label, class123-select { color:#0066CC; }

+ Hagamos que todos los controles y etiquetas en el formulario usen Verdana 12px como fuente:

label.descr, p.descr, .class123-radio, .class123-checkbox, .class123-select
{ font-family: Verdana; font-size: 12px; }

+ Hagamos verde el borde izquierdo de todos los checkboxes:

.class123-checkbox { border-left:3px solid #336633; }

+ Añadamos un fondo naranja a todas las opciones de selección desplegables:

.class123-select option { background: #FF6600; }

+ Cambiemos la apariencia de una etiqueta particular, añadiéndole un borde izquierdo púrpura:

#id123-title4290919 { border-left:3px solid #660066; }

+ Modifiquemos la apariencia del área de texto:

#id123-control4290921
{ border: 1px solid red ; border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; }

+ Personalicemos el botón Enviar:

#id123-button-send { color: yellow; }
border-left:3px solid #FF00FF

+ Puedes incluso modificar la apariencia de los campos de carga o de la casilla del número de verificación (Captcha):

.swfupload { border-style: dashed; color: #00FF33; }
#id123-captcha
{ background: #FF6600; border-left:3px solid #FF00FF; }

Los ejemplos de elementos de formulario CSS que se usaron para personalizar este formulario pueden encontrarse aquí. Si, después de leer este tutorial, no sabes cómo personalizar los elementos de tu formulario con CSS, por favor contáctanos.

Obtén más funciones y opciones de personalización con nuestro creador de formularios web de arrastrar & soltar


Eso fue todo, agregamos código CSS puro a elementos del formulario generado con el generador de formularios CSS de 123ContactForm. Si quieres añadirle más funcionalidades a tu formulario y aprovechar nuestras opciones de personalización, puedes usar nuestro simple creador de formularios web, que no requiere ningún conocimiento técnico avanzado. Aquí hay una lista de las funciones y personalizaciones más comúnmente usadas:
Generador de Formularios CSS de 123ContactForm - Características