Designer PDF Forms for Zoho on you own server
DESIGNER PDF FORMS FOR ZOHO
I thought I would share this because it took so much of my time to figure everything out. I wanted forms that looked sexy and professional. The export pdf function of Zoho was very limited as are most pdf export options of many programs. Only high end expensive programs have options to really make fancy forms. I liked the simplicity of Zoho in building forms but I wasn't happy with the output. My programming object of the PDF form was simple.
1. Take Form data using Zoho
2. Send it to my own server and merge it with a designer pdf form
3. Use zoho to send the link or allow the client to print from their pdf viewer
Here is a step by step explanation on how you can do yours..there is a RESOURCE LIST at the bottom for easy access to the programs mentioned in the posting.
* Note the 6.65kb Zoho_Form_Processor.txt was replace because of a small error. For some reason I was not able to delete it.
THE PROCESS
The following is the step by step process for creating your own system. You are provided with all of the necessary free and opensource software to create you own system.
Step #1
Use Inkscape (free www.inkscape.org) to create the form decoration.
With this program you can create very sophisticated pdf backgrounds. Most online documents and directly generated pdf documents from database or spreadsheets that are created by pdf generators are dull and not very attractive.
By using a inkscape you can create really attractive form backdrops that pdf files can use a the background. When pdf's get to the point where it supports .svg then the these documents no longer need to be exported as bit map files which have a tendency to be large, but .svg as vector graphics will be small and a much higher viewing and printing resolution.
I created image below in about 10 minutes, exported it to the png format. We will use this image next in to make our form. Inkscape has many special effects filters that you can download and use. Look at the 2011. This was done with a filter called "Bevel Steel", I just typed "2011" and selected the filter. The LIONS CLUB REPORT (I had two II's i guess) was done with several processes using paths. It is not so easy but once you master it (after an hour or so) you can do so many interesting things.
PROBLEMS FACED WITH OPENOFFICE INKSCAPE
Use Openoffice write (free www.openoffice.org) to create the pdf form.
In open office suite of programs we use write to build our form. We load the background page made in inkscape as a backgroiund format>page>background>as>graphic. You then browse for the png file and load it as the page background. You should remember to set margins to 0mm or there will be a white space around your form. It is better not to have white space since most pdf viewers will print on the printable area making their own white space. It also leaves less space for you to establish your form controls.
By the way, Openoffice can import PDF files edit them and save them again. Don't underestimate the power of FREE!
Turn on the dialog for creating forms and start by placing the form controls. You have various options to have frames 3d or flat around the control fields. Leave these on while you are designing your form fields. Using the form field navigator located on the tool bar at the bottom of write you can select all of the fields and turn off the border. I do this at the end so I can see where my fields are, otherwise you have to guess a little bit. I like to turn off the border and prefer to use the borders on my inkscape background after I finish my editing.
Using the form builder you build your form keeping in mind how you are going to populate the fields with Zoho. There are two kinds of form populating you have to consider. Single fields and repeating fields. For repeating fields you have to name them in open office as IDNo1, IDNo2, IDNo3 etc. Using your own variable names.
Then in Zoho you simply use a for each to build the variables for your post you iterate through the values and load up the post variables.
post_vars=Map();
mRowNo=1;
for each mRow in myform[year == input.year]
{
post_vars.put("IDNo"+mRowNo.tostring(),mRow.IDNo);
post_vars.put("Days"+mRowNo.tostring(),mRow.Days_Attended);
post_vars.put("Name"+mRowNo.tostring(),mRow.Name);
}
Look carefully at the code above. Not that we make IDNO tags like IDNO1, IDNO2 etc. These are the same tags that we used in our form. If you use IDNO01 then you need to use a Zoho sub routine to pad the number. Keep it simple.
PROBLEMS FACED WITH OPENOFFICE WRITE
Step #3
You must upload onto your server the pdftk.exe tool (free http://www.pdflabs.com/docs/install-pdftk/)
This program is a powerful utility that can do many things with PDF files. Our interest is its ability to merge a FDF and PDF file with or without a background (picture image) then flatten it.
Read carefully the documentation, you will probably find many other things to help you like security and password protection. These are easy to implement with ZOHO.
PROBLEMS FACED WITH PDFTK
With the pdftk.exe file uploaded on your server you will need two PHP program scripts to take data from ZOHO create a FDF file then use pdftk.exe to merge and then create a new pdf file or print a pdf to the screen.
These programs were developed by others. I just copied them and modified them to suite my needs. You can find the original authors in the files.
Attachments
a) Zoho_Form_Processor.txt
must be uploaded to your server and renamed as a PHP file.
You can edit the program and change the CONFIGURATION content to suite your needs.
Be careful if you modify it. Always keep the original copy just in case...!
b) createFDF.txt
must be uploaded to your server as a PHP file.
This is the function that will be called from Zoho_Form_Processor.php
to build the fdf file using post data received from your Zoho Creator application.
PROBLEMS FACED WITH THE PHP programs
You now need to build a Zoho form application that will do the following.
a) Take form data and load a map variable
example:
post_vars=Map();
mRowNo=1;
for each mRow in myform[year == input.year]
{
post_vars.put("IDNo"+mRowNo.tostring(),mRow.IDNo);
post_vars.put("Days"+mRowNo.tostring(),mRow.Days_Attended);
post_vars.put("Name"+mRowNo.tostring(),mRow.Name);
}
You can use what ever variable name you want. I used post_vars just because it sounded good.
PROBLEMS FACED WITH THE ZOHO
variable description
webname The name of your website
example: post_vars.put('webname',"My_Web_Site.com")
prog_dir directory of pdftk.exe
if you leave it out the program will assume $dir_root=$_SERVER['DOCUMENT_ROOT']
nodatamsg message if there is no data
default "No POST data detected!" if you leave it out
dir_root root directory
default is $dir_root=$_SERVER['DOCUMENT_ROOT'] if you leave it out
fdf_dir the directory where the form is
default $fdf_dir=dirname(__FILE__) if you leave it out
fdf_file the name of the fdf file.. is the container for the pdf form data
default is $fdf_file='fdf_temp.fdf' if left out
backgroundfile the name of any background file which we will use to include pictures or watermarks for out pdfs
blank if you do not need it
pdf_doc the name of your pdf from file
without this the program will terminate with error
pdfoutput the name you want to give to the output file
if left blank the output with go to standard devise which is print to screen
flatten set to true in Zoho will cause the output file to be flattened (un editable)
the default if left is true set to false if you want editable output
KNOWN ISSUES AND PROBLEMS YOU CAN FACE
1) You web service provider doesn't allow programs like .exe to be executed on their server
2) Issues with folder access, make sure you set the read/write privileges for your .exe program
3) Basic mistakes in naming configuration variables
4) The PDF file must be able to receive data (FDF) output.
Step #6
Now you want to post your variables to your website and get the results back taking out the path and file name of the pdf document if you select document output v.s. screen.
mResult = postUrl("My_Web_Site.com/Zoho_Form_Processor.php", post_vars);
mURL = "http://" + (mResult.getSuffix("http://")).subString(0,((mResult.getSuffix("http://"))).lastIndexOf("<!DOCTYPE"));
Note: Green text indicates that you put your own names.
RESOURCE LIST
Inkscape vector graphic software download
Gimp 2.0 bitmap graphic software download
Openoffice free suite of applications for creating fdf type pdf forms
PDFTK utility tool to combine and flatten pdf file with fdf data
Codelobster PHP editing and debuggin program
Wampserver to allow PHP debugging on your system
I thought I would share this because it took so much of my time to figure everything out. I wanted forms that looked sexy and professional. The export pdf function of Zoho was very limited as are most pdf export options of many programs. Only high end expensive programs have options to really make fancy forms. I liked the simplicity of Zoho in building forms but I wasn't happy with the output. My programming object of the PDF form was simple.
1. Take Form data using Zoho
2. Send it to my own server and merge it with a designer pdf form
3. Use zoho to send the link or allow the client to print from their pdf viewer
Here is a step by step explanation on how you can do yours..there is a RESOURCE LIST at the bottom for easy access to the programs mentioned in the posting.
* Note the 6.65kb Zoho_Form_Processor.txt was replace because of a small error. For some reason I was not able to delete it.
THE PROCESS
The following is the step by step process for creating your own system. You are provided with all of the necessary free and opensource software to create you own system.
Step #1
Use Inkscape (free www.inkscape.org) to create the form decoration.
With this program you can create very sophisticated pdf backgrounds. Most online documents and directly generated pdf documents from database or spreadsheets that are created by pdf generators are dull and not very attractive.
By using a inkscape you can create really attractive form backdrops that pdf files can use a the background. When pdf's get to the point where it supports .svg then the these documents no longer need to be exported as bit map files which have a tendency to be large, but .svg as vector graphics will be small and a much higher viewing and printing resolution.
I created image below in about 10 minutes, exported it to the png format. We will use this image next in to make our form. Inkscape has many special effects filters that you can download and use. Look at the 2011. This was done with a filter called "Bevel Steel", I just typed "2011" and selected the filter. The LIONS CLUB REPORT (I had two II's i guess) was done with several processes using paths. It is not so easy but once you master it (after an hour or so) you can do so many interesting things.
PROBLEMS FACED WITH OPENOFFICE INKSCAPE
- Be careful not to use too high of a resolution as your pdf files will be too large. Try using 200dpi or 120dpi. Your forms will still look good. If you need high printer quality then 300dpi is what you will require. If this is the case then use .jpg compression. The only bitmap export option is PNG so you should use GIMP 2.0 which is a free bitmap graphics program (free www.gimp.org).
- When you make your picture backgrounds be sure to export in PNG. Inkscape will automatically use white as the transparency. If the white spaces are not transparent the form will be covered.
Use Openoffice write (free www.openoffice.org) to create the pdf form.
In open office suite of programs we use write to build our form. We load the background page made in inkscape as a backgroiund format>page>background>as>graphic. You then browse for the png file and load it as the page background. You should remember to set margins to 0mm or there will be a white space around your form. It is better not to have white space since most pdf viewers will print on the printable area making their own white space. It also leaves less space for you to establish your form controls.
By the way, Openoffice can import PDF files edit them and save them again. Don't underestimate the power of FREE!
Turn on the dialog for creating forms and start by placing the form controls. You have various options to have frames 3d or flat around the control fields. Leave these on while you are designing your form fields. Using the form field navigator located on the tool bar at the bottom of write you can select all of the fields and turn off the border. I do this at the end so I can see where my fields are, otherwise you have to guess a little bit. I like to turn off the border and prefer to use the borders on my inkscape background after I finish my editing.
Using the form builder you build your form keeping in mind how you are going to populate the fields with Zoho. There are two kinds of form populating you have to consider. Single fields and repeating fields. For repeating fields you have to name them in open office as IDNo1, IDNo2, IDNo3 etc. Using your own variable names.
Then in Zoho you simply use a for each to build the variables for your post you iterate through the values and load up the post variables.
post_vars=Map();
mRowNo=1;
for each mRow in myform[year == input.year]
{
post_vars.put("IDNo"+mRowNo.tostring(),mRow.IDNo);
post_vars.put("Days"+mRowNo.tostring(),mRow.Days_Attended);
post_vars.put("Name"+mRowNo.tostring(),mRow.Name);
}
Look carefully at the code above. Not that we make IDNO tags like IDNO1, IDNO2 etc. These are the same tags that we used in our form. If you use IDNO01 then you need to use a Zoho sub routine to pad the number. Keep it simple.
PROBLEMS FACED WITH OPENOFFICE WRITE
- Make sure you get the stable version avoiding the beta versions as I have experienced problems with the form design. It takes a little experimenting to get the forms right.
- Be careful of font size selection.
- I have not experimented with any other control other than the simple field. I use Zoho and my own functions to format the fields before I send them.
- Dont worry about crashing. OO (Openoffice) has a very good recovery routine. Just remember to set your auto save to every 5 minutes. I experience crashes when I have too many applications running. I am impatient and cause so many problems for my operating system.
Step #3
You must upload onto your server the pdftk.exe tool (free http://www.pdflabs.com/docs/install-pdftk/)
This program is a powerful utility that can do many things with PDF files. Our interest is its ability to merge a FDF and PDF file with or without a background (picture image) then flatten it.
Read carefully the documentation, you will probably find many other things to help you like security and password protection. These are easy to implement with ZOHO.
PROBLEMS FACED WITH PDFTK
- I have lost countless hours because of small issues that I wasn't aware of. Be sure that when you send data fields to the processor that you do not have unpaired brackets i.e. "(" must have ")". The FDF will not be recognized by the PDF form.
- Make sure that you have the right to run .exe files on your server and that where ever you instruct pdftk.exe to save files has the necessary permission.
- Some hosting providers don't allow you to execute programs. Most will allow you if you ask them however. The default is to block you!
With the pdftk.exe file uploaded on your server you will need two PHP program scripts to take data from ZOHO create a FDF file then use pdftk.exe to merge and then create a new pdf file or print a pdf to the screen.
These programs were developed by others. I just copied them and modified them to suite my needs. You can find the original authors in the files.
Attachments
a) Zoho_Form_Processor.txt
must be uploaded to your server and renamed as a PHP file.
You can edit the program and change the CONFIGURATION content to suite your needs.
Be careful if you modify it. Always keep the original copy just in case...!
b) createFDF.txt
must be uploaded to your server as a PHP file.
This is the function that will be called from Zoho_Form_Processor.php
to build the fdf file using post data received from your Zoho Creator application.
PROBLEMS FACED WITH THE PHP programs
- Any time you modify PHP programs expect headaches. Small mistakes will render them useless.
- Use codelobster (free www.codelobster.com) to edit your PHP files and debug them. You will need wampserver (free www.wampserver.org) to edit php programs.
- Unless you are somewhat experienced then don't modify the programs. They are generic enough to do most of what you want to do.
You now need to build a Zoho form application that will do the following.
a) Take form data and load a map variable
example:
post_vars=Map();
mRowNo=1;
for each mRow in myform[year == input.year]
{
post_vars.put("IDNo"+mRowNo.tostring(),mRow.IDNo);
post_vars.put("Days"+mRowNo.tostring(),mRow.Days_Attended);
post_vars.put("Name"+mRowNo.tostring(),mRow.Name);
}
You can use what ever variable name you want. I used post_vars just because it sounded good.
PROBLEMS FACED WITH THE ZOHO
- Don't populate the MAP variable with one go using {"variable",value:"variable",value,"variable",value}. For some reason I could not get it to work. Do one by one.
variable description
webname The name of your website
example: post_vars.put('webname',"My_Web_Site.com")
prog_dir directory of pdftk.exe
if you leave it out the program will assume $dir_root=$_SERVER['DOCUMENT_ROOT']
nodatamsg message if there is no data
default "No POST data detected!" if you leave it out
dir_root root directory
default is $dir_root=$_SERVER['DOCUMENT_ROOT'] if you leave it out
fdf_dir the directory where the form is
default $fdf_dir=dirname(__FILE__) if you leave it out
fdf_file the name of the fdf file.. is the container for the pdf form data
default is $fdf_file='fdf_temp.fdf' if left out
backgroundfile the name of any background file which we will use to include pictures or watermarks for out pdfs
blank if you do not need it
pdf_doc the name of your pdf from file
without this the program will terminate with error
pdfoutput the name you want to give to the output file
if left blank the output with go to standard devise which is print to screen
flatten set to true in Zoho will cause the output file to be flattened (un editable)
the default if left is true set to false if you want editable output
KNOWN ISSUES AND PROBLEMS YOU CAN FACE
1) You web service provider doesn't allow programs like .exe to be executed on their server
2) Issues with folder access, make sure you set the read/write privileges for your .exe program
3) Basic mistakes in naming configuration variables
4) The PDF file must be able to receive data (FDF) output.
Step #6
Now you want to post your variables to your website and get the results back taking out the path and file name of the pdf document if you select document output v.s. screen.
mResult = postUrl("My_Web_Site.com/Zoho_Form_Processor.php", post_vars);
mURL = "http://" + (mResult.getSuffix("http://")).subString(0,((mResult.getSuffix("http://"))).lastIndexOf("<!DOCTYPE"));
Note: Green text indicates that you put your own names.
RESOURCE LIST
Inkscape vector graphic software download
Gimp 2.0 bitmap graphic software download
Openoffice free suite of applications for creating fdf type pdf forms
PDFTK utility tool to combine and flatten pdf file with fdf data
Codelobster PHP editing and debuggin program
Wampserver to allow PHP debugging on your system