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 Bootstrap 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.

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

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

<input data-rules="required|email" ...

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:

<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 documented 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?

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:

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

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:

http://yoursite.com/yourpage.aspx?form1=25

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:

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.

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

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.

97 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
  2. 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
  3. 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)

        Reply
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. I’ m trying to open with explorer but the feature is disabled… 🙁
    What can I do?
    I would appreciate your recommendation.
    -Mariana

    Reply
  14. Good morning,
    This is a little hard to explain but I will do my best. I am trying to create a custom dashboard, that pulls information from a list. I want to displays statistics in certain areas of my page similar to like a world map. I want a box to show how many people are in example “USA” pulling from the information from the list “USA” column. IS this possible?

    Reply
  15. Is there a way to use a checkbox field to trigger multiple item creations? For example, if this were a ticketing system, the user could enter all the common information then check the work they wanted performed. This would create separate support ticket items for each item checked.

    Reply
  16. Please suggest how to add people picker and date picker in the form. Any reference is highly appreciated. I got stuck because of this. Help!!

    Reply
    • You can add a datepicker by using any of the available jQuery date picker plugins. For a people picker, that would require a little more work. I have a couple of tutorials on how to build autosuggest fields using Lightning and using React. It’s basically the same process, but you have to get the API endpoint of listing users in SharePoint.

      Reply
    • So this one is not too bad. I have a working version for my work – but its not baked into the plugin. You already have the form fields – you just need to populate with existing values for a specific record. A good way is to add a querystring in the URL for the record ID. Example is YOURSITE.COM/page.aspx?recordid=22, grab the value of “recordid”, then do an $.ajax call to fetch it from your list. Populate your form fields, then on submit – you have to update the record – not insert.
      Hope this helps.

      Reply
  17. Hello,
    thanks for the plugin – definitely a nice idea!
    I have some difficulties in interfacing it with the SP list.
    With “countries” and “yesno”, I received this error message
    The property ‘yesno’ does not exist on type ‘SP.Data.Spformsform2ListItem’
    (similar for countries) although I triple-checked the list to really have the column.
    Any idea why or what could influence this? I guess I should be on SP 2016…
    Thanks in advance

    Reply
  18. Hi Michael,
    I am getting “An unexpected ‘PrimitiveValue’ node was found when reading from the JSON reader. A ‘StartObject’ node was expected.” when i try to add checkbox values & dropdown values in the SP list.
    Please advice.
    Thanks.

    Reply
    • Mahesh,
      I was having the same issue. You have to make sure when creating the columns that you make them text and not the drop down or check boxes. Once you do this it will fix it and work.

      Reply
  19. Hello Michael,
    I tried this and it appears to not work. It’s not even doing anything actually. When I click submit, no refresh, no error. I looked at the list and no entry. Looks like an event not firing?

    Reply
  20. For some reason the form is not sending information to the list. It’s actually doing nothing (no error message). Is there something that I am missing? I downloaded the 4 files, uploaded them, changed the src and href but it looks like the JavaScript is not executing

    Reply
  21. Hi
    I don’t understand why I can’t get this to work 🙁
    The error is:
    Uncaught ReferenceError: $ is not defined
    $(document).ready(function() {
    var spForm = SpForms(‘#form1’);
    spForm.run();
    Which suggests it’s not linked to my list – I’ve double checked, what am I doing wrong?
    My list is on the same site and it’s called Shared
    I’ve put the list name where you advised:
    div data-list-name=”Shared” id=”form1″
    What am I missing?
    Many thanks
    PS Apologies for multiple messages, hopefully I’ve got this one correct!

    Reply
  22. Hi, does this form submits only 6 entries. I am getting the alert message as a particular column does not exist even though it exists in the list.

    Reply
  23. Hi
    I did finally manage to work out my mistake!
    Although I am still struggling to get the form to work. When I press submit I get the following error:
    To add an item to a document library, use SPFileCollection.Add()
    Any ideas?
    Many thanks

    Reply
    • Hi Michael, I figured this error out – I was trying to submit into a document library, whereas I’ve realised this is for a custom list which will add an attachment.
      So, thought I had it sussed, but not quite 🙂
      When I press submit, I just get the spinning circle on both Chrome and IE. When I check the list, the item and attachment has been added.
      I’ve checked the console and I have a couple of errors:
      One is an Array Buffer error and the other is:
      responseText: “{“error”:{“code”:”-1, Microsoft.SharePoint.Client.ClientServiceException”,”message”:{“lang”:”en-US”,”value”:”The HTTP method ‘GET’ cannot be used to access the resource ‘Add’. The operation type of the resource is specified as ‘Default’. Please use correct HTTP method to invoke the resource.”}
      Any ideas what this could be?
      Many thanks

      Reply
  24. Hello, this is great so far, thanks!
    I am having an issue that it keeps not being able to find columns that definitely exist. At first I was trying to insert JS pulldowns into a SP pulldown, but after reading comments, I change the SP side to be a text field… but when I added a second pull-down in JS, it keeps saying “the property X does not exist on SP.Data.LISTNAME.DataListItem. the field definitely exists and I even made sure it was case sensitive without spaces and all that. I even tried it as a radio-choice on SP and JS and it didnt seem to matter.
    Additionally, the comment field wont work either… It seems like this form only supports a very specific type of SharePoint Column types and maybe only a single instance of each type?
    I would LOVE to get a custom SP form working for my site. I would be happy to discuss freelance stuff if that is up your alley!

    Reply
    • I am having the same issue. Any suggestions/comments are appreciated:
      The property ‘From’ does not exist on type ‘SP.Data.Data_x0020_Courier_x0020_RequestsListItem’. Make sure to only use property names that are defined by the type.
      From is the name of one of my SharePoint columns.

      From Environment
      DEV
      TST

      Reply
  25. Hi I was able to get this form to work and I love it. I do have a question though,(Im pretty new to all of this) is there a way to get it to load multiple attachments?

    Reply
  26. This is amazing. I’m new to coding and I’m trying to make a simple interaction with SharePoint that will serve as a training region. This is perfect for input into the list, how about searching for and recalling this list information after it’s entered back into a “read only” view?

    Reply
    • Hi Michael,
      any luck on getting this working? After retrieving the list item into a webform, I assume you can use “update” instead of “insert” to make changes to the item?

      Reply
  27. Thanks for this.
    I followed the step and updated the fields, but the form does not do anything (no error message).
    Do I need to update the JS file? If so, do you have information that will assist in doing that?

    Reply
  28. Hi there,

    For the radio button. What single value are you referring to for the column choice? Is it a the yes/no or single text column?

    I’m trying to add a radio button for users to choices for options before they proceed to the next step on the form.

    Thank you!

    Reply

Leave a Reply to Vin Cancel reply