formVista™ Users Guide
For this section we will assume you have either chosen one of the placeholder sites or have had a web developer create a formVista site for you. Beyond just content, iCMS allows you to manage almost every aspect of your business website.
Before you can do anything, you must log into the formVista backend. In your browser in the address bar enter the name of your website followed by /formvista/backend. You will see a login screen similar to the following:
Illustration 1: formVista Backend Login
Enter the backend login email address and password that was provided during setup or that was provided to you by the person who set formVista up for you. If you do not have this information, ask the individual who installed the software for you. Alternatively, you can click on the Forgot Your Password link.
Once you log in you will be presented with the formVista home page:
Illustration 2: formVista Home Page
Click on the "Integrated Content Manager (iCMS)" link to start working with your website.
You will be presented with a screen that looks like this:
The iCMS editor is broken up into three sections.
When viewed from the Edit Content tab your website will display (edit) links allowing you to edit content.
The most basic task using formVista's iCMS is to edit text content. This is done much the same way as writing a document in a word processor.
Click on a page listed on the left pane that you want to work with. That page will then appear in the right pane and the Edit Content tab will be selected. Find and click on an "(edit text)" link on the page.
If you have clicked on a text hotspot, identified by an (edit text) link, you will be presented with a WYSIWYG (what you see is what you get) editor containing the text that was next to the (edit text) link.
Illustration 4: The WYSIWYG HtmlEditor
This is an example of the HTML WYSIWYG editor that ships with formVista iCMS. It has many of the same features that a typical word processor has. To activate the editor click in the content window and the top button bar will activate.
If you hover over a button in the editor the tooltip will tell you what the button does.
From left to right across the top of the editor, the buttons functions of the editor are:
A common task is to insert links into your content either to the pages on your own website or to pages on external websites.
To create a link, click and drag your mouse over the text that you want to turn into a link. Then click the link icon on the toolbar which looks like:
When you click on the link icon, the linking tool will be displayed:
Illustration 5: Linker Tool in HTML Editor
The pages, both published and unpublished, will be displayed in the left pane of the linker tool. To turn the text you selected above into a link to a local page, just select a page from the list on the left. A specially formatted URL will be displayed in the URL: box on the right.
You must click the OK button at the bottom of the Linker tool for the link to take effect.
An advantage of iCMS is that all internal links automatically update if you have to move or change the name of one of your pages.
Note: When you publish your pages you have to make sure that any pages you link to are also published.
To link to an external site, simply enter the full webpage address, including the http://, in the URL; bar on the right. Click OK at the bottom of the Linker tool for the link to take effect.
Optionally, you can select the New Window option to cause your link to appear in a new browser window.
Note: as of this writing, both the popup window option and email link options are non-functional.
To link to a blog article, forum post or shared photo, you must first copy the Permalink from the item you want to link to. For blog articles, there is a permalink link at the bottom of the article. The permalink for forum posts is the number on the right. Shared photos also have a permalink link. Basically linking to these items involves copying the link and then pasting it in the URL: box in the Linker tool.
This can sometimes involve a few handstands, as you must first navigate to the item in question, copy it's permalink, then navigate back to the page, click the (edit text) button, select the text to link, click the linker icon, and then paste the link into the URL: box.
Note: You can open a second window to your site for the purpose of copying the links.
Linking to other user provided content such as member profiles, tickets, etc follows a similar process.
To organize content into tables, such as the multi-column layout in the formvista.com features page,
requires the use of tables.
To insert a table, click the Table tool icon in the HTML Editor button bar. This will open the Table tool:
Illustration 6: HTML Editor Table Tool
You can also set:
Note: In the current version of the editor there is no way to change the parameters of the table without actually editing the HTML source.
If you insert a table without borders, click in the area of the table to see the individual cells.
Once inserted, you can change the alignment of the content of each table cell individually by right clicking in a cell:
Illustration 7: Alignining Table Cell Content
Note:To remove a table, you must carefully right click on one of the outer edges of the table to get the Remove <Table> Element option.
The HTML Editor supports uploading, managing and inserting images directly into your content. You can insert GIF, JPG or PNG files.
To insert an image. click in the HTML Editor in the place where you would like the image to be inserted then click the Image Manager tool icon in the toolbar:
The Image Manager tool will appear in a popup window:
Illustration 8: Image Manager Tool
Illustration 8: Image Manager Tool
To upload an image from your computer, first click on the Browse button to select the image you would like to upload. Then click the upload button. After a few seconds the image you uploaded should appear in the in the center section:
Illustration 9: Image Manager Tool after Image Upload
Illustration 9: Image Manager Tool after Image Upload
To insert the image you just uploaded into the content, just click on the image and it will appear in the lower right box. Then click OK and it will be inserted into the content at the cursor position.
Optionally, you can select to align the image in the content, which will cause the text to flow around the image. You can also specific a margin and padding in pixels to provide some space around the image. In addition you can specify a border.
To change the parameters of an image after it's been inserted, just right click on the image and select Image Properties.
When the number of images becomes large, it's often a good idea to organize them into folders. The "New Folder" icon is visible above the browse button. Click on that icon to create a subdirectory. A directory icon including the name of the newly created directory will appear in the center window. You can select the directory by clicking on it. You can navigate through directories quickly using the Directory drop down.
To delete an image or directory, click on the trashcan icon next to the image or directory.
Note: Do not delete an image that is used in any content on any pages in iCMS otherwise a broken image will be displayed in it's place.
Before any changes you make to a page are visible on the "Live Site" you must first publish the page.
To publish a page, select the page from the left navigation pane in iCMS and then click the Publish tab.
To publish the page click the "Publish" button. The system will provide you some feedback as each hotspot on the page is published.
Once published, click the Live Site tab to view your published live page.
As of this writing, pages must be published individually.
Note: Make sure that all pages linked to from your published pages are also published. This is especially true of pages that are used in settings such as the landing page in a login hotspot.
To add a new page to your website click the Add Page link in the left pane. You will be presented with a form that looks like:
Illustration 10: Add Page Form
The second name is the name as it appears in the URL in the browser bar. This should be a shorter name and should not contain any spaces. For instance, on the formVista site, the homepage url name is "index".
The next three fields are the "Meta Tags" for the page.
Note: Under Site Options you can set a site wide set of default Meta Tags so that you do not have to enter Meta Tags for each and every page.
The next Page Template setting determines what type of page you would like to create. As mentioned in Key Concepts section, the page template you select will determine what hotspot types are available for that page. See below for a list of the page types that are included with formVista.
A web developer can create new page types. See the Commercial services page for a list of developers.
The "Sub Page Of" setting allows you to insert this page under another page.
"Show In Navigation" controls how this page will be displayed in the navigation tree.
"Protect Using Page" determines whether or not this page should be password protected. If this is to be a password protected page, you must first have created a login page which you select here to protect this page. See Login below.
The themes that are included with formVista include a number of different page templates that cover the typical use cases. As mentioned above, a web designer can easily create new page templates.
The page templates included with formVista all include a base set of hotspots including an block of introductory text spot, a title, a upper left hand graphic and an account strip.
The following page types are included:
For instructions on how to configure the hotspots included on these page types please refer to Editing Other Hotspot Types
Pages in iCMS are deleted from the Properties tab. Select the page that you want to delete from the left pane navigation tree and then select the Properties tab.
Note: Make sure that the page listed on the page properties form is actually the page you want to delete.
IMPORTANT: As of this writing, deleting a page on the staging side immediately deletes the corresponding page on the live site.
Deleting a page will also delete any local content for that page. Global content on that page will not be affected.
After a page is created, you can use the Properties tab to change it's properties including moving it around in the navigation tree. See the Adding Pages section for an explanation of the fields on the properties form.
Note: You can change the position of a page in a level in the navigation tree by setting the "Move to Position" dropdown OR you can move the page to be a subpage of another one, but not both simultaneously.
There are a few settings that affect the entire front end website. These can be set from the Site Options tab.
The Meta Tags option enables you to set the default set of meta tags that are applied to all pages where no page specific meta tags have been set in the Page Properties.
This section allows you to enable ads which can be displayed automatically in various places including in discussion forums and blogs.
MyLegalFirewall is a third party legal document drafting service that accomplishes two key things needed by any business website:
For more information on MyLegalFirewall see the MyLegalFirewall description.
The selected them can be changed on the fly from this menu. The stock formVista themes are listed followed by any locally created or installed themes. Simply check the box next to the theme you would like to use and both the Live Site and the Staging Site will immediately use the new theme.
It is possible to include multiple differently configured websites in the same formvista database. This is an advanced feature.
There are quite a number of different hotspot types that can be mixed and matched in page templates. New hotspot types are regularly being developed.
As of this writing, formVista™ supports the PayPal Websites Payments Standard Ecommerce solution.
Configuring formVista¨ for use with the PayPal Website involves a number of steps including:
formVista™ supports PayPal's Encrypted Website Payments feature for more secure payment transactions. Unencrypted payments are not supported.
To support Encrypted Website Payments, setup of this feature will require that you generate public key encryption files using the "openssl" command. You may have access to the "openssl" command on your web server or you may have to download and install OpenSSL in order to generate your keys.
If you do not have access to OpenSSL or you need help please ask for help in the formVista™ Forum. Commercial support is also available through the formVista™ website.
There is documentation available on the PayPal site covering how to generate your keys::
Setting Up Certificates Before Using Encrypted Website Payments
PayPal also supports encrypting the actual product button HTML code. formVista™ does it's own encryption of the PayPal button code in support of it's own shopping cart page, so you should not use the PayPal encrypted buttons feature.
Potential Pitfalls: This ecommerce solution only works when you have the formVista™ ENCRYPT_HIDDEN configuration setting turned on, which is the default.
This shopping cart feature involves creating individual Add to Cart buttons for each item you wish to sell. formVista™ manages the shopping cart itself.
The following steps are need to set up the PayPal Standard support.
Please refer to the PayPal documentation on creating your keys and certificates:
Setting Up Certificates Before Using Encrypted Website Payments\
Roughly, the steps are:
For each item you wish to sell, you will need to create a PayPal Websites Payment Standard button using the Button Creator at PayPal. These buttons include all the details of the product you are offering including the item id, name, price, shipping, etc. If you want to change any of these details you will need to use the Button Creator at PayPal to create a new button.
Please note that PayPal includes a feature to encrypt your PayPal buttons for you. formVista™ encrypts your PayPal button code automatically so that it can integrate with the formVista local shopping cart. Please do not use the PayPal button encryption feature.
To create your product buttons please follow these stesp:
Example button code:
<form target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="5F5UBFP7RSQSC">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="TEST4 WIDGET">
<input type="hidden" name="item_number" value="TEST4">
<input type="hidden" name="amount" value="100.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="cn" value="Add special instructions to the seller">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="tax_rate" value="2.000">
<input type="hidden" name="shipping" value="12.00">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Potential Pitfall: If the email address you use when configuring your paypal cart hotspot is not the same email address you use with your online store, you will get a "this account is not a business or premier account" error from PayPal. This is an easy error to make during testing with the sandbox test accounts as the test account email addresses are randomly generated.
NOTE for advanced users: The paypal button component automatically rewrites the action= line of the button form to point to the local shopping cart component. The avoids requiring uses to have to edit the button code in order to use the built in shopping cart feature.
In addition to setting up your keys in your account you need to set up your website payment preferences so that PayPal will pass back the details of the purchases made through your site so that they can be recorded in the Contact Manager.
As a security precaution you should turn off unencrypted purchase attempts:
You also need to tell formVista™ who should be notified by email when an Instant Payment Notification is received.
Illustration 3: iCMS Content Editor