Guida alla creazione di un modulo PDF compilabile (editabile)

Guida alla creazione di un modulo PDF compilabile (editabile)

Utilizzeremo due metodi per costruire un file PDF compilabile.

Il primo utilizza OpenOffice 2.0 (o superiore), Foxit Reader 2,1 (o 2.2) e PDF-XChange Viewer 2.0. Il secondo metodo utilizza al posto di OpenOffice un qualsiasi editor di testo (MSWord, AbiWord etc)

1° metodo

Apriamo una nuova pagina di testo con il modulo Writer di OpenOffice. Attiviamo la visualizzazione dei “Controlli per il formulario” selezionando il menù Visualizza → Barra dei simboli → Controlli per il formulario.

Comparirà la finestrella dei Controlli per il formulario dalla quale potremo scegliere i controlli necessari per costruire il nostro modulo

Utilizzeremo i seguenti controlli

Casella di controllo (Check box) e Pulsante di scelta (Option box) per consentire all’utente del nostro modulo di effettuare delle selezioni

Campo di testo (text box) per consentire all’utente di inserire dei dati

Pulsante per generare delle azioni

Proviamo ora a costruire un modulo d’ordine attraverso il quale un’azienda può raccogliere ordini di acquisto per i suoi prodotti.

Creiamo inizialmente dei campi di testo necessari per inserire i dati del cliente (Nome, Cognome, Indirizzo etc), cliccando sul relativo controllo nella finestra del formulario e trascinando il puntatore (con il tasto sinistro del mouse premuto) sulla pagina bianca.

Un doppio clic sul campo di testo ci permetterà di visualizzare la finestra con le sue Proprietà dove potremo assegnare un nome al campo, scegliere l’eventuale testo standard da far comparire al suo interno, il colore di sfondo, il tipo di cornice (3D, Piano, Senza cornice), il colore del bordo, il tipo di testo (riga singola o più righe) e, nel caso il campo preveda l’inserimento di più righe, la presenza o meno di Barre di scorrimento.

Si tenga presente che se a due campi di testo viene assegnato lo stesso nome, quando si introduce un testo in un campo, lo stesso testo compare automaticamente anche nell’altro. Ciò può essere utile quando una medesima informazione (ad esempio il Codice Fiscale) deve comparire in punti diversi del modulo.

Il risultato finale per la sezione dati del cliente è il seguente

Si noti come il campo “Inserisci nota:”, pur essendo stato impostato con la barra laterale di scorrimento non la presenta. La barra verrà infatti visualizzata solo nel caso l’utente inserisca un testo che ecceda le dimensioni del campo.

Aggiungiamo ora i campi di testo necessari per la prenotazione dei prodotti

In questo caso nelle Proprietà dei campi di testo relativi al prezzo dovremo selezionare l’opzione solo lettura, in modo che l’utente finale non possa modificarli.

Aggiungiamo ora degli option box per consentire all’utente di scegliere il tipo di pagamento desiderato e le spese di spedizione che dovrà sostenere

Con un doppio clic su un option box compare la finestra con le sue Proprietà, dove potremo inserire il nome, il titolo (descrizione visibile all’utente dell’opzione scelta), il modello (3D o piatto) e lo Standard (selezionato o non selezionato)

Ciascun gruppo di tre Option box dovrà presentare nelle sue proprietà il medesimo nome. In questo modo quando si seleziona un’opzione, automaticamente le altre due si deselezionano.

Inseriamo infine due campi di testo a più righe e con barre di scorrimento laterali per ospitare le informazioni relative ai termini di vendita ed alla normativa sulla privacy. Aggiungiamo accanto a ciascuno di essi un check box in modo che l’utente, ciccandoci sopra, confermi di aver letto le informazioni.

A questo punto possiamo già generare il modulo PDF compilabile sfruttando la capacità di OpenOffice di salvare il file in formato PDF, mantenendo la funzionalità dei campi interattivi introdotti. Clicchiamo sul menù File → Esporta nel formato PDF… e salviamo il modulo creato in formato PDF

Il modulo PDF così ottenuto è già editabile. È sufficiente aprirlo con un qualsiasi visualizzatore di file PDF (ad esempio Acrobat Reader) ed inserire i dati nei diversi campi.

Tuttavia la maggior parte dei Visualizzatori di PDF (Acrobat compreso) non sono in grado di salvare il modulo con i dati immessi.

