Como hacer un formulario de contacto con el CoffeeCup Web Form Builder 8.1.

206
By Damin Lasso 2010

Intro El contenido que les presento en esta gua es algo que me qued pendiente, algo que es fundamental y primordial en nuestro entorno Web o ms bien, algo que tiene que existir en nuestro sitio Web para que cualquier persona que visite el sitio y nos quiera contactar, lo haga de una forma rpida y cmoda. Obviamente asumo que ya construiste tu propio sitio web, registraste una cuenta en un hosting, registraste un nombre de dominio y lo delegaste, y finalmente subiste tu sitio Web al hosting utilizando el Filezilla, pasaron las 48hs y ahora est online. Asumo que hiciste todo eso con el curso Web presentado en www.weblight.com.ar . Porque lo asumo? Porque este es un excelente complemento para un trabajo realizado precisamente con ese antecedente y con el Web Page Maker, esta gua esta orientada a complementar toda esa info. Contenido EL software Web Form Builder, de la firma CofeeCup, es un software que nos permite crear cualquier tipo de formulario basndose en Flash y en PHP. Lo fundamental es que no necesitamos saber nada de programacin ni cdigos ni nada de eso, solo con tener un poco de criterio y sentido comn suficiente. Un formulario, en este caso y ya que el software utiliza Flash y PHP, est compuesto por varios archivos. Un sitio Web como www.weblight.com.ar por ejemplo, como ya aprendiste tambin est compuesto por varios archivos; archivos de pginas Web con cdigos, archivos de imgenes y de varias cosas que al verlas adecuadamente con el browser cuando navegamos, tienen forma de pgina Web con cada cosa en su lugar. A lo que voy es que hay que saber desde este momento, que cuando hayamos realizado el formulario vamos a tener un grupo de archivos, no uno solo, un grupo de archivos con diferentes extensiones que posteriormente tendremos subir al hosting (precisamente a la carpeta public_html) para que el formulario funcione correctamente en el sitio Web. Por eso vamos a tener que ir creando una carpeta limpia en nuestro equipo, para posteriormente alojar los archivos del formulario, con el nombre que quieras, por ejemplo form. Bien, as como con el Web Page Maker, con este software podemos utilizar diseos premoldeados, plantillas, temas, themes, o como se conocen ms comnmente; templates. As que ms fcil an. Teniendo en cuenta que ya tenemos el soft instalado en nuestro equipo, lo primero que hacemos es ejecutarlo; Si utilizas la misma versin que yo se te abrir en primera instancia un panel de templates

Claro, clikeando sobre el men de la izquierda podremos optar por varios diseos. En este momento no me interesa iniciar mi diseo en base a un template de estos, entonces clikeo en Cancel

