SharePoint Information Site > Web Parts > SmartForms > 3. Configuration Guide

Configuration Guide

Once you've inserted the web part on the page where you want the form to display, you'll need to configure the web part.

Tip: If you want your form to end with a Thank You page when the user hits the Submit button, you'll want to create that page now before moving on. You can make the page in the same subsite as the form, and call it "thank-you" and can add text to the page such as "Thank you for submitting the form. Feel free to contact ______ if you have questions." Put in a TSC ticket to have the page hidden from navigation before publishing.

Configuring the SmartForms Web Part

1. Hover over the top right corner of the Smart Form Standard Web Part, click the down arrow, and select Edit Web Part.

2. Click Configure Smart Form.

click configure web part

3. It defaults to the first tab called List. In Select Site Collection, select the site you’re working on. In Select Site, navigate to the subsite where you created the list, and in Select Target List, select the list you created in the previous steps (below is an example)

example list configuration in the web part

4. Next, click on the Columns tab.
Check all the columns you want to include in the form.

columns configuration
(Note: Please do not use "Column" or "Order" in this screen. To modify the order, you will need to go to View All Site Content, and click on the list you’re working on. Then in the ribbon, open the List tab and on the far right you’ll see List Settings. Click on it, and look for “Column Ordering.” It is best to create the columns/fields in the order you want them to appear)

5. Click on the Buttons tab. This is where you can paste in the link to your Thank You page. The rest of the fields will default, so you can leave them blank, but you should paste the URL for the Thank You page that you created in the "Landing Page URL" field.
If you do not want a Cancel button to appear at the bottom of the form next to your Submit button, you can select "Do not show Cancel" from the Cancel Button Type dropdown. Otherwise, leave everything else as it is.

button configuration
6. Click on the Display tab. Remove all content from Default Style (css), and replace with the following:
/*No CSS*/

remove css string and replace
(Note: SmartForms allows you to add a Captcha to the end of your form. If you would like to add it, click the check box next to "Allow Captcha Control Validation." Otherwise, skip that tab. Captcha is useful if you're worried about bots (not real humans) filling out your forms. It is not necessary, but is nice if you want it.)

7. Click the Email tab. If you would like the form to automatically send an email to an inbox every time someone submits the form, you'll want to configure this tab carefully.
Check the box next to "Send Email," and insert the email address where you’d like a notification to be sent.
It is possible to include a link to the list where the new form entry was added using the following syntax: 

(You can find the URL of the list by going to View All Site Content, selecting the List you’re working on under Lists and copying the URL.)

configuring the email

8. Click Save & Close, and then Save & Close and Check In the page.



Adding headers and field descriptions in HTML

Click in the main content area of the page and in the ribbon, click the HTMl dropdown (next to Markup Styles) and select Edit HTMl in Rich Text Editor.

To add headers between fields, you will need to add them in between divs. But first, you must add a div element with the same class as in the above div. If the div id is as follows: div id="vid_b5b4078c-ac2c-4e0e-a9530986ca101", then you would copy b5b4078c-ac2c-4e0e-a9530986ca101 into the div class="SFTEXT_

 

Inside the newly created div container, we will be creating other div children elements. Each one of them will correspond to the field in the same order (each field = an open and closed div). The first field in the form is “Name”, and it will correspond to the first div container, the eighth field is “Area of study” and so on…
The data (header or paragraph tags) inserted in the children div tags will be displayed above the corresponding field. See below of a code example.

Code Example



 <div class="SFTEXT_b5b4078c-ac2c-4e0e-a20d-a953040ca101">

<div>

<h1>Data Request Form</h1>

<br/>

<h2 class="heading-border" align="left">Requester Information</h2>

</div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div>

<h2 class="heading-border">Request Information</h2>

</div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div>

<br/>

<h5>Please check Yes, No or Not Applicable (N/A)</h5>

</div>

</div>


​​​​​

Here's what that looks like in the code alongside a saved version of the form, so you can see it visually:

this is how the headers with the divs look next to the form itself
 

When you click OK to get out of the HTML markup editor, you'll notice that the headers appear at the bottom of your page -- don't be alarmed. Click Save & Close to see the headers move up to the appropriate places corresponding with the fields.

 * If the headers did not go into the appropriate spots after Saving & Closing the page, you may have counted the divs wrong, missed one, or you may have forgotten to close a tag. Check your markup code carefully. Also, double check that you copied all of the number-and-letter code from the div ID vid in the top div to the new div class="SFTEXT_.