Acrobat Reader, ad esempio, quando tentiamo di chiudere il modulo compilato ci presenta la seguente finestra

permettendoci al massimo di stampare il modulo su carta.

Ci sono due possibilità per poter avere una copia in formato PDF del modulo compilato con i dati.

1) stampare il modulo PDF utilizzando una spampante PDF virtuale (PDFCreator, DoPDF etc). In questo modo si ottiene tuttavia una copia del modulo compilata, ma non più compilabile.

2) Utilizzare Foxit Reader o PDF-XChange Viewer, i quali sono in grado di salvare i dati immessi nel modulo, mantenendo il modulo stesso compilabile per successive modifiche.

Operazioni di editing con Foxit Reader

Foxit Reader è in grado di inserire e modificare i campi in un modulo e di salvare le modifiche effettuate. Quando si utilizza questa funzionalità Foxit Reader aggiunge sul modulo una filigrana (watermark) che tuttavia , come vedremo alla fine, può essere facilmente eliminata.

Usiamo quindi Foxit Reader 2.1 (o 2.2) per modificare i campi già presenti nel modulo PDf che abbiamo generato con OpenOffice per renderli più professionali.

Visualizzare ed attivare la barra degli strumenti di Editing

Dopo aver caricato il modulo PDF da modificare con Foxit Reader clicchiamo sul menù View → Toolbars → Advanced Editing Tools e, nel caso non sia selezionata, selezioniamo tale opzione in modo che la Barra degli strumenti di Editing venga visualizzata

La barra che dovremo utilizzare è la seguente

Clicchiamo ora sul pulsante della barra che rappresenta una freccia gialla, in modo da rendere attivi i campi e poterne modificare le proprietà

All’interno di ogni campo apparirà il nome che gli avevamo precedentemente assegnato con OpenOffice.

Caselle Data di Consegna e Orario

Facciamo un clic con il pulsante destro del mouse sopra il campo “Data”, che deve ospitare la data del periodo iniziale di consegna, e dal menù contestuale che appare, selezioniamo la voce “Properties”

Nella finestra delle Proprietà del Campo di Testo (Text Field Properties) che comparirà, clicchiamo sulla scheda “Format” e selezioniamo il formato “Date”, in modo da poter definire il formato della data che il campo accetterà.

Possiamo selezionare uno dei formati proposti (si tenga presente che d = giorno m = mese e y = anno) od inserire un nostro formato selezionando l’opzione “Custom” e digitando il formato desiderato.

Inserendo ad esempio d/m/yyyy si ottiene un tipo di data usuale in Italia (es 6/3/1955)

Possiamo ora aprire la scheda “General” e nel campo Tooltip, che riporta la scritta di aiuto che compare quando il mouse passa sopra al campo, scrivere un esempio del formato di data richiesto. A questo punto possiamo cliccare su “Close”

Se ora salviamo il modulo PDF, proviamo a riaprirlo con Acrobat Reader ed inseriamo nel campo Data un valore non accettabile, otteniamo la seguente risposta

In realtà non è necessario utilizzare Acrobat Reader per controllare il risultato del nostro lavoro. È infatti sufficiente cliccare all’interno di Foxit Reader il pulsante con la mano per passare dalla modalità di Editing alla modalità di semplice visualizzazione del documento.

Per ritornare alla modalità di Editing dovremo riselezionare il pulsante con la freccia gialla .

Eseguiamo le medesime operazioni per il campo Data1 nel quale deve essere immessa la data finale di consegna.

Impostiamo ora il formato dei campi Orario1 e Orario2 che devono contenere rispettivamente l’intervallo di orario della consegna. Con un clic destro del mouse sopra il campo Orario1 facciamo comparire il menù contestuale dal quale selezioniamo la voce “Properties”.

Clicchiamo sulla scheda Format e selezioniamo “Time”

Qui possiamo selezionare il formato classico HH.MM che genera un orario del tipo 17:45 o, se vogliamo, utilizzare ancora l’opzione “Custom” ed inserire un formato di nostro gradimento.

Caselle Quantità e Prezzo

Ora andiamo ai campi “Quantità” nei quali l’utente deve inserire le quantità di prodotti da ordinare. Con il solito clic destro del mouse apriamo la finestra delle proprietà e nella scheda “Format” selezioniamo “Number”. Selezioniamo infine il valore 0 per il numero di cifre decimali (decimal icche) permesse

