Formulario de contacto en ventana modal (foxyform)

formulario de contacto en ventana modal
Desde hacia mucho tiempo que tenia muchas ganas de escribir este post, ya que el resultado es bastante elegante a pesar de la simplicidad del procedimiento, no lo había hecho antes por falta de tiempo para dedicarle y algo de flojera también a decir verdad.


Para explicar todo mejor el post va dividido en 2 partes, la primera se trata del formulario de contacto como tal y la segunda parte de lo que hay que hacer para que aparezca en una ventana modal.

Primera parte el formulario

Lo primero que debemos hacer es tener un formulario de contacto externo, en el ejemplo utilice foxyform por preferencia personal, aunque lo mismo debe funcionar para otros como kontactr o emailmeform.

Después de que generemos nuestro formulario de contacto obtendremos un código para insertar en un archivo html en el caso de foxyform tendremos algo como esto:

codigo formulario de contacto
Como vamos a hacer el formulario para una ventana modal debemos crear un archivo que subiremos a un alojamiento como dropbox, google drive u otro por el estilo; por lo general en ese tipo de alojamientos no funcionaria ese script por lo que debemos primero copiar la url que aparece:

url del codigo

Después de copiarla la pegamos en la barra de direcciones de nuestro navegador y presionamos enter lo que nos mostrara otro código:

el otro codigo

Ahí buscamos una url como la que aparece encerrada en un circulo y la copiamos.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Contacto</title>
  
</head><body>
<div style="border: 1px solid rgb(0, 0, 0); margin: 0pt auto; padding: 10px; background-color: rgb(237, 237, 237); outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 1px; width: 350px;">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><iframe src="URL AQUI" frameborder="0" height="450" width="350"></iframe><br>
      </td>
    </tr>
    <tr align="center">
      <td style="vertical-align: top;"><a style="font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(92, 92, 92);" href="http://es.foxyform.com/" target="_blank">foxyform</a><br>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body></html>

Copiamos el codigo anterior a un editor y pegamos la dirección que apareció en el código donde dice URL AQUI. Luego guardamos el archivo como html y lo subimos al alojamiento que hayamos elegido. Ya con esto tendremos listo el formulario de contacto, solo falta copiar la dirección del archivo, mas adelante la necesitaremos.

Segunda parte la ventana modal

Para "volver modal" el formulario debemos usar cualquier script de ventana modal con el que se pueda cargar un iframe, en mi caso utilice shadowbox ya que es simple y no me da problemas con otros scripts que uso.

Lo primero que debemos hacer es descargar este archivo, descomprimirlo y subir todos los archivos que están dentro a un alojamiento, es importante que queden todos juntos.

Después debemos agregarlos a nuestra plantilla justo arriba de </head> asi:


<link href='URL DEL ARCHIVO CSS' rel='stylesheet' type='text/css'/>
<script src='URL DEL ARCHIVO JS' type='text/javascript'></script>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

Donde dice URL DEL ARCHIVO CSS copiamos la dirección del archivo css en nuestro alojamiento y lo mismo hacemos con el archivo js.

Después de eso solo falta poner rel='shadowbox;width=Ancho;height=Altura;' al enlace del formulario, algo mas o menos como esto:


<a href='https://db.tt/xO3v03JR' rel='shadowbox;width=400;height=430;' title='Contacto'>Contacto</a>

Debemos reemplazar Ancho y Altura para cambiar el tamaño de la ventana del formulario, podemos ir probando hasta que quede como queremos.

Después de esto ya tendremos nuestro formulario en ventana modal que se ve elegante y además es gratuito.