BlogBlogs.Com.Br Re-cursos web: Tu formulario de contacto

martes, 10 de marzo de 2009

Tu formulario de contacto

Esto pertenece a las lecciones de como crear una tienda on-line sencilla. En general cualquier sitio web suele haber un formulario de contacto para que te puedas comunicar con el administrador. Si se trata de la página de una empresa o de un negocio, más razón todavía. Blogger no tiene ninguna función propia que te permita crear un formulario de contacto así como Wordpress tiene un plugin destinado a tal fin. Para salir del paso podrías crear una entrada y usar sus comentarios como tal por ejemplo pulsando la opción de moderación de comentarios. Con lo cual antes de que sea publicado aparecerá un enlace en tu panel avisándote de que tienes nuevos comentarios para moderar y dar tu aprobación. No has de aprobar ninguno ya que no se trata de que las consultas queden registradas en tus entradas sino de mantener una comunicación privada.
Si lo que quieres es eso pues existe una segunda opción que he descartado por no querer que sean visibles los comentarios/consultas. Avisa que para contactar hay que señalar la casilla de seguimiento de los comentarios por email. Realmente para que realmente funcione como un formulario de contacto deberías de moderar los comentarios y no aprobar los de la entrada que uses como formulario, poniéndote en contacto por email con tus visitantes. En el resto de las entradas da igual. Pero si es para fines comerciales lo mejor es que no tenga comentarios visibles, pero si que halla posibilidad de hacerlos.
También existen multitud de formularios en php prefabricados a los que sólo tienes que cambiarle la parte del código donde dice cual es email receptor de los mensajes y puede que algún que otro detalle.
Pero aquí se trata sobre todo de hacerlo usando nuestro blog y sus posibilidades.
También hay algunos sitios en los que te ofrecen formularios de contacto gratuitos que puedes configurar a gusto. En dw formailer , por ejemplo, cuando terminas de crearlo te da dos opciones copiar el código embed que genera en la propia web para incrustar o bien descargarlo como archivo html, subirlo a un servidor y hacerlo visible a través de un marco (iframe) o bien poner algún link hacia la página del formulario desde tu blog. Esta es la tercera solución en caso que quieras usar algún recurso externo a tu blog.
Con varias fotos y alguna explicación os indico como crear uno de estos para cualquiera de vuestro sitios web.

Vamos a realizar un formulario sencillo sólo con lo necesario.

Debes marcar las casillas que ves en la imagen.

Diseño del formulario de contacto. Aquí le damos los estilos.

Formulario de contacto.

El còdigo que has de cortar y pegar.

Ya integrado en el blog.

Confirmación de envio.


Escoge donde pone "Form generator" en la barra lateral.
El que vamos a crear dice esto: Contact form with name, e-mail, comment, captcha.
Haz clic en el enlace.
Pon el nombre del Formulario: "Enter here the formtitle of your form!".
En "required" selecciona las cuatro casillas: sender_name, sender_mail, sender_text, captcha.
Cambia el texto de los campos del formulario (Description) que viene en ingles, por ejemplo: Your e-mail address, por "Tu dirección de email". Descubrí que el sitio estaba también castellano demasiado tarde.
En "Fieldtype" vamos a dejarlo como está puedes desplegar menús con distintas opciones, el formulario lo podremos complicar cuanto queramos, pero ahora se trata de hacer uno sencillo.
Ve al paso 3 y 4. Puedes escoger activar la seguridad SSL pero sólo funciona en la versión de pago. En el campo donde donde dice " name= recipient value= " has de poner tu email es decir el receptor a donde te llegaran los mensajes. Ve al resultado: "Go on result".
Ahora viene lo bonito en este ultimo paso es donde diseñas tu formulario con las herramientas que disponen para tal uso. Lo haremos también de manera sencilla.
Tienes un enlace parpadeante que dice que elijas tu diseño: "Select a design". A su lado un menú desplegable en el que puedes escoger entre una larga lista de modelos predeterminados. Puedes escoger uno que se adapte a los colores de tu blog y luego modificarlo con las herramientas de que dispones. Puedes escoger individualmente el tipo de fuente, color y tamaño de fuente de para diferentes partes del formulario.
Después de terminado tienes varias opciones.
Copiar el HTML generado que aparece en el área de texto debajo, copiarlo y pegarlo para incrustarlo en alguna entrada de tu blog o en un "widget" HTML/Javascript.
Puedes usar el enlace que pone: "Download [contact.html]" para descargarlo como un archivo HTML que puedes subir a algún alojamiento web por FTP y poner un link al documento desde el blog. Hacerlo visible a través de un marco ,
<ifrane src="direcciondelformulario"></iframe>, cosa que tambien puedes hacer en caso de escoger el formulario PHP como opción.
"Activate here, to save your form as a new form template!" sirve para que puedas guardar tu formulario y poder modificarlo más tarde. Has de poner una clave para poder acceder de nuevo. Al pulsar guardar el formulario aparecerá un mensaje de respuesta del sistema en letras rojas indicándote tu clave y la ID de tu formulario en azul, copia y guarda esos datos en algún lugar seguro.
Rayos he comprobado que la opción de integrarlo en una entrada no fuca. Podéis usar la versión HTML y ponerlo a través de un iframe en vuestras entradas, el HTML no está permitido y no os permite publicar la entrada sin borrar partes del código necesarias.
Los que tengáis publicidad de Adsense en vuestros blogs habéis de tener en cuenta que este al enviar los mensajes te redirige a una pagina de confirmación con publicidad de este tipo.
Según voy avanzando en el proyecto voy viendo nuevos problemas y posibles soluciones que ya os contare según vallan sucediendo. Una solución a esto podría ser crear otro blog con la misma plantilla idéntica al que le pondrías algo de texto en la primera y unica entrada y debajo el código en un gadget para HTML/Javascript que si lo admite y linkearlo desde la tienda en si. Creo que esta ultima va ser mi opción al final.
Si haceis esto os puede pasar un problema. Al pegar el código en el blog a pesar de hacerlo en un gadget de HTML en vez de una entrada os encontrareis que el estilo del formulario afecta al cuerpo de las entradas por completo. Eso es por que el código que pegáis contiene el CSS del formulario. La solución es sencilla se lo modificais en donde sea necesario o más fácil aún, lo elimináis del código. Vereis que comienza con algo como esto:
<!-- Start Code dw-Formgenerator -->
El CSS es lo que viene justo después, y empieza con la etiqueta:
<style type="text/css">
Y termina con:
</style>

Todo lo comprendido entre estas etiquetas lo borráis, etiquetas incluidas. Ahora ya no afecta para nada al estilo de vuestro blog pero funciona igual. Lo he probado y he recibido los emails correctamente. Probar a enviarme uno a traves de él, os respondere seguro.
Y este es el resultado:

Formulario de contacto sencillo basado en un blog

Volver al indice

5 comentarios:

  1. Hola
    Me gustaría poner el formulario como html entre los gadgets del foro..Es posible?

    ResponderEliminar
  2. Al menos en Blogger y en el blog que he utilizado para probar y como ejemplo lo hice en un widget html, en otras plataformas ya no te se porque depende de los códigos permitidos...

    ResponderEliminar

Haz tu comentario. Se respetuos@ que te entendemos igual. No estan permitidos comentarios anonimos.

Recomendaciones anti-spam

Hola

Bienvenidos a esta web para webmasters principiantes y de nivel medio.Esta página esta relacionada con otras que la complementan. Fondos web-Biblioteca de recursos-Trasteando- Trasteatrufa-Yohagoweb-Expertblog-Webgratis-