Spostiamoci sui campi relativi ai Totali ed apriamone le proprietà. Nella scheda “Format” selezioniamo “2” per le cifre decimali, selezioniamo uno stile di separazione delle cifre che preveda la virgola per i decimali ed il punto per le migliaia.

Apriamo la scheda “Calculate”, selezioniamo l’opzione “Value is the” e dal menù a discesa che si attiva scegliamo “product(x)”.Clicchiamo ora sul pulsante “Pick..” che farà comparire una finestra nella quale appariranno tutti i nomi dei campi presenti nel modulo. Applicheremo un segno di spunta sul campo “p1” e “q1”.

In questo modo il campo “totale1” verrà automaticamente riempito con il risultato del prodotto tra il Prezzo 1 e la Quantità 1.

Eseguiamo la medesima operazione per il “totale2” che si otterrà come prodotto tra il valore del campo p2 (prezzo 2) ed il valore del campo q2 (quantità 2) e così via per gli altri totali.

Nel caso invece dell’ultimo campo “totale” che dovrà contenere la somma dei totali parziali precedenti, selezioniamo (sempre dalla scheda “Calculate” delle Proprietà) “Value is the sum(+)” e, dopo aver cliccato sul pulsante “Pick…”, mettiamo un segno di spunta sui campi da totale1 a totale5.

Pulsanti Spese di Spedizione

Apriamo ora la finestra delle Proprietà del primo dei 3 pulsanti di scelta relativi alle “Spese di spedizione” e andiamo alla scheda “Appearance” dove, a differenza di OpenOffice, possiamo scegliere un diverso aspetto del pulsante

Apriamo la scheda “Actions”, selezioniamo Select Trigger → Mouse Up e Select Action → Run Javascript, In modo che al clic del mouse sul pulsante di opzione venga eseguito un comando javascript. Clicchiamo sul pulsante “Add…” e, nella finestra che compare, scriviamo la seguente istruzione (senza virgolette) “this.getField(“TotaleSpese”).value=this.getField(“Spese”).value”. A questo punto clicchiamo sul pulsante “Save” per salvare l’istruzione Javascript.

In questo modo, quando l’utente cliiccherà sul pulsante delle spese, l’importo relativo verrà automaticamente inserito nel campo “TotaleSpese”.

Prima di chiudere la finestra delle proprietà del pulsante “Spese di Spedizione”, apriamo la scheda “Option” e scriviamo nella casella “Export Value” il valore che verrà esportato nella casella TotaleSpese” nel caso in cui questo pulsante venga selezionato dall’utente.

Eseguiamo le medesime operazioni (compreso il codice javascript) anche per gli altri due pulsanti di selezione delle Spese di Spedizione, con l’avvertenza che in questo caso i valori da esportare sono diversi (18,50 e 25,00).

Casella IVA

Nella barra degli strumenti di Foxit Reader clicchiamo sullo pulsante “Text Field”, che ci permetterà di tracciare una nuova casella di testo nel modulo PDF

Vicino alla casella che riporta l’aliquota IVA del 20% tracciamo una nuova casella di testo

Apriamone le Proprietà con un clic destro del mouse e nella scheda “General” inseriamo come nome “percento”. Sempre nella stessa scheda selezioniamo Form Field :Hidden, in modo che la casella non risulti visibile all’utente finale.

Selezioniamo la scheda “Options” e in “Default value” inseriamo il valore 0.01 (con il punto e non con la virgola)

Apriamo ora le Proprietà della Casella di testo “IVA” che deve contenere l’importo dell’IVA relativa ai prodotti precedentemente selezionati. Nella scheda “Format” selezioniamo il formato numero (“number”) con 2 cifre decimali e uno stile di separazione delle cifre che preveda la virgola per i decimali ed il punto per le migliaia.

Passiamo alla scheda “Calculate”, selezioniamo l’opzione “Value is the” e dal menù a discesa che si attiva scegliamo “product(x)”.Clicchiamo ora sul pulsante “Pick..” che farà comparire una finestra nella quale appariranno tutti i nomi dei campi presenti nel modulo. Applicheremo un segno di spunta sul campo “aliquota”, “percento” e “totale”. In questo modo il campo “IVA” verrà automaticamente riempito con il risultato dell’importo dell’IVA.

