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 (IN THE HTML) 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.

49 Comments

  1. Everything worked like a Charm with in few minutes. For some reason images attached are not visible in the list column. When i edit the item row it is (attachment) appearing but viewing the whole list.. attachment column is looking empty. Thanks for all your awesome contributions in github.. Its been a while ;), hopefully you will release one more SharePoint related master piece soon to github.

    Reply
  2. I am trying to use the following in a separate content editor on the same page to populate the Requester field in my form with the current logged in user but it does not work and thoughts on how to tweak this to get it to work?

    $(document).ready(function() {
    // get the title of current user
    var UserName= $().SPServices.SPGetCurrentUser({
    fieldName: “Title”,
    debug: false
    });
    //populate the field ‘Requestor’ with the current account
    $(‘textarea[title=”Requestor”]’).val(UserName);
    $(‘input[title=”Requestor”]’).val(UserName);
    });

    Thanks in advance for any help… This form has been great and does exactly what I want for most of my forms.

    Reply
  3. Nice one sir! Thanks for sharing but I have question is it possible to display only the submit button to the requester(submitter) the approving officer (hod) will have different button display like approve, reject and exit also this button will have its value that will trigger a workflow email notification. Salamat po.

    Reply
  4. Hi Michael,
    This seems to only work if it’s embedded in a content editor web part. I’ve tried tinkering with it so that I can get it to function properly independently of being on a sharepoint page. (that is, if sp-forms.html could operate without it having been placed on a web part page). Any insight?

    Thank you!

    Reply
  5. Hi Micheal
    thanks for the brilliant solution, I will looking for this kind of solution since many months and this one is really impressive..

    I wanted to check if there is way in which we can store the values from a form in a dropdown/checkbox/date fields instead of a text-box ??
    Hoping to see a solution from you

    Let me know Thanks 🙂

    Reply
  6. Hi,
    Thanks for sharing the doc. However, I am unable to link the list and the form.
    I have an error saying that my attribute doent exist on the type “SP.Data.MyNameListItem”.
    This erros occurs during the ajax (My field is Text type in the List).
    As information, when I go to the api link (lists/getbytitle(‘MyNameList’)/items).
    My list in emply and just created, but i cant see my added fields (I only can see default fields like “2018-04-12T21:47:49Z” in the xml).
    Any idea why i cant get my fields with this api ?

    Reply
  7. Hi, thank you for sharing, I follow exactly like the demo but i got errors “An unexpected ‘PrimitiveValue’ node was found when reading from the JSON reader. A ‘StartObject’ node was expected.”. I already check the list name and everything but still got same error. Any ideas?

    Reply
    • In the SharePoint list, you can only use the type “text”.. but you can use the supported types mentioned above in your HTML.

      Reply
  8. Hi Michael,
    Thanks for sharing the doc. However, I am unable to link the list and the form with the data-list-name attribute as you said.

    Reply
    • Are you getting an error like shown above? What about the console – is there an error there? Also, is the list in the same site?

      Reply
    • In the SharePoint list, you can only use the type “text”.. but you can use the supported types mentioned above in your HTML.

      Reply
  9. I tried adding a select field for multiple countries that a user can select but getting this error message below:
    A node of type ‘StartArray’ was read from the JSON reader when trying to read a value of a property; however, a ‘PrimitiveValue’ or ‘StartObject’ node was expected.

    I am using

    Please assist. Any ideas?

    Reply
  10. This is a very well written tutorial, thanks so much. I think I am close to getting this to work but I’m not sure what to put in the div that references the list and form: . I have followed all the instructions but I just can’t figure out what to put in there to make it work. When I hit Submit, I don’t get the error message your screenshot shows – nothing happens at all. I have even named my list the same as yours to test. Do I need to include the path to the list as well? And which form do I enter? Do I name it NewForm to mimic the default new item form? Thank you!

    Reply
    • It sounds like something is not configured right. Try using Chrome and press F12. Click on the “console” tab and see what errors there are. Note that the list should be in the same site as where your page (form) lives.

      Reply
      • Wow, I’m getting several errors. Here they are:
        x Refused to apply style from ‘[my path]/sp-forms.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. [my page name].aspx:1
        x Failed to load resource: the server responded with a status of 404 (NOT FOUND) sp-forms.js
        x Uncaught ReferenceError: SpForms is not defined
        at HTMLDocument. ([my page name].aspx:716)
        at fire (jquery.js:3232)
        at Object.fireWith [as resolveWith] (jquery.js:3362)
        at Function.ready (jquery.js:3582)
        at HTMLDocument.completed (jquery.js:3617)

  11. Thanks Michael for this.
    There are thousands of codes to do the same thing on the internet but this is the only code that worked for me. Everything so much in detail and codes are written so neatly.
    Can you also please help me with how to update records in a list with an HTML form inputs and how to retrieve the data in html form fields from a list?
    That will be a great help.
    Thanks again for this wonderful work.

    Reply
    • Sorry for the late response. This plugin only allow entering and viewing single records. Editing and deleting is not yet supported. Will add that soon.

      Reply
  12. 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.