En el blog [Re]Encoded dot Com dejan caer la siguiente pregunta: ¿por qué es que casi todos los sitios Web, desde los mejores a lo peor de lo peor, todavía parecen estar usando el mismo feo formulario utilizados por defecto?. Con buen ánimo dicen que eso puede cambiar, al menos en nuestro sitio web.

Por lo que en el artículo Creating Killer Forms with CSS nos deja consejos para condimentar los campos de formulario para que se aparte un poco del resto. No es un tutorial sobre CSS, por lo que se parte suponiendo que tenemos cierto conocimiento sobre el tema. Es un formulario de contacto básico, que realizamos mediante CSS, para ello nos proporciona todos los códigos.

Nos muestra cómo cambiar sus diferentes aspectos: color de fondo en los campos, diferentes estilos de recuadros, color del texto, tamaño, etc. Una vez que vemos los fundamentos, ya seremos capazces de aplicar los principios para mejorar todos los aspectos de su forma. Aquí tenemos el resultado del ejemplo. ¡Suerte!

Fuente: http://www.cosassencillas.com

Parte 2

Parte 3

Parte 4

Un formulario tiene tres instancias:

• Escritura: donde se escribe el mensaje y hacemos clic en Enviar.
• Envío: donde el sistema muestra una barra de estado indicando que el mensaje se está enviando.
• Agradecimiento: donde le agradecemos a la persona por enviarnos un mensaje.

Vamos a crear cada una de estas instancias en un frame diferente, dentro de un mismo SWF.

ESCRITURA

Hagamos el primero (la escritura) incluyendo un campo para el e-mail, uno para el asunto y otro para el mensaje:

1. Crea un nuevo archivo con las dimensiones que vaya a tener nuestro formulario.
2. Nombra el archivo como formulario.fla
3. En una o varias capas genera el esquema del formulario, con el fondo, colores, bordes, etc.
4. En una capa nueva superior a la que llamaremos “formulario” escribe los títulos sobre cada campo: “e-mail”, “asunto”, “mensaje”.
5. Dentro de esa misma capa crea tres campos de texto de entrada (Input text) para cada campo.
   En el campo de mensaje puedes dar un máximo de caracteres si quieres limitar el largo del mensaje.
   Además deberías agregar un scroll bar al lado del campo del mensaje. Adobe Flash trae scroll bars en sus Componentes.
6. En esa misma capa agrega el botón Enviar.
7. También en la capa “Formulario” crea una nueva película con un mensaje de error y un texto que diga algo como “POR FAVOR COMPLETA TODOS LOS CAMPOS”. Proponemos una duración aproximada de 15 frames.
   a) El primer frame déjalo vacío, con la acción stop().
   b) En el segundo frame crea el mensaje de error, justo al lado del botón Enviar.
   c) Crea un nuevo fotograma clave en el frame 5, también con la acción stop().
   d) Crea un nuevo fotograma clave en el frame 15 donde el mensaje se vea invisible.
   e) Genera interpolación de movimiento y listo… ¡Ya tenemos el mensaje de error!
8. El código lo dejamos para el final…

ENVÍO

En el segundo frame vamos a hacer la instancia donde se muestra el envío del mensaje. Sólo deberás agregar:

1. Un texto que indique que el mensaje se está enviando.
2. Una animación se mueva para ilustrar la acción.

AGRADECIMIENTO

Sólo mostrarás un mensaje que indique que el mensaje ya ha sido enviado.

Código rapidito en Flash

Tenemos todo listo, sólo falta agregar el código para que las acciones se disparen y funcione el envío del mensaje. Primero vamos a ponernos de lleno con el código dentro del archivo FLA.

Primero démosle nombres a nuestros huérfanos símbolos:

• Campo de texto para ingreso de email: email_box
• Campo de texto para asunto: subject_box
• Campo de texto para mensaje: message_box
• Botón Enviar: send_btn
• Película con mensaje de error: error_clip

Finalmente, crea una nueva capa (la nombramos “acciones”). Lo único que va a tener esta capa son acciones en el primer fotograma.

En el campo donde se pide el nombre de la Variable, destilda la opción Expression y escribe:

email_box.onSetFocus

