Crea un Formulario de Contacto para tus visitantes
Posted By admin On 1 November 2006 @ 17:30 In Formularios,Personaliza Código,Plantillas,Servicios para Blogs | 58 Comments
Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress…) o Página web.
Este servicio [1], es muy bueno además del formulario de contacto, tiene muchas otras cosas gratis:
-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:(mediante este link=Crea tu Cuenta [1],)
[2]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:
[3]
[4]
[5]
[6]PASO 3:Ahora para personalizar el formulario de contacto vamos a forms builder.
[7]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.
[8]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.
[9]PASO 6:Escribir el Nombre del Formulario (después lo pueden cambiar)
[10]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
[11]PASO 8:Esta es la lista con todos los campos del formulario, si quieren pueden agregar mas preguntas como lo indico en la imagen
[12]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..
[13]
[14]
[15]
[16]
[17]
[18]
[19]
[20]
[21]PASO 10:Estamos listos, solo falta tener el codigo y grabar
[22]
[23]
[24]
[25]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:
[html]
[/html]
Esta corresponde a la parte de los Botones:
[html]
[/html]
Yo centre los botones y les cambie nombre, el código quedo asi:
[html]
[/html]
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 [27]
Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Blogger [28]
Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para WordPress [29]
En el caso de Blogger:
[30]PASO 13:Aqui ya esta copiado, y como muestra la figura, el codigo de antes (mailto), lo copiamos en donde indico
[31]PASO 14:Quedaria Asi
[32]PASO 15: Guardamos los cambios
Para Blogger:
[33]PASO 16: Aqui el formulario ya esta funcional
[34]PASO 17: Lo completamos y enviamos
[35]PASO 18: Pantalla que verifica si los datos son correctos
[36]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
[37]PASO 20: Asi se ve la info en el mail
[38]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 [1], probablemente con el tell a friend, que sirve para recomendar la web a alguien, escribiendo el mail de la persona solamente.
Espero les sirva
Article printed from Ayuda Para tu Blog y Tips para Facilitar tu Vida: http://ayudaparatublog.com
URL to article: http://ayudaparatublog.com/crea-un-formulario-de-contacto-para-tus-visitantes/
URLs in this post:
[1] Este servicio: http://ayudaparatublog.com/services/bravenet
[2] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_2.jpg
[3] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_3.jpg
[4] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_4.jpg
[5] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_5.jpg
[6] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_6.jpg
[7] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_7.jpg
[8] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_8.jpg
[9] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_9.jpg
[10] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_10.jpg
[11] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_11.jpg
[12] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_12.jpg
[13] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_13.jpg
[14] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_14.jpg
[15] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_15.jpg
[16] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_16.jpg
[17] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_17.jpg
[18] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_18.jpg
[19] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_19.jpg
[20] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_20.jpg
[21] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_21.jpg
[22] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_22.jpg
[23] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_23.jpg
[24] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_24.jpg
[25] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_25.jpg
[26] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_26.jpg
[27] Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Classic-Blogger: http://ayudaparatublog.com/donde-debo-pegar-el-codigo-de-algo-para-que-quede-en-la-sidebar-classic-blogger/
[28] Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para Blogger: http://ayudaparatublog.com/donde-debo-pegar-el-codigo-de-algo-para-que-quede-en-la-sidebar/
[29] Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla para WordPress: http://ayudaparatublog.com/donde-debo-pegar-el-codigo-de-algo-para-que-quede-en-la-sidebar-wordpress/
[30] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_27.jpg
[31] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_28_beta.jpg
[32] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_29_beta.jpg
[33] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_30.jpg
[34] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_33.jpg
[35] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_34.jpg
[36] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_35.jpg
[37] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_36.jpg
[38] Image: http://ayudaparatublog.com/wp-content/uploads/2006/11/formulario_contacto_blog/formulario_contacto_blog_37.jpg
Click here to print.