Crea un Formulario de Contacto para tus visitantes

Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress…) o Página web.

formulario_contacto_blog_1.jpg

Este servicio, 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,)

formulario_contacto_blog_2.jpg

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:

formulario_contacto_blog_3.jpg

formulario_contacto_blog_4.jpg

formulario_contacto_blog_5.jpg

formulario_contacto_blog_6.jpg

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

formulario_contacto_blog_7.jpg

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.

formulario_contacto_blog_8.jpg

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.

formulario_contacto_blog_9.jpg

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:

  1. <form method="post" action="mailto:yourname@yourdomain.com">

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

formulario_contacto_blog_26.jpg

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

  1. <form method="post" enctype="multipart/form-data" action="http://pub10.bravenet.com/emailfwd/senddata.php">
  2.  
  3.  
  4. <!-- DO NOT CHANGE OR REMOVE THE 3 TAGS ABOVE THIS COMMENT-->
  5.  
  6. <table border="0" cellpadding="0" cellspacing="0" align="center">
  7. <tr>
  8. <td><h3 style="border-bottom:1px solid black">Formulario de Contacto</h3></td>
  9. </tr>
  10. <tr>
  11. <td>
  12.  
  13. <label for="Email" style="margin-bottom:5px">E-Mail Address:</label><div style="clear:left;height:20px"> </div>
  14.  
  15. <label for="Mail" style="margin-bottom:5px">Nombre:</label><div style="clear:left;height:20px"> </div>
  16.  
  17. <label for="Mensaje" style="margin-bottom:5px">Mensaje:</label><textarea name="Mensaje" id="Mensaje" style="width:150px;height:150px"></textarea><div style="clear:left;height:20px"> </div>
  18.  
  19. </td>
  20. <tr>
  21. <td align="right">
  22. <!-- YOU CAN MODIFY THE TEXT WITHIN VALUE="" TO MODIFY YOUR BUTTON TEXT-->
  23.  
  24. </td>
  25. </tr>
  26. </table>
  27. </form>

Esta corresponde a la parte de los Botones:

  1. <td align="right">
  2. <!-- YOU CAN MODIFY THE TEXT WITHIN VALUE="" TO MODIFY YOUR BUTTON TEXT-->
  3.  
  4. </td>

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

  1. <td align="center">
  2. <!-- YOU CAN MODIFY THE TEXT WITHIN VALUE="" TO MODIFY YOUR BUTTON TEXT-->
  3.  
  4. </td>

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

formulario_contacto_blog_28_beta.jpg

PASO 14:Quedaria Asi

formulario_contacto_blog_29_beta.JPG

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.

Espero les sirva

