Create Custom HTML Forms for SharePoint with this jQuery Plugin

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:

submit form

The best way to get up and running is by downloading the files editing the HTML. That’s all.

The types of fields that are supported are:

  • text
  • 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.

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.

The above field shows that we’re connecting to the column “Title” in the “sp-forms-form2” list.

Easy enough? Let’s continue.

Important: You have to know that all of the fields from this form will be saved your list using the “text” datatype, except a “textarea” – which will be a “Multiple lines of text”.

column create

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 “|”.

The output will look behave like below:

validation

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:

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 about People pickers? Date Pickers? etc. –  The plugin itself doesn’t have it. But its just HTML + JavaScript. Simply add them on document ready. That’s the beauty of this plugin. You’re free to do anything you want because you’re dealing with the code.

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:

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“:

item inserted

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:

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:

item inserted

The code for this field looks like below. Again, refer to the HTML and it should have this field already setup for you.

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:

files

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.

map to html

If it can’t find the list, you will see an error message like below:

error message

That means that you should create the list, along with the columns that is described in the beginning of this tutorial.

2 Comments

  1. Michael,
    First off, thank you for the goldmine of SP tuts!
    I’m trying to load this in a Modal or .aspx page from a site assets library. I’m receiving the following error.
    Uncaught ReferenceError: _spPageContextInfo is not defined
    Any idea how I can amend this?
    Thank you!

    Reply

Leave a Comment.