El formulario de contacto en un sitio web es muy importante, aunque mas importante es responderle a las personas que te contactan, pero bueno, eso es otro tema. Volviendo al punto original, que sucede cuando tienes una web y quieres externalizar este «servicio»? esto podria ser por distintos motivos, uno podria ser porque no quieres que la carga de email que envia pase por tu Hosting, lo otro puede ser que alguien indexo tu web y te esta mandando Spam (si es que no le tienes un captcha a tu formulario), o lo otro es simplemente porque no quieres desarrollarlo tu.

Hace unas semanas me encontre con este sitio web llamado Foxyform, lo que hace es bastante simple, te brinda de una manera facil y rapida la creacion de un Formulario de Contacto para tu sitio web, como todo tiene sus pro y sus contras

Pro

1. Facilidad para incluir varios tipos de campos
2. Facilidad para dejar un campo como obligatorio u opcional
3. Permite seleccionar los colores que tendra el formulario
4. El trafico de email que salen del formulario no pasa por tu Hosting
5. Agrega un captcha basico pero eficiente
6. Te muestra una visualizacion del Formulario que estas creando
7. Sencillo de implementar en tu web

Contras

1. Tipos de campos limitados, si quieres uno que no esta en la lista no te permite agregarlo
2. Colores limitados, no siempre estara el que tu buscas
3. Los email que salen del formulario no puedes personalizarlos
4. Publicidad (muy poca) en los email que te llegan
5. No es posible modificar un formulario una vez generado, por ejemplo si quieres cambiar el email tendras que crear otro nuevo

Pero si aun asi quieres implementarlo, pues adelante, el unico problema que encontre yo al intentar crearlos, es que la primera vez no te reconoce bien el captcha que ingresaste, asi que deberas ingresarlo por 2da vez para que te cree tu formulario.

Ahora, sobre su implementacion existen dos formas:

1) Implementacion por JS

Ellos te entregan un codigo Javascript el cual puedes copiar y pegar en tu web, seria algo similar a esto

<!-- Do not change the code! -->
<a id="foxyform_embed_link_<wbr />12345678" href="http://es.foxyform.com/"<wbr />>foxyform</a>
<script type="text/javascript">
(function(d, t){
   var g = d.createElement(t),
       s = d.getElementsByTagName(t)[0];
   g.src = "http://es.foxyform.com/js.<wbr />php?id=12345678&sec_hash=abcd12345&width=350px";
   s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
<!-- Do not change the code! -->

Obviamente la linea 7

 g.src = "http://es.foxyform.com/js.<wbr />php?id=12345678&sec_hash=abcd12345&width=350px";

Es la que contiene el ID que genero tu nuevo formulario y un hash unico. Eso simplemente es copiar y pegar en tu pagina web.

2) Implementacion por Iframe

Otra opcion es tomar el mismo codigo que nos entrego y ponerlo en un iframe, ahora diras… ¿y como hago eso? pues muy simple, totamos el id y el hash que genero

id=12345678&sec_hash=abcd12345";

Y lo incluimos con la siguiente linea modificando el «id» y el «sec_hast» que va en el SRC por el que nosotros tenemos

iframe width="420" height="580" frameborder="0"
src="http://es.foxyform.com/form.php?id=12345678&sec_hash=abcd12345">
</iframe

Con esto incluimos nuestro formulario en un lindo iframe

NOTA: No me dejaba poner el iframe bien por razones logicas, por lo tanto tuve alterarlo y quitarle el primer «<» y el ultimo «>» para agregarlo, asi que deberas agregarlos tu cuando copies y pegues el codigo

Y bueno, eso seria todo, por cierto, el ID y el hast que ocupe aqui son de ejemplo 😉