62 thoughts on “Crea un Formulario de Contacto para tus visitantes

  1. segui todos los pasos

    pero no me llegan los mail :S

    sera pk en mi plantilla no tengo el codigo: charset=UTF-8″ />

    ke puedo hacer?, se puede agregar asi no mas?, donde?

    saludos.

  2. hermano, su tutorial esta bien explicado pero me gustaria la parte del copiado del codigo que las imagenes fueses mas nitidas, no veo nada, y por lo tanto se me dificulta entenderla. mi correo es jlop77@gmail.com le agradezco.

  3. Felicidades por la claridad y utilidad en la información. El tutorial es fantástico y gracias a él he podido crear el formulario que deseaba.
    Aprovecho para deciros que he creado un enlace desde mi blog y así visitaros con más asiduidad además de que daros a conocer.
    Muchas gracias.

  4. Saludos! Qué buena clase me han dado esta tarde!! Los felicito, son muy buenos sus tutoriales en general, ya los tengo en mis favoritos!!

  5. He seguido todos lo pasos, mas o menos ya que ahora bravenet ha cambiado, he mandado un mensage de prueba pero no se ha donde ha ido a parar, no me llega al e-mail que puse ni tampoco a la pagina de bravenet, no se que he echo mal

  6. Hola,
    tengo una duda sobre todo lo relacionado con la edición del HTML de Blogger, ya que en mi plantilla aparecen etiquetas del tipo:

    “div id=’main-wrapper’”
    “b:section class=’main’ id=’main’ showaddelement=’yes’”
    “b:widget id=’Blog1′ locked=’false’ title=’Entradas del blog’ type=’Blog’”

    Sin embargo, en todo lo que leo (incluso en la ayuda de Blogger), hablais sobre etiquetas como
    ” $BlogSiteFeedLink$ “

    Por ejemplo, quiero que aparezca la fecha en cada una de las entradas que publico. ¿Cómo puedo hacerlo?

    ¿Dónde están esas etiquetas? qué desesperación!!

    Te agradecería mucho tu ayuda, gracias.

  7. Hola Paty, hace tiempo que no entraba a tu blog (ni a ningun blog XD) Pero ahora que tengo tiempo libre me di una pasada por el tuyo. Primero que nada quiero felicitarte por el buen post que has hecho lo has explicado muy bien. Peero a pesar de eso tengo una duda XD : ¿Existe la posibilidad que ese formulario se pueda comprimir y expandir al dar un click?, por que ocupa bastante espacio bueno esa era mi duda.

  8. hola amiga probe tus codigos pero solo trabajan en la plantilla antigua en la nueva no pasa nada o dime en que parte debo pegarlas

  9. hay que util, la verdad se me hizo largo el tutorial, muchos codigos etc pero creo que era necesario todo me quedo claro gracias por ello, oye tengo una duda mas, como hago para que el formulario de comentarios se vea como aqui y no tengan que hacer click en “comentar” para verlo, lo ando buscando desde hace tiempo y no se como, bueno gracias bye

  10. hooola excelente tu post! quisiera sabes como hago o como hacer para hacer una plantilla para realizar comentarios como este que tienes en este momento, una especie de “deja tu comentario” podras explicarmelo eun post o en un correo?

  11. Instale unas encuestas que rotan, muy buenas por cierto. Pero desafortunadamente, a partir de ahi me salen unas
    ventanas emergentes que no se pueden borrar. Después de borrar el código de bravenet, estas ventanas desaparecieron
    Me gustaría saber su opinion

  12. Hola, gracias por el tutorial, es útil pero parecería q falta actualizarlo: parece q ya no se necesita colocar esa linea de codigo q esta en el form tutorial (<form method…). Lo digo porq seguí estrictamente todas tus indicaciones y nada, ya estaba casi loco, a punto de escribirte pidiendo ayuda pero se me ocurrio probarlo sin insertar esa linea de codigo (lo que indicas en el paso 13: “Aquí vamos a agregar esta línea de código, que indica el mail al cual llega…”) y ahi sí resultó. Tú dirás: pero entonces, cómo sabe Bravenet a qué mail notificarnos” Buena pregunta. A mí me llega al correo con el cual me registré en Bravenet. Esa sería la explicación. De la otra manera no me funcionaba para nada. O estoy mal? Explicame porfa. Otra cosita tambien quisiera si puedes explicar lo q pregunta Ruth que “no tengan q hacer click en ‘comentar’…” Y lo del tamaño de las letras de las Question del formulario, eso se achica en la opcion edit no? Gracias anticipadas.

  13. Al igual que TIENS no necesite modificar nada de html, solo cree el formulario y genero el código que pegue directamente pero una duda que tengo es por que salen tan separados los cuadros en el formulario pueden verlo ya instalado en mi blog, si alguien sabe como puedo modificar eso avíseme please por que se ve muy feo pero si es funcional, intente mover los cuadros pero luego ya no funcionaba XD bueno me despido bye

  14. Si les funciona sin agregar el mail puede que bravenet haya modificado la aplicacion. Asi que mejor todavia menos pasos que hacer.
    Asegurense de obtener el codigo de cada una de sus cuentas, no copien el que aparece en este post, porque ese es para mi usuario :D.

  15. Hola, disculpame las molestias, pero no logro encontrar en mi blog la direccion ”
    No lo encuentro por ningun lado. Si sabes como, quizas, agregar esa parte que falta, porque no encuentro nada de eso previo a lo que tengo que pegar.
    Saludos.
    Santiago.

  16. Hola!!! Muchas gracias por la info del post…es re útil… sólo tengo un problema… cuando llega el momento de pegar el código con el mail de recepcion en la parte de tutoriales, no encuentro forma de hacerlo… Lo intenté todo y no puedo…. soy un poco princicpiante así que es factible que esté haciendo algo mal… podrías ayudarme?? Te loa agradezco mucho…

    NL

  17. hola gracias por tremenda utilidad, pero tengo una pregunta como cambio el color de las letras del formulario para mi web mi pagina tiene un fondo negro pero en el formulario las letras son en negro también entonces se pierden como las puedo cambiar a blanco? agradecieria tu comentario y respuesta

  18. Muy bueno, la lástima es que hace ya tiempo que dejara de usar bravenet por su elevadísima publicidad, recomiendo emailmeform, que lo hace de manera muy sobria y sí puedo asegurar que permite cambiar el tipo de letra!

  19. Bueeeeeeeeeeeenísimo!!!

    Me resultó el asunto este del formulario de contacto… lo mejor es que ahora blogger.com ofrece la posibilidad de pegar el código en ventanas separadas así que no hay que meterse con la plantilla html del blog.

    Gracias por el tutorial… estaba clarito!

    Chau!!!! saludos desde Chile

    vean como kedó http://www.cesfamquinchamali.tk

  20. al final no funcionó mi formulario, probé enviarme un mensaje a otra casilla mía y al clikear en el botón enviar salió un eroor desde una página de blogger que decía “error página no encontrada”, que será?

    este mismo formulario donde estoy escribiendo de dónde es?

  21. ya lo pude hacer pero lo eliminé, cuando dejás un mensaje te lleva a la página de bravenet, con publicidad horrible en tamaño gigante y tenés que hacer clic en un botón para volver a la web, en síntesis MALISIMO!

  22. Julia, si mal no recuerdo…desde el panel de bravenet…. se activaba una opcion para que en forma automatica el formulario se devolviera a la pagina de uno..

  23. Hola
    Me gustaría saber como haces para personalizar el formulario de comentarios de tu blog ( es decri que este en cajitas, que pida nombre email, web, etc)

    Saludos.

  24. Santiago
    A que te refieres con direccion??

    G
    Esto viene por defecto el blog lo pase a la plataforma wordpress, cuando encuentre algo similar para blogger lo publicare

    Para todas las personas que dejaron un comentario con sus dudas aqui, si todavia las tienen (puesto que ha pasado bastante tiempo), por favor vuelvan a consultar… para no tener que estar respondiendo cosas que ya resolvieron… Habia estado muy ocupada y ahora tengo un tiempito para ponerme al dia con algunas cosas.
    Bye

  25. Antes que nada quisiera agradecerte por la ayuda que nos brindas sobre todo a gente como yo que recién comienza en esto de hacer blogs. Realicé todo el proceso para obtener un formulario (encontré algunas pantallas en distintas a tu tutorial pero en grandes rasgos era casi el mismo proceso) y cuando intentó grabar el código en Blogger me da el siguiente error (ya colocado el código :

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type “form” must be terminated by the matching end-tag ”
    “.
    Estoy usando una planilla que no es de las clásicas y el código lo copié luego de

    Creo que viene por el lado de cerrar el codigo pero no se nada de programación. Agradezco mucho si me podrías ayudar a resolver esto.

    Gracias!!

  26. No salió en el comentario el código que te decía que también había puesto (el de malito), es el que menciona la dirección de mail. Te comentaba también y no salió que el código total lo copié luego de Div id= sidebar-wrapper

    Gracias

  27. Hola! Espero no llegar muy tarde para el comentario y que pueda ser revisado. Seguí todos los pasos, las indicaciones fueron muy claras, pero no logro hacer que me lleguen los mails a mi casilla. El código html correspondiente ya está añadido en la plantilla, pero aún así no funciona. ¿Cómo puedo hacer para solucionarlo? Muchas gracias.

  28. Gracias a sido de mucha ayuda, gracias por compartir las enseñanzas, para los que no sabemos de crear formularios, os dejo mi blog enbuscadelapazinterior.blogspot.com

  29. Hola, el tutorial está muy bien, me resultó, el único inconveniente que encuentro es que después de llenar el formulario, cuando envía el mensaje y verifica los datos no vuelve a mi Web… ¿hay alguna forma de re direccionarlo para que una vez enviado el mensaje, el usuario vuelva a mi home y no a la Web de bravenet.com?

    Muchas gracias.

  30. buenas, no soy muy experimentada en el tema y me estoy volviendo loca para poner al final de la plantilla un recuadro de comentario (como el que usan ustedes) con el mail obligatorio, logre un formulario de consulta, pero no queda publicado lo que escriben los visitantes.
    Si alguien me puede ayudar me va a hacer un gran favor!!!
    PD: uso blogger

  31. Hola. Muy bueno el tuto. SOLO ME FALTA 1 COSA. El formulario me quedo en el blog, pero cuando hago click en “Enviar” no pasa a otra pagina y tampoco me llega al mail. Es como si le faltara el vinculo a la palabra “Enviar”. Como hago??? Alguien me puede ayudar???
    Se los voy a agradecer.
    Mariano_S22@hotmail.com

  32. Hola. Queria felicitarlos porque la verdad es que hace 5 dias que no puedo despegarme de esta pagina, intentando aprender la forma de enriquecer mi blog. Muchas Gracias por todo.
    P/D: La unica cosa que no me salio fue la nube de etiquetas, pero seguire intentando

  33. Hola,

    Estoy interesado publicitar en su sitio.
    Mi empresa ofrece un creador de sitios web en flash gratuito, nuestra Url es http://www.wix.com. Nuestros clientes son fotógrafos, diseñadores gráficos y de web, desarrolladores web, pequeñas y medianas empresas, y muchos otros negocios que utilizan nuestro producto para crear un hermoso sitio web de aspecto profesional, ya sea para su negocio o para utilizar las herramientas que ofrecemos en su trabajo.
    Ahora queremos entrar en el mercado Latinoamericano y Español.
    Les solicito que me manden la información sobre los espacios de anuncios disponibles, tarifas y número de impresiones.

    Muchas gracias,
    Rebecca Serruya
    Media Buyer
    http://www.wix.com

  34. Hola, excelete tutorial.
    Pregunta.
    Con este formulario que se crea hay alguna forma para agregarle lafuncionalidad de que nos llegue un mensaje de que se publico un comentario y la opcion de moderarlo para saber si se publica o no se publica.
    Es como lo que hace un moderador de un foro, ver si se publica un comentario o no.

  35. Hola men,

    Como puedo hacer para moderar comentario con el form que hhicimos???
    Es urgente por favor, te lo ruego????

  36. Dear Sir/Madam,

    I am Bella. I visited your site and found the themes of your site are bound up with mine.
    I’m running a b2b company connecting China suppliers and foreign buyers. Seeing your site is built well, I would like to place a text link or banner ad (not the type of CPM and CPC) on your site. Are you interested in that?

    What is the price of it for 3 months?

    I’m looking forward to your kindly reply!

    Best regards,
    Bella

Deja tu Comentario