How to customize your Document in PerfectForms Created by Karen Sliger
In this tutorial, we will be covering:-How to create and name a new form.-How to customize your PerfectForms forms using sizing, borders, backgroundcolor, and images.-How to save and preview it as a web form.It is designed to be self-paced and could take as long as needed to completethe tutorial, if you plan to work along. If you go through without workingalong, the tutorial will take 10-15 minutes.You can use the navigation arrows at the bottom right corner to gothrough the tutorial or you can pick a specific topic: Creating and Setting up a New Form Sizing, Borders, & Backgrounds Adding an Image to the Form Creating an Accent BorderYou can come back to this page by clicking the HOME button at thebottom of the page.
Creating and Setting up a New FormFirst, open a new form bygoing to New and selectingForm.
Then you will be giventhe option to name yourform. I named this one“Training Registration.”Select Apply Changesonce you have namedthe form.
Once you have applied thechanges, you will be brought tothis screen. You will noticeseveral different buttons at thebottom of the page. For thistutorial, we will only use theDesign button.Select the Design button now.
You should now have a screen showing something similar to this. Form Properties PanelToolbox Panel Your screen may not show you The Toolbox or Form Properties Panels. That’s ok, we’ll open those on the next page…
To make sure your Toolbox Panel and FormProperty Panels are showing, Go to View.Look for Toolbar and Property Bar and makesure each have a checkmark beside them. If they do not, select them now.
Sizing, Borders, & BackgroundsNow we want to take a look at our Form Properties Panel.This is where you can change different aspects of the form.You can change The size as well as the grid structure color,etc.Let’s change the dimensions of the form itself. For thisexample, I chose 12 x 15 inches. You may need to changeyour units in the drop down menu beside the width. Thedefault on most forms is set to pixels. Unless you are veryfamiliar with pixels, it is better to change to inches.Next, let’s give our form a border. To do this, select theShow a Frame option. We can also change the color of thisborder. Beside the color option, you will notice a black boxwith a little black triangle in the corner. If you select thiscorner, it will pull out a large color chart. You can selectcolors from this or if you know the code of color you wouldlike to use, you can plug it in beside the black box. For thesake of this tutorial and our design, I am leaving this at thedefault Black.You can also choose how big you want the border and if youwant rounded corners or not. Take a minute and play withyour form to see the difference in the sizes, colors and look ofthe rounded corners.
Next, we will click inside the grid. You will notice that the FormProperties panel has now been changed to Page Properties.Here we can give each page of the form its own title or leave it aspage 1, page 2, etc. This will not show up on the form but rather isused for organization.On this panel, you also have the option to change the Backgroundcolor of the form. For this example, I chose a light gray color.Again, you will notice the black box with the black triangle. If youselect the triangle, it will give you a color chart in which you canchoose the color you like.Go ahead and take some time to work with the background colors onyour form.
Now your form should look something like this. But we’re not done yet!!
Adding an Image to the Form Now we are going to look at adding a graphic to the form. To do this, we will now going begin using our Toolbar Panel located on the left-side of the screen. Notice at the top there is an icon of a wrench and a page with an arrow. The wrench icon takes you to the Tools panel that will be used to give life to your form. The Arrow allows you to add and select different pages of the form, change permissions of certain viewers that enables them to see hidden areas, etc, and also to add images. Click the Arrow.To add your image, make sure it is saved on your computer oron a connected drive and select the + beside Assets.You will then be given a box to browse for your file. Onceyou find your image, select it and click next. You will then begiven the option to Name your image then click ok.
Next, click the wrench. Go down to Picture. Click andhold down your mouse and drag it the form. Youshould see an icon like this on your form.Go ahead and try this now.
Now, you will switch back over to the Properties Panel andnotice that now that you have the picture selected, we aregiven Picture Properties.Click the drop-down menu next to Asset. Find your imagethere. You can see the name of the image used for thistutorial in the example.Select the image.From the Properties panel, you can also tell it to Maintain theimage ratio, stretch, etc.
Your image should now be on the form.You can use the double-sided arrow toresize your image as needed.Go ahead a take a few minutes to placeyour image and resize it.Notice that you can also move the locationof your image on the form by clicking anddragging it. Find the right placement andthen we’ll go to the next step.
Creating an Accent BorderNow I am going to show you how to create a second border.Click somewhere inside the form. Go back to your Toolbarpanel. Make sure the wrench is selected at the top.Find the Horizontal Separator, click and drag it onto the form.
With separator selected, go to the Properties Panel. Here you can name the separator if you wouldlike. For this tutorial, we will just leave it at its default.Under Style, you can change the color and size of the line. Again, you will find the black box with theblack triangle. Clicking on the triangle will give you the color chart. For this form, I chose an orangeto match the orange in my image and selected the size to be a 2.Take some time to customize your separator’s color and size.
Make sure the separator is selected and drag it up right below the frame. Once you have it positioned, place your cursor at the end of the line to get the double arrow and click and drag the mouse to stretch the separator to measure the width of the form.Once it is the size you need, right click and selectcopy item. Click inside the form, right-click andselect paste item. Now you have the bottom ofyour border. Click and drag this separator to thebottom of the form.
Click inside the form and go to your Toolbox Panel. Thistime select the Vertical Separator. Go through the samesteps we followed to customize and position the HorizontalSeparator.Spend some time now getting your Vertical Separators set.
Your form should now be customized and look similar to this(but with the bottom border…my computer cut it off whendownloading the image.)
Don’t forget to save all your hard work. Save is found under Form at the top right corner of the screen.Under Form, you also have the option to Previewwhat your form will look like on the web. Use this tosee if it looks right or if there is anything you need tochange.You have now successfully customized your form!!!
References-PerfectForms http://www.perfectforms.com/-Mike Abney, an example of his work in PerfectForms:http://app.perfectforms.com/player.htm?f=H8zAggCn-Some examples of Karen Sliger’s forms and surveys can be viewed at:http://app.perfectforms.com/player.htm?f=VEmggAcDhttp://app.perfectforms.com/player.htm?f=jMVgAgQEhttp://app.perfectforms.com/player.htm?f=J03AggQmhttp://app.perfectforms.com/player.htm?f=oe5AgA8H