Casella Totale Generale

Apriamo le Proprietà della Casella di testo “Totale Generale” che deve contenere l’importo complessivo da pagare. Nella scheda “Format” selezioniamo il formato numero (“number”) con 2 cifre decimali e uno stile di separazione delle cifre che preveda la virgola per i decimali ed il punto per le migliaia. Selezioniamo inoltre come divisa l’euro, in modo che il suo simbolo compaia dinanzi alla somma totale da pagare.

Passiamo alla scheda “Calculate” selezioniamo l’opzione “Value is the” e dal menù a discesa che si attiva scegliamo “sum(+)”.Clicchiamo ora sul pulsante “Pick..” che farà comparire una finestra nella quale appariranno tutti i nomi dei campi presenti nel modulo.

Applicheremo un segno di spunta sul campo “IVA”, “TotaleSpese” e “totale”. In questo modo il campo “Totale Generale” verrà automaticamente riempito con il risultato di tale somma.

Caselle di Controllo “Termini di Vendita” e “Privacy”

Apriamo la finestra delle Proprietà della casella di controllo (check box) relativa all’accettazione da parte dell’utente dei “Termini di Vendita” e andiamo alla scheda “Appearance” dove, a differenza di OpenOffice, possiamo scegliere un diverso aspetto del segno di spunta che comparirà una volta selezionato il check box.

Casella Data

Apriamo le Proprietà della casella “Data2”. Clicchiamo sulla scheda “Actions”, selezioniamo Select Trigger → Mouse Up e Select Action → Run Javascript, in modo che al clic del mouse sulla casella venga eseguito un comando javascript. Clicchiamo sul pulsante “Add…” e, nella finestra che compare, scriviamo la seguente istruzione

var f = this.getField(“Data2”);

f.value = util.printd(“d/m/yyyy”, new Date());

A questo punto clicchiamo sul pulsante “Save” per salvare l’istruzione Javascript.

Quando l’utente cliccherà sulla casella data comparirà automaticamente la data del computer.

Rimozione watermark

Finchè si modificano le proprietà di campi già esistenti Foxit Reader non inserisce alcun watermark (filigrana) nella pagina, ma se lo utilizziamo per inserire campi nuovi (caselle di testo, pulsanti etc) allora aggiunge la seguente scritta

La scritta può essere facilmente rimossa utilizzando PDF-Xchange Viewer 2.0.

E’ sufficiente caricare il file PDF con PDF-Xchange Viewer, selezionare la scritta cliccandoci sopra, premere il pulsante CANC da tastiera oppure selezionare da menù il comando Edit → Cut e successivamente risalvare il file PDF ripulito.

2° metodo

Usiamo al posto di OpenOffice un qualsiasi altro editor di testo (MSWord, AbiWord etc) per scrivere il testo del nostro modulo, lasciando degli spazi bianchi in corrispondenza dei campi per l’immissione di dati che abbiamo intenzione di inserire.

Possiamo ad esempio costruire uno schema di dichiarazione sostitutiva di certificazione come il seguente

DICHIARAZIONE SOSTITUTIVA DI CERTIFICAZIONE

(art. 46 del D.P.R. 28 dicembre 2000 n. 445)

sottoscritt , nat a ( ) il , residente a ( ), in , tel. , documento di identità

consapevole delle conseguenze anche penali delle dichiarazioni non veritiere prodotte alla pubblica Amministrazione, richiamate dall’art. 76 del D.P.R. n. 445/2000

DICHIARA

di essere nat a il

di essere residente a ( ), in

che la famiglia convivente così composta:

Cognome e Nome	Luogo e Data di nascita	Rapporto di parentela

Il sottoscritto dichiara inoltre ai sensi dell’art. 13 del D.Lgs.n.196 del 30 giugno 2003, di essere stato informato che i dati personali contenuti nella presente dichiarazione saranno trattati, anche con strumenti informatici, esclusivamente nell’ambito del procedimento per il quale la presente dichiarazione viene resa.

Luogo e data

Il dichiarante

____________________

La presente dichiarazione non va autenticata e sostituisce in via definitiva, per tutti gli effetti i certificati richiesti o destinati alle pubbliche amministrazioni, ai gestori di pubblici servizi ed ai privati che vi consentono.

