Formularios faciles y totalmente personalizables con JotForm
A la hora de hacer formularios para alguna aplicación online el trabajo mas aburrido suele ser el de crear y centrar las cajas ya que casi todas son iguales y solemos necesitar programas de pago que nos ocupan espacio innecesario y nos dan posibilidades que terminaremos por modificar mas rápido a mano. Yo, como solución a esto utilizo JotForm.
JotForm es una web dedicada a formularios que utiliza ajax para crear y modificar las propiedades de cada caja de texto, pudiendo modificarlos de forma visual mientras cambias las propiedades, arrastrando y soltando. Otros sistemas dan mejores opciones gráficas o de implementación como puede ser wufoo pero estos no ofrecen la posibilidad de ver y modificar el código directo, y esta posibilidad es la mas interesante. A partir de unos pequeños cambies que ahora comentare podremos no solo exportar como una web independiente si no hacer que funcione de la misma manera desde nuestro servidor.
JotForm usa una librerÃÂa gratuita para la creación del único sistema que tiene imagen y código javascript una vez creado, My Date Time Picker, la cual es un sistema para ver de forma gráfica un calendario a la hora de introducir una fecha.
Para extraer un formulario tendremos que pulsar en el botón de código situado arriba a la derecha (
) y una vez que tengamos el código en la ventana seleccionarlo entero, copiarlo y pegarlo en un archivo de texto. Una vez echo esto lo guardaremos como un archivo Nombre.html u otra extensión de pagina web (php, htm...).
Al guardar el archivo tendremos solo un problema. La librerÃÂa My Date Time Picker no se encontrará al igual que el icono de calendario. Para corregir esto solo tendremos que descargarnos date time picker de su pagina web y guardar el archivo datetimepicker.js en una carpeta que se llame js y junto a esta, la carpeta images (la cual contiene la imagen que nos interesa, cal.gif que será el icono derecho de calendario en nuestros formularios, el resto no nos interesa).
Una vez terminados esos 2 pasos el formulario se reproducirá como en la misma web. Para personalizarlo solo tendremos que cambiar el código CSS y Cambiar el archivo de ejecución que recibirá los datos del formulario.
Código CSS existente:
-
<style>
-
body,td,legend {
-
color: black;
-
font-family: Arial;
-
font-size: 14px;
-
}
-
</style>
Código del archivo que recibirá los datos:
-
<form action="ARCHIVO" method="POST">
Con esto podemos modificar cualquier cosa del archivo, pero si quisiéramos también traducir el calendario o modificar su color o el titulo necesitaremos agregar un pequeño código que os dejo a continuación con los meses y dÃÂas de la semana ya traducidos para español.
-
<script language="JavaScript"
-
type="text/javascript">
-
-
var MonthName=["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio","Julio",
-
"Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
-
var WeekDayName=["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado"];
-
-
//Configurable parameters
-
var cnTop="200";//top coordinate of calendar window.
-
var cnLeft="500";//left coordinate of calendar window
-
var WindowTitle ="- Calendario -";//Date Time Picker title.
-
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
-
var CellWidth=21;//Width of day cell.
-
var CellHeight = 100; //Height of the cell if this is a largecalbox
-
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
-
var TimeMode=24;//default TimeMode value. 12 or 24
-
var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
-
var ShowMonthYear=true;//Show Month and Year in Calendar header.
-
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
-
var WeekHeadColor="#0099CC";//Background Color in Week header.
-
var SundayColor="#6699FF";//Background color of Sunday.
-
var SaturdayColor="#CCCCFF";//Background color of Saturday.
-
var WeekDayColor="white";//Background color of weekdays.
-
var FontColor="blue";//color of font in Calendar day cell.
-
var TodayColor="#FFFF33";//Background color of today.
-
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
-
var YrSelColor="#000000";//color of font of Year selector.
-
var ThemeBg="./background.jpg";//Background image of Calendar window.
-
</script>
Para utilizarlo solo tenemos que ponerlo después de los src="/js/datetimepicker.js"></script> que nos encontremos en el código formulario.
Desde estos valores podemos cambiar cosas como la imagen e fondo, el color del mes, dÃÂa dÃÂa actual...
¡Participa en la discusión!
muy buena tu explicacion ,te cuento que la pagina de la web la construi con dream siguiendo los pasos de un curso al realizar el formulario de contacto no me lo envia a mi correo si me puedes aclararlo te lo agradeceria de todas maneras gracias por todo
Hola Antionio, Para lo que quieres hacer vas a necesitar unir varios manuales de los que hay aquà y a demás poner un poco de ingenio y perseverancia por tu parte.
Parte de la función receptor_a_archivo() utiliza una función que recoge todos los datos del formulario y los envÃa a un archivo.. utilizando ese tutorial podrÃas guardar los datos en un archivo y luego, a partir de la misma función archivo que aparece en el mismo, leer los datos, utilizándolos para componer lo que se va a enviar con la función mailTo().
Espero que el mini-esquema de aplicación te sirva para tu propósito. Un saludo.