En el campo donde se pide el nombre del Valor (Value), tilda la opción Expression y escribe:

subject_box.onSetFocus=message_box.onSetFocus=function

Ahora el código:

stop();send_btn.onRelease = function() {my_vars = new LoadVars(); my_vars.sender = email_box.text;

my_vars.subject = subject_box.text; my_vars.message = message_box.text;

if (my_vars.sender != "" and my_vars.subject != "" and my_vars.message != "") { 	my_vars.sendAndLoad("mailer.php", my_vars, "POST");

gotoAndStop(2); } else {

error_clip.gotoAndPlay(2); }

my_vars.onLoad = function() { 	gotoAndStop(3);

};};

email_box.onSetFocus = subject_box.onSetFocus=message_box.onSetFocus=function () { if (error_clip._currentframe != 1) {

error_clip.gotoAndPlay(6); }

};

Código en PHP (cuesta más)

Ahora la idea es relacionar es hacer que el archivo SWF realmente envíe el formulario. Para eso vamos a usar PHP…

¿Creían que los iba a hacer sufrir con PHP? A continuación, todos los archivos para que descargues, incluyendo el .PHP. Abre el archivo que está comentado así puedes entender qué hace cada parte del código. Todos los archivo se alojan en el mismo lugar.

Haz clic para descargar el ZIP con el archivo FLA en versión MX »
El ZIP (43 KB) contiene los archivos formulario.fla, formulario.swf, mailer.php
Todos los archivos son adaptaciones de los archivos originales que provee Flash App Servers.

Si tienes problemas con el archivo FLA en versión MX, descarga aquí el ZIP con los archivos en versión CS3 »

Antes que te vayas, un adelanto aproximado de cómo quedaría tu formulario de contacto.

En los archivos puedes realizar varias modificaciones, para empezar todo lo que tiene que ver con tamaños, colores, tipografías y textos, agregar una foto de fondo, el logo de tu empresa. Puedes incluso cambiar el mensaje de error, la película que muestra el progreso del envío, establecer un número máximo de caracteres…

Sin embargo, el nombre de los componentes y símbolos está relacionado con el código y el envío del formulario por lo que no es recomendable hacer modificaciones ahí.

FUENTE: Elwebmaster.com

Enlace | Detalles y demo, Descarga ejemplo

Lo primero que debemos de saber es cuales son los elementos que podemos añadir a nuestro fomulario, para ello podemos ir panel formularios de nuestro dreamweaver, aquí podemos verlos:

Ahora vamos a explicarlos brevemente,  el primer icono que nos aparece (con rayitas discontinuas rojas) es el que indica donde empezara y donde acabara nuestro formulario, estas rayitas al ver nuestra web no se verán, tan solo aparecen en el dreamweaver para poder guiarnos. Todos los demás elementos han de estar dentro de un formulario para que funcionen.

Si después de crearlo ponchamos sobre la rayita roja, se nos abrirá el panel de propiedades para editarlo. Podremos editar:
Nombre del formulario: aquí ponemos el nombre para recordar el formulario
Accion: aquí pondremos o elegiremos el archivo al que va a ir después de enviar el formulario
Método: el método con el que se van a pasar los datos, normalmente se usa POST
Dest: lo normal es que lo dejemos vacío, pero si por ejemplo queremos que al dar a enviar se haga todo en una nueva ventana elegimos_blank

Campo de texto

El primer elemento de formulario que vemos, es un campo de texto, este sirve para que el usuario escriba en el.
En su panel de propiedades podemos editar: su nombre, el ancho, el largo, el numero de caracteres máximo, si queremos que sea de contraseña, y si queremos que aparezca algo escrito inicialmente.

Campo oculto

Es un campo oculto (que no se ve en el formulario) y nos vale para añadir datos sin que el usuario lo vea

Casilla de verificación y Botón de opción
La diferencia entre estos dos elementos es que en las casillas de verificación, podemos poner una lista y elegir varios elementos de la lista, mientras que en el botón de opción tan solo podremos elegir uno u otro.

Lista/menú

Este elemento sirve para que el usuario elija uno, o varios, elementos de los que nosotros ponemos en esa lista. Por ejemplo, cuando elegimos nuestro país o provincia en un formulario de registro.

Botones