Mandiamo ora in stampa il modello creato utilizzando una stampante PDF virtuale (PDFCreator, DoPDF etc) ed otteniamo così un file PDF che potremo modificare con Foxit Reader.

Apriamo dunque il file PDF così ottenuto con Foxit Reader per inserire i campi editabili.

Selezioniamo il pulsante “Combo Box Field” (casella combinata) di Foxit Reader

ed inseriamo una casella combinata davanti alla parola “sottoscritt”

Apparirà automaticamente la finestra delle Proprietà. Lasciamo il nome che il programma assegna di default (Combo Box0). Andiamo sulla scheda “Appearance” e selezioniamo Line Style → Solid. Nel riquadro sottostante (text) scegliamo lo stesso tipo e le stesse dimensioni di Font che abbiamo usato per scrivere il modulo. (nel nostro caso Verdana 10)

Apriamo poi la scheda “Options” ed introduciamo le opzioni che l’utente dovrà selezionare. Nella casella “Item” scriviamo “Il” e poi clicchiamo sul pulsante “Add”. Poi scriviamo “La” e clicchiamo ancora su “Add”.

In questo modo, al momento della compilazione l’utente potrà effettuare la seguente selezione

Inseriamo ora un altro Combo Box dopo la parola “sottoscritt” che contenga come opzioni la lettera “a” e la lettera “o” necessarie per completare la parola.

Facciamo un clic con il pulsante destro del mouse sul combo box e dal menu contestuale selezioniamo “Create Multiple Copies…”. Nella finestra che appare selezioniamo 3 copie (in totale) e mettiamo un segno di spunta sulla casella “Same Name”

In questo modo otteniamo altri due combo box con le medesime opzioni che possiamo spostare dopo le parole “nat”. Poiché i tre controlli hanno il medesimo nome, quando l’utente effettua una selezione su di uno di essi, anche gli altri due effettuano automaticamente la medesima selezione.

Clicchiamo ora sullo strumento “Text Field” della barra di Foxit per poter inserire i campi di testo che dovranno ricevere i dati dell’utente.

Tracciamo una casella di testo dopo la parola “Io sottoscritto” che dovrà ospitare Nome e Cognome dell’utente. Nella finestra “Proprietà” che apparirà selezioniamo la scheda “General” e come Tooltip scriviamo “Inserisci Cognome e Nome” (è il suggerimento che comparirà quando l’utente passa con il mouse sopra la casella”.

Nella scheda “Appearance” scegliamo “Line → Style Solid” e nel riquadro sottostante (text) scegliamo lo stesso tipo e le stesse dimensioni di Font che abbiamo usato per scrivere il modulo.

Nella scheda “Options” scegliamo “Alignment → Right”

Chiudiamo la finestra delle Proprietà e facciamo un clic destro sopra la casella di testo appena inserita. Dal menù contestuale selezioniamo la voce “Use Current Properies as New Default” in modo che le nuove caselle di testo che tracceremo presentino in automatico lo stesso font e le stesse caratteristiche di formattazione.

Possiamo ora creare le caselle di testo per inserire tutti gli altri dati (Comune e data di nascita, comune di residenza etc)

Creiamo ora un duplicato (clic destro del mouse sulla casella → “Create Multiple Copies”) con lo stesso nome delle caselle di testo che si ripetono (comune di nascita, comune di residenza) e spostiamo i duplicati nella sottostante sezione dichiarativa, in modo che l’utente non debba scrivere per due volte i medesimi dati.

Inseriamo una casella di testo nella prima cella della tabella “Cognome e Nome” e poi creiamone 6 duplicati, questa volta senza spuntare l’opzione “same name”, per poter riempire tutta la colonne della tabella

Eseguiamo la medesima operazione per la colonna “Luogo e Data di Nascita”.

Riempiamo invece la terza colonna con 6 copie di un controllo Combo Box (ciascuna con un nome diverso), in cui avremo inserito come “item” nella scheda “Options” delle Proprietà i diversi gradi di parentela (marito, moglie, figlio, figlia etc)

Inseriamo infine una serie di copie del medesimo Combo Box (ciascuna con un nome diverso) che riportino come items altre possibili dichiarazioni dell’utente.

Chiudiamo il modulo con due caselle di testo per “Luogo” e “Data”.

La casella data può ovviamente essere riempita in automatico come abbiamo già fatto in precedenza con un opportuno javascript.