Y si no quieren que aparezca ms ese panel proveedor de templates al comienzo, simplemente hay que tildar el cuadradito ese sobre la izquierda donde dice Don`t show this Window on startup again (no mostrar esta ventana al inicio nuevamente). Luego de cerrar ese panel, vemos que sobre el entorno de diseo aparece otra ventana titulada Quick Tips

No sirve para nada, la cerramos y si quers destild ese cuadradito para que no aparezca nunca ms Nota; resulta que la mayora de los programas suelen traer siempre las Tips (consejos para aprender o familiarizarse con el software) y siempre por default, estn configurados para que aparezcan al inicio del programa. En este momento no voy a ver nada de eso, encima en esta versin (como en cualquiera que este en ingles) los tips estn en ingles Cerramos esa ventana de Quick Tips y vemos que obligatoriamente se nos abre en el panel de edicin (ide), un template bsico

El entorno de trabajo es sper cmodo, cuenta con un men rpido de conos, el men desplegable habitual y luego, debajo tenemos el diseo. Sobre la derecha siempre vamos a tener las caractersticas o propiedades editables de los elementos con que estemos trabajando en el diseo. Justamente ah a la derecha, donde vemos que en la solapa dice Form Settings tenemos las propiedades globales del formulario y al seleccionar algn elemento del diseo en el que estamos trabajando (como por ejemplo una palabra, botn, etc.) vamos a ver que se despliega, sobre la derecha

tambin y debajo de las caractersticas globales del form (formulario), un panelcito con las propiedades editables del elemento que hemos seleccionado. Por ejemplo, si clikeo sobre el botn de enviar mensaje del template, se me abre lo siguiente;

Es muy fcil de utilizar, manosealo, clike sobre los diferentes elementos y fijate de qu forma podes modificarlos para acomodarlos a tu necesidad. Si quers podes clikear incluso sobre los elementos ubicados en el diseo y eliminarlos con supr, podrs moverlos, redimensionarlos y hacer todo como si fuera un elemento de un proyecto del Web Page Maker buensimo!! Y si quiero hacer un diseo desde la nada misma?? Vamos a File / New como en cualquier otro soft.

Ah siempre vamos a tener la opcin de comenzar desde cero o partiendo desde un theme (tema) o template. Y luego, para comenzar de cero, tenemos para servirnos, en el men de iconos, una buena variedad de elementos que podremos llegar a necesitar

De ese men nos servimos y creamos lo que sea. Fijate que hasta tens para ponerle una proteccin Captcha para evitar bots spammers.

Pero bien, volvamos a un diseo premoldeado ya que quiero mostrarte lo fundamental de todo este asunto, cmo hacer que funcione luego de que ya lo tenemos diseado. Lo de analizar y ubicar cada elemento de los que nos podemos proveer en ese cmodo men, te lo dejo a vos vas a ver que es fcil siempre record que las propiedades de los elementos que utilices en el diseo, se despliegan para su edicin a la derecha. Direccin de E-Mail destino Una vez que tengo el formulario diseado, en este caso un template, tengo que decirle a qu direccin de mail debe enviar los mensajes. Para eso, y para algunas cosas ms, vamos al men; Edit / Form Settings

Y en la primer solapa llamada Form Results tildamos donde vemos en la siguiente imagen que corresponde y luego completamos con la direccin de E-Mail que escojamos como destino de los mensajes en esa solapa nada ms ni nada menos que eso

En la segunda solapa, Form Submission, tildamos en Redirect to Website address como en la siguiente imagen, tildamos en ese lugar para que cuando alguien enve un mensaje desde nuestro sitio Web, luego del envo del mensaje se abra una nueva pgina de agradecimiento o de confirmacin, una pgina que ya tendremos hecha previamente o simplemente que vuelva a index.html

Como vemos, en este ejemplo, en la imagen anterior, configur esa solapa para que luego del envo del mensaje se realice un redireccionamiento a mi pgina llamada gracias.html. La otra opcin llamada Create a custom page es para crear mediante un cdigo HTML una pgina nueva con algn mensaje de confirmacin. Si no toco nada y dejo tildado en Create a custom page no pasa nada ya que hay un cdigo escrito por default, simplemente cuando el visitante enve un mensaje desde el form, se le abrir una pgina prediseada con una leyenda en ingles que dice que el mensaje fue enviado correctamente. En esa solapa llamada Form Submission no toco nada ms. Luego ya est, no toco ninguna solapa ms, lo nico que hay que tocar es el siguiente botn...

Obviamente que se pueden configurar muchas cosas ms, en esta gua solo explicar las cosas fundamentales y bsicas para que tu formulario funcione. Como se habrn dado cuenta al principio si es que toquetearon un poco, sobre el panel de propiedades globales del form que est sobre la derecha, tambin pudimos haber accedido a la configuracin de esas solapas

Perfecto !! ya tenemos configurado el form para que enve el mensaje a nuestro mail. Subir el form a nuestro sitio Web Ahora como lo subimos a nuestro sitio Web? Clikeamos en Save y luego guardamos el form como cualquier otra cosa

Como siempre, ya lo aconsej, ya tens que tener una carpeta limpia creada para el proyecto o trabajo a realizar

Guardamos el form en esa carpeta y luego aparecer lo siguiente;

En esta ventana tenemos 2 partes. 1-> El grupo de archivos que tenemos que subir al hosting. 2-> El cdigo que debemos insertar en la pgina en donde aparecer el form. 1- Este soft te da la posibilidad de conectarte al hosting como cliente FTP, por eso vemos el botn Upload Now. No vamos a utilizar eso ya que lo vamos a hacer de la forma tradicional, claro, con el Filezilla.

Ese grupo de archivos, desde el momento en que clikeamos Save en el momento de guardar, osea en el paso anterior, ya se gener en la carpeta que llam form. As que con ese costado no vamos a hacer nada, la parte nmero 1 de esa ventana no nos sirve. Ok, hasta este punto diseamos el form, le indicamos cual es la direccin de E-Mail destino y el programa nos gener un grupo de archivos en la carpeta elegida. 2- Al cdigo que tenemos en la parte nmero 2 debemos copiarlo. Listo, ya podes cerrar esa ventana e incluso el programa editor de formularios si quers Luego, vamos al proyecto del Web Page Maker, al men y clikeamos donde indico en la siguiente imagen

Y pegamos el cdigo en esa ventana

Y nos quedar algo as

Ahora debemos darle el tamao adecuado al cuadro donde la pgina cargar el form, si, en ese cuadro violeta llamado HTML (que contiene el cdigo) es donde el browser cargar el form cuando el visitante ingrese a esa pgina. Si lo dejamos as, es muy probable que se vea solo un extremo del form en pgina, pero Cmo sabemos el tamao adecuado que debemos darle al cuadro del HTML? Bien, en el editor de formularios podemos ver exactamente el tamao de nuestro diseo. Claro, en las propiedades globales del formulario encontraremos sus dimensiones. Si lo cerraste abrilo nuevamente y abr el trabajo que acabamos de hacer que qued guardado en la carpeta que yo llam form. Si, el trabajo ya qued guardado en la carpeta form y podemos abrirlo nuevamente cuantas veces queramos para reeditarlo o adaptarlo a nuevas necesidades. Ahora que abriste o que te paraste en el Form Builder, fijate las medidas de ancho y altura

Ahora anotamos o memorizamos esas medidas y volvemos al Web Page Maker, nos paramos sobre el cuadro HTML con un clik izquierdo y luego le damos otro nico clik con el botn derecho y seleccionamos propiedades

Y pegamos o anotamos manualmente esas medidas en donde corresponde

Y nos queda el cuadro del tamao perfecto para mostrar el form completo cuando visiten la pgina.

Luego de que ubicamos el cuadro HTML con su cdigo en el lugar exacto que elegimos, procedemos a exportar a HTML como hacemos con cualquier otro proyecto Web, para generar los HTML y dems archivos que posteriormente subiremos al hosting. Listo, perfecto. Por un lado tenemos los archivos generados en la carpeta form y por el otro tenemos el cdigo insertado en el lugar elegido de la pgina Web en donde queremos que aparezca. Ahora hay que subir el formulario al hosting donde tenemos alojado el sitio Web. Subir el form Es muy fcil, por lo menos decirlo si che, es fcil hacerlo tambin. Si ya subimos un sitio Web, podremos subir un formulario de contacto. Tambin asumo que vamos a subir la versin actualizada del sitio Web con el form de contacto o por lo menos la nueva pagina contenedora del formulario (esos archivos que creamos al exportar a HTML). Abrimos el Filezilla, nos conectamos con el hosting y como bien hicieron en un momento, subimos todos los archivos que hay en la carpeta form y los HTML de la nueva pgina (que los debemos haber exportado a otra carpeta), subimos todos esos archivos a la carpeta public_html presente en el hosting. A ver si nos entendemos, y eso que no te estoy viendo cmo lo haces a ver si nos entendemos; Por un lado creamos el formulario de contacto con el C. Form Builder. Al crear un form se nos generaron varios archivos en la carpeta en donde guardamos el form, en este caso en la carpeta que llam form. Tambin se gener un cdigo que es el que debimos copiar o anotar. Y por otro lado cre una nueva pgina, un nuevo proyecto del Web Page Maker o abr uno viejo para actualizarlo. Luego insert en ese proyecto el cdigo del form (cdigo que copi o anot previamente) y redimension el cuadro HTML para que al funcionar la pgina, se vea completa y no parcialmente. Gener 2 grupos de archivos. Un grupo en la carpeta form, obviamente los correspondientes al form, y otro grupo con los HTML y dems archivos del proyecto del Web Page Maker, Todos esos archivos los arrastr a la carpeta publc_html, al hosting, y una vez subidos ya debera funcionar. Eso es todo, xitos con tu formulario!! Damin Lasso www.weblight.com.ar & www.ledfacil.com.ar