Create a Simple SmartForm

Creating a New Form

Using Adobe Acrobat 1. Choose Forms > Create New Form 2. Choose Select a Template. Select Continue. 3. From the Select a Category drop down menu choose Blank. Select A4 paper size then Next. 4. Leave Add an Email Button and Add a Print Button checked and enter the email address that the form data is to be sent to during testing. Select Finish. 5. Designer is launched displaying the new form. Using Adobe Designer 1. Choose File > New 2. The New Form assistant is launched which will lead you through the four steps for creating a blank form design. Select the New Blank Form radio button. Select Next. 3. Select A4 page size and leave number of pages as 1. Select Next. 4. Select the Fill then Submit/Print option. This will place Submit and Print buttons on the form. Select Next. 5. Enter the email that the form data is to be sent to during testing. Select Finish.

Setting up the Workspace

1. To create and edit forms you will need access to the Library, Object, Layout and Accessibility palettes plus the Hierarchy, PDF Structure and Data View tabs. 2. If they are not displayed by default when the application is opened, select them from the Window menu in the Toolbar.

Add an Image
1. From the Library palette under Standard drag the Image icon across to the form.

2. Right click in the image box and select Choose Image from the menu. 3. Select an image from your own files and readjust the size by selecting and dragging the blue squares on the image box.

Add text
1. From the Library palette under Standard drag the Text icon across to the form. 2. Readjust the text box size to your liking and type in the heading "Motor Vehicle Registration". You can change the font and font size as you would in any other application by using the drop down menus in the toolbar.

Subforms
When designing the form it is a good idea to organise the Hierarchy into sections. This can help with the layout and creating dynamic functionality. Subforms are an effective way of organising logical groups of information within a form. They make it easier to maintain and change the form, and to read data submitted in a XML file. Adding subforms can be done as you develop the form by dragging the Subform icon onto the form from the Library palette under Standard. You can then place the desired form objects within that subform. Alternatively you can develop the form. then place the desired objects within a subform by either: a) Dragging the Subform icon across to the form, then moving the form objects in the Hierarchy menu and placing them beneath that subform; or b) Selecting all of the desired fields (from the form or the Hierarchy), right-clicking and choosing Wrap in subform.

Create Subforms
1. From the Library palette under Standard drag the Subform icon across to the form. Under Binding, in the Object palette, name the subform "sPersonal". 2. From the Library palette under Standard drag the Text icon across to the form and place within the sPersonal subform. Enter the text, "Personal Details". This is the heading of the group of information to be contained in the sPersonal subform. 3. From the Library palette under Custom drag the Name icon across to the form and place it under the Personal Details heading.

4. This is a block of related fields, First Name, Last Name and Initial. Delete the Initial field. 5. Drag a Text Field icon across to the form and place it beneath the name text boxes. Rename the field as "Car Registration Number" by either double-clicking over the default caption of "Text Field" within the form or by going to the Field tab under the Object palette and changing the text in the Caption field. This is just the name of the field to be displayed in the form. To provide the field with a meaningful name in the XML go to the Binding tab and name it "CarRegNo". 6. From the Library palette under Standard drag the Date/Time Field icon across to the form and place it next to the Car Registration Number field. Rename it as "Date of Birth" by double-clicking on the text in the field or by changing the Caption text under the Field tab in the Object palette. Name it "DOB" in the Binding tab. 7. From the Library palette under Standard drag the Text Field icon across to the form and place under the Car Registration Number field. Name it "Phone Contact" in the Field tab and "Phone" in the Binding tab. 8. In the Object palette under Field enter the pattern 99 9999 9999 in the Edit Pattern field. Now choose it from the Display Pattern drop down menu. This sets the display pattern in the form so that when a user types in 9999999999 it will change to show as 99 9999 9999 when they leave the text field. Select the limit length checkbox and enter Max Char 10. 9. Also set a validation rule that the user must enter 10 digits in the field or else an error message will be displayed. Under the Value tab select 99 9999 9999 as the Validation Pattern then select the Error checkbox for Validation Pattern Message. Enter the message "The telephone number must contain 10 characters". 10. Under the Binding tab select 99 9999 9999 as the Data Pattern. 11. Copy the Phone Contact field and paste it next to it. Rename it as "Mobile Contact" in the Field tab and "Mobile" in the Binding tab. 12. Follow steps 7-9, as for the Phone Contact field, but using the pattern 9999 999 999 and change the error message to "The mobile number must contain 10 characters". 13. From the Library palette under Standard drag the Text Field icon across to the form and place it under the Phone Contact field. Name it "Email" in the Field tab and the Binding tab.

14. Select A'@'A'.'AAA from Display Pattern under the Field tab and from the Data Pattern drop down menu in the Binding tab. There are problems with using the Validation Pattern option under the Value tab in Designer. Once this is set the user will continually be displayed the invalid email error message even though they have entered an email in the correct format. Ultimately the user will not be permitted to submit the form because of this error loop. Use the following JavaScript for validation instead. Delete formatTest="error" from <validate> then place the JavaScript between: <validate> and </validate>