Los botones sirven o bien para enviar el formulario o para restablecer los datos del formulario y que vuelvan a ponerse como estaba inicialmente antes de que el usuario haya escrito nada. Estas opciones podemos elegirlas en el mismo panel de propiedades, así como el nombre que aparecerá dentro del botón, que debemos escribirlo en el campo que pone “value”.

Ahora ya sabemos que es, y como debemos hacer un formulario, e de recalcar que todos los elementos de un formulario han de estar dentro de el para que funcione (dentro de la linea roja discontinua), se que esto es sencillo, pero a veces a la gente se le pasa y no sabe porque no le funciona su formulario

-galeria de plantillas para webs
-traffic boost(ni idea…jajaa de apoco ire revisando)
-Salas de chat
-formularios de contacto
-tell-a-friend (recomienda esta web)
-affiliate program
-search engine tools
-mini tools
-horoscopo
-comics
….blog, classifieds, e-cards, faq service, free links, guestmap, guestbook, headline news, hit counter, horoscope, mailing list, message forum, online calendar, password protect, photo album, redirect, site search, this day in history, traffic exchange, vote caster, web cartoon, web poll(encuestas), web ring.
y muchas otras cosas para que agregues a tu blog….
Para tener esto, solo hay que pinchar en los iconos y listo, comenzaremos con la explicación del formulario:

PASO 1: Obtener la cuenta: Crea tu Cuenta

PASO 2: INSTALAR EMAILS FORM Una vez que tengan su cuenta, veran el siguiente panel de control, deben seguir las instrucciones que hay en cada imagen:

PASO 3:Ahora para personalizar el formulario de contacto vamos a forms builder.

PASO 4:Este paso lo pueden hacer despues, justo debajo de forms builder, (General Settings) esta la parte en donde configuramos el nombre del mail, y la redireccion del navegador, como se muestra aqui.

PASO 5:Pinchamos sobre contact form, para crear un formulario de contacto, pero como ven hay varios tipos de formularios, solicitudes de ordenes y otros.

PASO 6:Escribir el Nombre del Formulario (después lo pueden cambiar)

PASO 7:Se muestra el formulario que viene por defecto, si no quieren hacer mas cambios, pueden obtener el codigo y listo….copiarlo en la plantilla del blog, y ya estaria casi funcional, solo falta agregar una linea de codigo que indica el mail de llegada. Como se muestra aqui se pincha en el link de la izquierda para editar los campos del formulario

PASO 8:Esta es la lista con todos los campos del formulario, si quieren pueden agregar mas preguntas como lo indico en la imagen

PASO 9:editamos el primero, el que corresponde al nombre, aqui se identifican varias cosas:
Question: generalmente corresponde al nombre, en realidad puede ser cualquier cosa
Field Name: en esta parte deben tener cuidado, es solo un identificador del campo anterior, y no debe tener espacios
Posicion de la Pregunta: sobre el campo de respuesta o a la izquierda (como viene por defecto)
Orden de las preguntas: es para ver en donde va ese campo, antes del mail, despues del mail….
Tipo de pregunta: se refiere si es texto, o un area de texto, o una casilla de verificacion…y otros…
200: corresponde al ancho, solo lo varian segun como lo quieran. Y eso es todo graban los cambios y hacen lo mismo para los otros dos campos..

PASO 10:Estamos listos, solo falta tener el codigo y grabar

PASO 11:Ahora nos vamos a forms tutorials (que esta en el menu principal de los formularios), ya que falta agregar otro código en la plantilla. Este codigo es el que nos dice a donde llega el mail, deben agregarlo como lo muestran las siguientes figuras:

En vez de yourname@yourdomain.com ponen su email, por ejemplo en mi caso sería patty@gmail.com

El código del formulario, para mi caso, es este que copio abajo, hay algunas cosas que pueden editar a gusto, como los botones.

Esta corresponde a la parte de los Botones:

Yo centre los botones y les cambie nombre, el código quedo asi:

PASO 12:Ubicamos la Sidebar o barra lateral en la plantilla y copiamos el codigo, en cualquier parte debajo de este (si tienes dudas revisa:
Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Classic-Blogger
Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Blogger
Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Wordpress

En el caso de Blogger:

PASO 13:Aqui ya esta copiado, y como muestra la figura, el codigo de antes (mailto), lo copiamos en donde indico

PASO 14:Quedaria Asi

PASO 15: Guardamos los cambios
Para Blogger:

PASO 16: Aqui el formulario ya esta funcional

PASO 17: Lo completamos y enviamos

PASO 18: Pantalla que verifica si los datos son correctos

PASO 19: Asi llega el mail, como ven en el subject dice Ayuda para tu blog que es lo que seteamos en el paso 4

PASO 20: Asi se ve la info en el mail

Lo explique paso a paso, para que quedara perfectamente claro, asi que no creo que tengan dudas..espero les guste, de ahi seguire con las otras funcionalidades que tiene Este servicio, probablemente con el tell a friend, que sirve para recomendar la web a alguien, escribiendo el mail de la persona solamente.

Dim ObjetoMail
‘ Creamos el CDO
Set ObjetoMail=CreateObject(“CDO.Message”)
‘ …
‘ Destruimos el CDO
Set ObjetoMail=Nothing
%>

El objeto incluye como propiedades, los campos mas comunes para un email, como pueden ser:

To – Cadena que contiene el email del destinatario
From – Email del emisor del mensaje
Subject – Asunto del email enviado
Cc – Email o emails donde enviar copia
Bcc – Email o emails donde enviar copia oculta
TextBody – Cuerpo en texto plano del mensaje
HTMLBody – Cuerpo en formato HTML del mensaje
CreateMHTMLBody – Página HTML a enviar como cuerpo del mensaje en formato HTML
AddAttachment – Archivo adjunto al mensaje enviado

Veamos un ejemplo de cómo usaremos este objeto para enviar un email en formato HTML a un destinatario:

<% Option Explicit
‘ Declaramos las variables
Dim ObjetoMail
‘ Creamos el CDO
Set ObjetoMail=CreateObject(“CDO.Message”)
‘ Configuramos el email
ObjetoMail.To = ” usuario@miweb.com ”
ObjetoMail.From = “PWeb < ne@pweb.net >”
ObjetoMail.Subject = “Asunto del mensaje”
ObjetoMail.HTMLBody = “Soy el cuerpo del <b>mensaje</b>”
‘especificamos la configuracion de envio en particular
ObjetoMail.Configuration.Fields.Item (“http://schemas.microsoft.com/cdo/configuration/sendusing”) = 2
ObjetoMail.Configuration.Fields.Item (“http://schemas.microsoft.com/cdo/configuration/smtpserver”) = “mail arroba unlugar.com”
ObjetoMail.Configuration.Fields.Item (“http://schemas.microsoft.com/cdo/configuration/smtpserverport”) = 25

ObjetoMail.Configuration.Fields.Update ‘ Enviamos el mensaje
ObjetoMail.Send
‘ Destruimos el CDO
Set ObjetoMail=Nothing
%>

Este es un ejemplo sencillo que podremos configurar ampliamente para mandar emails a nuestros visitantes para recuperar contraseñas, avisar de mensajes y contenidos nuevos… hemos visto como usamos.
HTMLBody para definir el cuerpo del mensaje, pero si queremos enviar un mensaje en texto plano, usaremos TextBody. Asimismo, si queremos enviar el email en formato HTML pero queremos que el cuerpo del email sea un determinado documento HTML, entonces usaremos CreateMHTMLBody en lugar de HTMLBody:

<% Option Explicit
Dim ObjetoMail
Set ObjetoMail=CreateObject(“CDO.Message”)
ObjetoMail.To = ” usuario@miweb.com ”
ObjetoMail.From = “PWeb < ne@pweb.net >”
ObjetoMail.Subject = “Asunto del mensaje”
ObjetoMail.CreateHTMLBody = ” http://w3c.com ”
ObjetoMail.Send
Set ObjetoMail=Nothing
%>

Vamos a ver cómo podemos añadirle un archivo adjunto a este email gracias al método AddAttachment:

<% Option Explicit
Dim ObjetoMail
Set ObjetoMail=CreateObject(“CDO.Message”)
ObjetoMail.To = ” usuario@miweb.com ”
ObjetoMail.From = “PWeb < ne@pweb.net >”
ObjetoMail.Subject = “Asunto del mensaje”
ObjetoMail.CreateHTMLBody = ” http://w3c.com ”
ObjetoMail.AddAttachment “c:\mydocuments\prueba.txt”
ObjetoMail.Send
Set ObjetoMail=Nothing
%>

Esta parte es sumamente sencilla solo tienes que agregar cuatro campos de texto estáticos y en ellos introducir las siguiente frases Nombre, Empresa, Correo Electrónico y Mensaje el formato de letra y color te lo dejo a tu elección.

Espero que esta pare no sea muy complicada, ahora hay que agregar cuatro campos de texto vacíos lo suficiente mente anchos. Estos deben de tener algunas características especiales como son el tipo te texto debe de ser Introducción de texto, se tiene que nombrar el nombre de instancia el cual va a hacer nombre_txt, el tipo de línea tiene que ser Línea Única y por ultimo seleccionar Mostrar borde alrededor del texto. Hay que insertar dos campos de texto con este tipo de característica, en los cuales solamente cambiaremos el nombre de instancia, esto lo explicare a continuación.

Agregar el segundo campo de texto y cambiar el nombre de instancia de nombre_txt por el de empresa_txt

Incertar el terser campo de texto y cambiar el nombre de instancia empresa_txt por el de email_txt

En el cuarto campo de texto cambiar el nombre de instancia email_txt por el de mensaje_txt también se hará una pequeña variación en el tipo de línea el cual cambiara de Línea única a Multilínea. Este campo de texto debe de ser un poco más agrande que los anteriores esto es con el fin de que los interesados escriban su mensaje tal como se muestra en la imagen.

Ahora insertar un campo de Texto dinámico el cual llevara como nombre de instancia servidor_txt el tipo de línea será Línea única y en la casilla Var: escribir mailerStatus. En este campo aparecerá una leyenda si es que hay problemas con el servidor.

Si sedan cuenta hasta esta parte todo el proceso se desarrolla en una sola capa en un solo frame y en la escena. Lo que sigue también esta un poco laborioso pero no complicado.

A continuación insertar un nuevo símbolo ya saben la ruta del dinero ctrl.+F8 nombrarlo botón y de comportamiento Clip de película. Este símbolo servirá para dos botones uno de enviar y el otro de cancelar.

En el símbolo botón dibujar un rectángulo de color blanco y con dimensiones 75 de ancho por 25 de alto las coordenadas con X=0 y Y=0

Arrastrar el símbolo botón hacia la escena y en nombre de instancia escribir enviar_btn, aquí adecuaremos las dimensiones de nuestro botón así como las coordenadas el tamaño es 55*20 y coordenadas X=415 y Y=165

Arrastramos nuevamente el símbolo hacia la escena cambiar el nombre de instancia por el de borrar_btn, cambiar las dimensiones a 55*20 y las coordenadas X=487 yY=165

Este paso es sumamente sencillo y fácil de realizar hasta el compañero diseñador de photoshop lo pudo hacer jajajaja en fin. Solamente agregar un texto que diga enviar y otro que diga cancelar cada uno en sus respectivos botones.

Por último agregar el código para que funcione el formulario de contacto, seccionar el frame abrir el panel de acciones y escribir:
enviar = function () {
if (email_txt.text.length && nombre_txt.length && empresa_txt.length && mensaje_txt.length) {
if (email_txt.text.indexOf(“@”) != -1 && email_txt.text.indexOf(“.”) != -1) {
form_lv = new LoadVars();
form_lv.nombre = nombre_txt.text;
form_lv.mail = email_txt.text;
form_lv.mensaje = mensaje_txt.text;
form_lv.empresa = empresa_txt.text;
form_lv.sendAndLoad(“send.php”, form_lv, “POST”);
servidor_txt.text = “Enviando Mensaje..”;
nombre_txt.text = “”;
email_txt.text = “”;
empresa_txt.text = “”;
form_lv.onLoad = function() {
if (this.estatus == “ok”) {
servidor_txt.text = “Tu mensaje fue enviado…”;
nombre_txt.text = “”;
email_txt.text = “”;
empresa_txt.text = “”;
} else {
servidor_txt.text = “Problemas con el servidor.”;
}
};
} else {
email_txt.text = “Correo Invalido”;
}
} else {
email_txt.text = “Dato Necesario”;
nombre_txt.text = “Dato Necesario”;
empresa_txt.text = “Dato Necesario”;
mensaje_txt.text = “Dato Necesario”;
}
};
borrar = function () {
nombre_txt.text =”";
empresa_txt.text =”";
email_txt.text =”";
servidor_txt.text =”";
};
enviar_btn.onRelease = enviar;
borrar_btn.onRelease = borrar;

1. FormSpring: Entra en FormSpring y crea una nueva cuenta de usuario gratuita (versión Free). En pocos segundos recibirás un email de activación de la cuenta y después podrás loguearte en la web.
   Crea un nuevo formulario y completa los 4 pasos, introduciendo el nombre del formulario y eligiendo alguno de los modelos prediseñados, o bien, el formulario en blanco.
   Añade o elimina los campos que necesites.
   Elige alguna de las plantillas de estilos disponibles y establece el momento de desactivación del formulario. Selecciona “Never” (por defecto) si quieres que el formulario esté siempre disponible.
   En la parte izquierda de la página siguiente, haz click sobre el formato que desees, ya sea un enlace de texto hacia la página externa del formulario, un script embed (funciona al incluirlo en un post en el modo de edición HTML), un código HTML y un formulario intermediario. Las dos últimas opciones requieren conocimientos de HTML.

2. 123 Contact Form: Regístrate como usuario en 123 Contact Form y accede con tu nombre de usuario y contraseña.
   Haz click en la pestaña “Create new form” y configura las opciones del nuevo formulario.
   Edita, elimina o inserta los campos que estarán disponibles.
   En el siguiente paso, elige el theme que prefieras y el logo en caso de que no hayas subido tu propia imagen en el primer paso.
   El primer código corresponde al enlace hacia el formulario alojado en 123 Contact Form y el segundo, es el que puedes copiar y pegar en tu post para integrarlo de forma directa.

3. Kontactr: Al igual que en los casos anteriores, lo primero que tienes que hacer es entrar como usuario registrado.
   Ahora basta con que sigas los pasos mostrados por el servicio para crear una página de contacto predefinida. Al final, te aparecerán dos widgets en formato HTML y Javascript. El primero es el ideal para pegarlo en tu post de Blogger.
   En el pie de página hay 3 formatos disponibles para enlazar hacia la página de contacto externa de Kontactr.

4. My Contact Form: Crea una nueva cuenta de usuario en Mycontactform.com y haz login.
   Sigue el tutorial para generar un nuevo formulario haciendo click en “New Contact Form Wizard”.
   Introduce todos los datos del formulario: nombre, dirección url donde vas a insertarlo, formato del mensaje, diseño… hasta completar los 14 pasos (no te asustes, tardarás menos de 5 minutos en hacerlo).
   Cuando finalice el proceso, dirígete a la sección lateral derecha “Form Management” y en la línea de botones del formulario haz click sobre “Get HTML” para obtener el código del mismo.

5. Page Pow Contact Us: Nuevamente, regístrate como usuario del servicio y accede con tus datos de usuario.
   En la página principal, haz click sobre “view all widgets” y posteriormente en “Contact us”
   Rellena todos los campos para obtener el formulario. Este servicio es bastante peculiar en comparación con el resto de sitios analizados, ya que el formulario no se incrustará como tal en la página, sino que aparecerá un enlace de texto sobre el que hacer click, apareciendo el formulario con un suave efecto similar al lightbox.
   Sin duda, es la mejor opción para insertarlo en la barra de navegación o en el sidebar.
6. EmailMe Form: Elige un nombre de usuario y una contraseña para registrarte y acceder al sistema.
   Después haz click sobre “Form Wizard” para utilizar el asistente.
   Por defecto, este servicio sólo permite añadir 4 campos en el formulario final, que obtendrás al completar todos los pasos del proceso.
   Cuando finalice el asistente encontrarás un código para añadir un enlace que apunte hacia el formulario de contacto generado. No obstante, también puedes hacer click en “Get the HTML Code” y obtener el código directamente para insertarlo en tu sitio.

Fuente: creatublog.grupoblogperu.com