There is a big need to build fully customizable forms in SharePoint. I have tried several form builders, but wasn’t really happy with the restrictions that it comes with. So I wrote this plugin that will create HTML forms in SharePoint. It requires very little code (it’s all HTML). But the most important thing is – it’s customizable.
There is basically no limit on what you can do.
The gist of it is, all you have to do is match the column names in SharePoint – to the field in the List. That also means you can arrange the fields, labels, messaging, colors – just about anything you want.
Again, it’s all HTML.
View in GitHub
This is a jQuery plugin, so it needs jQuery. The optional Bootstap CSS can also be added (not required) – to get you a jump ahead on responsive and styles.The output will be something like below:
The best way to get up and running is by downloading the files editing the HTML. That’s all.
The types of fields (IN THE HTML) that are supported are:
- select (drop down lists)
- checkbox – (multiple values)
- radio buttons – (single value)
- textarea (multi line text)
- file (upload an attachment)
There is built-in input validation, loading image, “thank you” and “error” messaging. Again, you customize these fields by simply updating HTML.
How does the Form link with the SharePoint List?
The HTML part of the form connects with the list via “attributes”. To be exact, “data-list-name” refers to the List name, and each field will have a “name” attribute which refers to the column in your said SharePoint list.
<div data-list-name="sp-forms-form2" ... >
The above shows that we’re connecting to “sp-forms-form2” list. This DIV is not exactly a “Form” – but a wrapper for all of the fields, messaging and buttons that we need. So this DIV is very important.
<input name="Title" ... />
The above field shows that we’re connecting to the column “Title” in the “sp-forms-form2” list.
Easy enough? Let’s continue.
Do not use any type – it will not insert.
Again, use only “Single line of text” for all fields except a “textarea” – which is “Multiple lines of text”. *All values from the form will be inserted as plain text. Checkbox (multiple values) will be separated by a semicolon, but still as text.
How to add validation?
For each field, you can a set of validation rules. For now, we only have “required”, “date”, “email” and “phone”. Simply add the rules to the input/textarea/select as an attribute called “data-rules“. And if you need to use more than one, simply separate it with a pipe “|”.
<input data-rules="required|email" ...
The output will look behave like below:
Are you still with me? Awesome.
How to add a Drop Down List?
A drop down list is simply a “select” tag in HTML. It’s basically a select tag, with “options” inside it. The “options” are the drop down values. It looks something like below:
<select name="countries"> <option value="">--</option> <option value="USA">USA</option> ... ... ... </select>
Simply add more options to the “select” tag to build your drop down list.
How about a textarea, checkbox and radio buttons? Those are all in the demo HTML: It is fully commented and you should be able to figure it out easily. Note that you will need to open this in an HTML editor such as Notepad++ or VSCode.
Don’t do regular notepad. Just don’t.
How to get the label “inside” the text input? – This one is a little tricky. I find it easier to use the “placeholder” attribute, than to use a “label”. So do something like below:
<input placeholder="Label here..." >
Anything else that you want to do with the labels and fields should be doable. For example, making the fonts bigger, making the widths of the fields wider – adding plugins, it’s completely up to you.
What happens when I click “Submit”
Clicking submit will add the record into the list that you’ve added inside the list that you’ve specified in the “data-list-name” wrapper that we have.
Let’s say you have everything in place, a new record will go inside your list once you click “Submit“:
Can I view the submitted record? – By default, as soon as the form submits – it goes to the newly added record. This means that the url will change to a:
This will be the “permanent” url for the record. If you want to go back to a black form – simply remove the “?form1=xxx” from the address bar.
In the default “Thank you” message there is a link to create another record:
Clicking this link will reload the page – with the form fields ready to go.
Can I customize the “Thank You” message? – Yes definitely. Again, go to the HTML and you will see the thank you messaging wrapped in it’s own DIV:
<div class="success-message" style="display:none;"> Thank you for your submission. Click Here ... </div>
Where does the attachment go? – the input field of type “file” and MUST be named “attachment” will add the file as an “attachment” to the list item:
The code for this field looks like below. Again, refer to the HTML and it should have this field already setup for you.
<input type="file" name="attachment">
Important: You don’t need to create a column named “attachment” in the list. SharePoint allows an attachment to be tied up to each list item. This is a pretty cool feature.
How do I install the plugin?
Let’s begin by grabbing the files from Github. Unzip the package, and upload to a document library in your SharePoint site. It will look something like below:
On the Document Libary settings, click “Open in Explorer”.
This will now open, as if it was a directory in your local drive. Let’s open the “sp-forms.html” with a text editor such as Notepad++.
Edit the paths of the sp-forms.css and sp-forms.js to the directory that you added them to .
Then create a page in SharePoint, add a Content Editor Webpart.
In the settings for that wepart, add the path to the HTML file in the document library.
If it can’t find the list, you will see an error message like below:
That means that you should create the list, along with the columns that is described in the beginning of this tutorial.