Update Smart Forms Module for SharePoint

The new Smart Forms Web Part is loaded with features which provide you with a super easy to use, yet very powerful SharePoint form building solution.  Download the latest Smart Forms update for exciting enhancements such as drag ‘n drop fields, professionally designed form styles and much more. 

Now let’s build some forms!

1. Add the “Kintivo Smart Forms” Web Part to the desired page. 
   It can be found in the “Kintivo Smart Components” category:
   
   
   
2. Now that the Web Part is on the page, you can tell it which SharePoint List to submit to, which fields you want and many other options by clicking “Edit Web Part” located in its dropdown:
   
   
   
3. Once the Web Part edit panel is open, specify which List to submit to, which fields you want, button types, Landing Page or Thank You Text, and many more options. 
   
   All of these options are visually described below. 
   
   Note:  Be sure the SharePoint List you want to submit data to already exists. 
   If the List doesn’t already exist, go create it and return to this step.

Web Part Edit Panel

Clicking the “Configure Smart Form” link in the web part edit panel will pop-up the Form Builder Tabs.

Form Builder Tabs

List Tab 

Use the List Tab to select the list you wish the form to post data to.  The list may reside anywhere within the current Web Application and is not required to reside in the same site as your form.  First, select the Site Collection, then the Site, then “Select Target List”. 

Form Modes:

Add New Item (Mode) – forms for posting NEW items to a SharePoint List.

Update Existing Item (Mode) – pre-populated forms for UPDATING existing items in a SharePoint List.  When using the update mode, be sure to fill in the “Url Parameter Name” field.  The web part will need to know where to get the Item ID value from.  It will always look in the URL for this value, but needs to know what to look for.  The “Url Parameter Name” field (sometimes called Query String Parameter Name) is used for just that. 

The below sample setting tells the web part to look in the URL for a parameter called “SF_ID”. 

In the above example, the web part will use the value of the “SF_ID” URL parameter to populate the form. 

For example, the following URL:  “http://www.SharePointFormWebPart.com/pages/UpdatePage3.aspx?SF_ID=725”

…would tell the web part to pre-populate the form with the List Item which has the ID of “725”.

Power Tip:  There are many ways to populate the URL with the List Item ID you wish to use, including using the Smart Forms Web Part itself!  For example, you may have the need to use multiple forms and multiple pages to satisfy your specific form based solution (think “wizard” based interfaces).  To do this, you would start with a form in “Add New Item” mode, and specify the “Landing Page” as your “Step 2” page.  You would also tell the first form (the one in “Add New Item” mode) to pass the “ID” to the Landing Page (this is a setting in the “Submit Options / Submit URL Fields” section).  When you do this, the web part will automatically append the URL Parameter titled “SF_ID” to the specified Landing Page URL, and set the value of the “SF_ID” equal to the ID of the new Item being created.  Your “Step 2” page would have the Smart Forms Web Part set to “Update Existing Item” mode, and you would fill in the “Url Parameter Name” with “SF_ID”.    Note:  When passing the ID to your Landing Page, the Smart Forms Web Part will pass it using the URL Parameter Name = “SF_ID”. 

Fields Tab

The Fields Tab is used to specify your form fields.  Drag n’ drop fields onto your form as you see fit. 

Mouse over the fields’ little colored square to view what it’s telling you about the field.  It might be a required field, which means if you place it on your form it will be required.  It might be telling you the field has a description or a default value. 

Required Fields:  Required fields are designated with an asterisk (*) on the resulting form.  To make a field required, simply set the respective SharePoint List Column to required.  You do not have to display a field on your form just because it is set to required within the respective SharePoint List.  However, when you display a field that happens to be required within the SharePoint List, it will also be required on your form. 

Field Validation:  The Smart Forms Web Part provides field validation based on the List Column settings you are using.  For example, if your list has a required field, that field will also be required on your form.  If your list has a date/time field, the field will automatically be represented on your form as a date/time picker.  The same is true for all SharePoint List Column types (text, yes/no, dropdowns, radio buttons, checkboxes, etc…). 

More sophisticated field validation may also be used such as comparing fields (example:  Email Address field needs to match the Confirm Email field).  This type of validation is handled using regular expressions on your SharePoint List.  If you are already using regular expressions on the Lists, rest assured the Smart Forms Web Part will honor your settings.  List validation settings can be found by navigating to your List, and then:  List Settings / Validation Settings (located under the General Settings section). 

This SharePoint List Validation setting would cause the Smart Forms Web Part to check on form submission that the “Email Address” field data is equal to the “Confirm Email” field data entered by the user.  If they are not the same, the Smart Forms Web Part will display the specified User Message (above) to the user, and it will not submit the data to your list until the validation is satisfied.

Edit your form field by clicking its “Edit” link.

Field Label(to show on form) – whatever you type in here will display on your form as the field label.  The default label is the List Column name.

Description – if you flipped the “Display field descriptions” toggle (lower left of “Fields” tab), the field description will also appear on your form below your fields (if your fields have descriptions). 

When ON, your form will display the List Column descriptions from your SharePoint List by default.  You can overwrite the default value by adding your own field description to the “Description” box.

Display Only (checkbox) – the “Display Only” checkbox makes the field non-editable yet still displays the field on your form. 

Default Value Settings – prepopulate your form field by specifying:

• URL Value – provide the URL parameter name that will contain the default value for this field.
• Default Value – type in the desired Default Value for this field.

If the SharePoint List Column has a default value, it will be used unless you are using one of the above two options.

Spacer (widget) – drag ‘n drop as many Spacer widgets as you need to get your form looking just right.  You can also add text, including html, into the Spacer as needed.

Use the Spacer widget to separate sections of your form.

Click the “Edit” link on the Space at access its pop-up dialog.

Name - name given to your Spacer to help you keep them sorted out, does not display on form. 

Spacer HTML – text or html to be displayed on your form, empty space displayed on form if left blank.

Attachments:  Optionally, if the SharePoint List allows attachments, you can allow users to attach multiple files to a single form submission by flipping the “Allow Attachments if enabled” toggle to the ON position (lower left of “Fields” tab).

Field Descriptions:  You can optionally display field descriptions on your form.  By checking the box “Display field descriptions” – your form will display the List Column descriptions from your SharePoint List.

Default Values:  Form field default values may be manually set using the “Value” field.  Optionally, you may use the “URL Value” to capture the desired default form field value from a URL parameter, simply type the name of the URL parameter in the “URL Value” box.

Buttons Tab

The Buttons Tab is used to control your forms submit and cancel buttons. 

Submit Button

• Submit Button Type – submit button, text or image.
• Submit Button/Text/Image URL – text to display for submit button or submit link (text).
• Thank you text – Submit Behavior:  submits form data to list, resets to blank form and displays this text.
• Landing Page URL:  Submit Behavior:  submits form data to list and redirects user to this URL.
• Submit URL Fields:  Submit Behavior:  Submit data to list.  Passes these values in the query string to your Landing Page URL (Tip:  be sure to pass the ID if your landing page is part of a multi-part-form solution). 

Cancel Button

• Cancel Button Type – button, text, image or don’t display cancel button.
• Cancel Button/Text/Image URL – text to display for cancel button or cancel link (text).
• Landing Page URL:  Cancel Behavior:  does not submit form data to list, redirects user to this URL.
• Cancel URL Fields:  Cancel Behavior:  does not submit data to list.  Passes these values in the query string to your Landing Page URL (Tip:  be sure to pass the ID if your landing page is part of a multi-part-form solution). 

Display Tab

Use the Display Tab to control the look and feel of your form.  Select from one of the professionally designed “Smart Style” options or take full control with your own CSS file.

Form Title (Supports HTML Tags) – similar to normal web part titles found in the appearance section of most web parts, but this one allows HTML to be used within the title and you have more control over the display via CSS and Smart Styles.

Default Style (CSS) – CSS used to control the form appearance.

Smart Style – choose from one of our professionally designed form Smart Styles or go cowboy with your own CSS file. 

Select “Custom” to use your own CSS to control the form appearance.

Enable Configuration Output Details – ONLY used by our Support Team

Read more about customizing the look and feel of your forms in the “For Administrators” section of this document. 

Captcha Tab

You can ensure data being entered into your form is from a real human (and not a spam-bot) by optionally allowing Captcha Control Validation.

The Smart Forms Web Part uses ReCaptcha:  http://www.google.com/recaptcha - ReCaptcha is a free anti-bot service that helps digitize books. 

If you check the box “Allow Captcha Control Validation” – you will also need to supply your ReCaptcha keys (public and private).  You can very quickly get these free keys from:  http://www.google.com/recaptcha

Once you have your keys, paste them into the appropriate boxes.

Email Tab

Sometimes it’s helpful to send emails when a form is submitted.  Use the Email Tab to configure your optional email. 

Email Variables:  Double brackets “Field Name” may be placed around field names to reference form data within your email.  Variables ARE case sensitive. 

Publish Your Form

1. Click the “Save & Close” button from the Form Builder Tabs:
   
   
   
2. Click the “OK” button (if open still) on the Web Part Edit Panel:  (remember to save your page)
   

Please ensure the Smart Forms Web Part installation has occurred, and has been activated on the site you wish to use. 

1. Go to the site you wish to use.
2. Ensure the following Feature has been activated:  “Kintivo Smart Forms”

Go to:  Site Actions / Site Settings / Site collection features

Note:  If you go to Site Settings and don’t see the Site Collection Administration Section as above #3, it’s one of two things: 

1. You are not at the Top Level Site Collection – Go to the Top Level Site Collection from the Site Settings page by clicking on “Go to top level site settings.”
   
   
   
2. You are not signed-in as a Site Collection Administrator – Sign Out, sign back in as a Site Collection Administrator.

From the Site collection features page, scroll down to the “Kintivo Smart Forms” feature and ensure it says “Active” (see below). 

Note:  If it’s NOT active, click the “Activate” button.

Note:  If the “Kintivo Smart Forms” Feature is not listed on the “Site collection features” page:

1. Make sure you are not accidently on the “Site features” page, which is not the same as the “Site collection features” page.  You need to be a Site Collection Administrator to see the “Site collection features” page.
2. Ensure the solution has been deployed to the correct Web Application from your Central Administration site (see Installation Instructions). 

Import/Export Smart Forms

Smart Form configurations may be exported and imported as needed.  Each Smart Form export will generate an XML file that you should keep in a safe place.  This file should also be named in a way you will remember which form it represents. 

Look & Feel

The default CSS is diagramed below to help your designers more quickly make modifications.

CSS Diagram