<script contentType="application/x-javascript"> var r = new RegExp(); r.compile("^[a-z0-9_\\-\\.]+\\@[a-z0-9_\\-\\.]+\\.[a-z]{2,3}$","i"); var result = r.test(this.rawValue); if (result == true) true; else false; </script> <message> <text name="scriptTest">Please enter a valid email address eg. Joe@email.com</text> </message> 15. From the Library palette under Standard drag the Subform icon across to the form and under the Binding tab name it "sAddress". 16. From the Library palette under Standard drag the Text icon across to the form and place it in the sAddress subform. Enter the text "Address". This is the heading of the group of information to be contained in the sAddress subform. 17. From the Library palette under Custom drag the Address Block icon across to the form and place it under the heading. Delete the Name and Country fields from this block. Rename the Zip Code field to "Postcode" in the Field and Binding tabs. Also change City to "Suburb". 18. Select the State field and choose Drop-down list from the Type menu under the Field tab in the Object palette.

19. In the Object palette under the Field tab you will now see a List Items box. Select the green + symbol and type in the Australian states.

20. From the Library palette under Standard drag the Subform icon across to the form and under the Binding tab name it "sPostal". 21. From the Library palette under Standard drag the Text icon across to the form and place it in the sPostal subform. Enter the text "Postal Address". This is the heading of the group of information to be contained in the sPostal subform.

22. From the Library palette under Standard drag across the Checkbox icon and name it "Same as above". Select all the address fields in the sAddress subform and copy them into the sPostal subform below the checkbox. When the user selects the "Same as above" checkbox the data from the sAddress fields will be copied to the sPostal fields. To add this functionality you will need to use JavaScript. The JavaScript should state that if the button is checked, assign the Postal Address values to be equal to the Address values. Select the Same as above checkbox and choose the XML Source tab. This should be next to the Design View and PDF Preview tabs above the document working space. If it is not displayed select XML Source from the View menu. Place the 'event' JavaScript between: <items> <integer>1</integer> <integer>0</integer> <integer>2</integer> </items> and </field>

<event activity="click"> <script contentType="application/x-javascript">if (this.rawValue == 1){ Address.rawValue = this.parent.parent.sAddress.Address.rawValue; Suburb.rawValue = this.parent.parent.sAddress.Suburb.rawValue; Postcode.rawValue = this.parent.parent.sAddress.Postcode.rawValue; State.rawValue = this.parent.parent.sAddress.State.rawValue; } else if (this.rawValue == 0){ Address.rawValue = ""; State.rawValue = ""; Postcode.rawValue = ""; Suburb.rawValue = ""; }</script> </event> <traversal> <traverse ref="sPostal[0].sAddress[0]"/> </traversal>

23. From the Library palette under Standard drag the Subform icon across to the form and under the Binding tab name it "sRegPeriod". 24. From the Library palette under Standard drag the Text icon across to the form and place it in the sRegPeriod subform. Enter the text "Period of Registration". This is the heading of the group of information to be contained in the sRegPeriod subform.

25. From the Library palette under Standard drag four radio buttons across to the form and place them next to each other under the Period of Registration heading. Highlight the text in each radio button on the form and name them 3 months, 6 months, 9 months, and 12 months. You'll notice these values are now recorded under the Field and Binding tabs. 26. From the Library palette under Standard drag the Text Field icon across to the form and place it beneath the radio buttons. Label it "Total:" under the Field tab and "Total" under the Binding tab. Under the Value tab choose type Read Only. 27. Each radio button has a dollar amount that will be displayed in the Total field once selected. To add this functionality use the JavaScript below. Select a radio button on the form then select the XML Source tab. Place the 'event' JavaScript at the end of the radio list field. After: <items> <integer>4</integer> </items> </field>

<event activity="click"> <script contentType="application/x-javascript">if (this.rawValue == 1){ Total.rawValue = "$300"; }else if (this.rawValue == 2){ Total.rawValue = "$600"; }else if (this.rawValue == 3){ Total.rawValue = "$900"; }else if (this.rawValue == 4){ Total.rawValue = "$1200"; }</script> </event>

28. From the Library palette under Standard drag the Subform icon across to the form and under the Binding tab name it "sPayment". 29. From the Library palette under Standard drag the Text icon across to the form and place it in the sPayment subform. Enter the text "Payment Details". This is the heading of the group of information to be contained in the sPayment subform. 30. From the Library palette under Standard drag the Text icon across to the form and place it beneath the heading. Enter the text "You can pay in person at a Government shopfront or by credit card. Provide your credit card details below and submit this form by printing it and faxing to 1800 345 678 or by emailing it (in which case you will need to use a digital signature)".

31. From the Library palette under Standard drag the Drop-down List icon across to the form and place it under the textbox. Name it "Card Type" under the Field tab and select the green + symbol for the List Items box. Add the values Visa and Mastercard. Name the field "CardType" in the Binding tab. 32. From the Library palette under Standard drag the Date/Time Field icon across to the form and place it next to Card Type. Name it "Expiry" in the Field tab and "CardExpiry" in the Bindings tab. 33. In the Object palette under the Field tab type in the Edit Pattern box, MM-YY then select that value from the Display pattern box menu. Choose MM-YY from the Validation Pattern menu under the Value tab and from the Data Pattern menu under the Binding tab. 34. From the Library palette under Standard drag the Document Signature icon across to the form and place it beneath the Card Type field. Name it "Signature" under the Field tab. In order for the Document Signature field to work for users (for them to be able to attach their digital certificate to the form) the form needs to be reader-enabled. This can be done by the SmartForms Support Team. You can find information about Adobe LiveCycle Reader Extensions and digital signatures in the SmartForms Developer Centre website. 35. From the Library palette under Standard drag across the Date/Time Field icon and place it next to the Signature field. Name it "Date" under the Field tab and "DateSign" under the Binding tab.

10