Customize your SharePoint Classic Forms without InfoPath

Back in August of 2013 I released a script that allowed you to totally change the way your default SharePoint Forms look by creating a simple template out of HTML and CSS.

Easy Custom Layouts for Default SharePoint Forms

This was a great solution for people that didn’t need a full blown forms solution for SharePoint like the awesome free tool StratusForm.

Since then I’ve had a few requests to enhance the script and I wanted to update it and make it easier to use. Based on those updates I’ve updated the script to allow users to move the save and cancel buttons to within their template, and to also display an error message if there is an error on submit. The error message comes in handy if you are creating a form wizard or a tabbed form and there is an error for one of the fields that’s not currently visible. 

Documentation

First of all, if you created an HTML Template with the previous solution, it will still work. When creating an HTML template you need create placeholders for where you want your SharePoint form fields to display in your HTML template.  Those placeholders need to be a span with a class of “hillbillyForm” and also contain an attribute called “data-displayName” were the value of that attribute is the display name of the field that should be in that place holder.  For example, in order to create a template for the Title field and make it appear as a header your HTML might look like:

<h1><span class="hillbillyForm" data-displayName="Title"></span></h1>

Watch the video below and look at the source code for more examples.

The only change you need to make to any forms created with the previous script would be to make sure you reference the new script and then execute the HillbillyTemplate function as shown in the examples and video.

$().HillbillyTemplate();

There are now a couple of parameters you can pass into this function. If you want to pop up an error message if there is an error on form submission you can set the parameter “genericAlert” to true.  It is false by default.  You can also specify the text of the error message by passing it in the parameter “alertErrorText” as shown below:

$().HillbillyTemplate({

      genericAlert: true,

      alertErrorText: "Form errors exist. Please fix form errors and try again"

});

Finally, you can now put the Save and Cancel buttons into your templates by using the following placeholders in your HTML:

<span class="hillbillyFormSave"></span>

<span class="hillbillyFormCancel"></span>

Confused? Check out the video and hopefully it will make sense. 

Source Code

You can download the source code from GitHub at https://github.com/mrackley/HillbillyTemplate

The source code contains an example Template that takes an out of the box Task list and puts it into a jQueryUI Accordion. so if you wanted to get started immediately you can use it “As-Is” with a Task List and follow along with the video below.

image

Video

As always, here’s a video walking you through the process.

Hope you enjoy the updated script!

30 comments

  1. Pingback: Hybrid SharePoint Is a Destination; Cloud vs. Data Center; Customize SharePoint Classic Forms

  2. Catherine B - Reply

    Mark,
    Were there any issues with the old solution, or are you just updating it with new functionality?
    Is the old solution still available on GitHub?

  3. SharePoint Beginner - Reply

    Hey Mark!
    I have been using your HTML/CSS Simple Custom Layouts for default SharePoint Forms since I discovered it in January. It has really helped me with a lot of my SP sites. The scripts have worked fine until a few days ago when randomly it seems that only the HTML file works in the Default New Form. None of the form fields are open for adding information. If you save the new form, you are able to display and edit the form just as before, so I’m pretty sure its not the files, since I use the same files for all 3 default forms. Why would this randomly start doing this?
    Thanks!

  4. Robb Cabansag - Reply

    Mark,

    Love this script! been using it since the OG version. Quick question? Do you have a way to make the choice fields flow horizontally? I’ve tried copying all the TDs and dumping them into the first TR (based on a script written by Marc Anderson, another SP genius.) They display properly, but I am having problems getting the choices to save.

    Anything you have would be greatly appreciated.

    Thanks,
    Robb

  5. Body - Reply

    I receive this error: tags are not supported in the HTML specified in either the Content property or the Content Link property…
    Any solution for sharepoint in cloud?

  6. Bert - Reply

    Awesome!! Thank you!
    Is there a way to move the Close button to the top in the display form as it does in a new and while editing forms?

  7. Randy - Reply

    I love your code, but can you tell me how to change the width of the form fields, such as Task Name? I have tried several different things with no luck. An example would be great as I am feeling rather stupid at the moment.

  8. Juliane Hanley - Reply

    Hi Mark, is it possible to have a button that saves the list item but just refreshes an empty NewForm.aspx? Almost like a Save & Submit button functionality? I have implemented your custom forms (AND THEY ROCK!), but really, really need this functionality if possible.

    • mrackley - Reply

      if you set the query string “Source” parameter back to the NewForm.aspx, that should redirect you after the page saves.

  9. CSP - Reply

    Great info. Thanks. Question: Can’t seem to be able to apply this to this to a document form. Is this doable?
    Cheers

  10. Marcus Khoo - Reply

    Hi Mark, super idea this. Can I ask how, on the Display and Edit forms, it is possible to show item metadata (Version number, Content Type, Author, Editor, Date Created, Date Modified etc.)? Thanks

  11. Rich - Reply

    Really great tutorial. Coding well structured, easy to understand and explanation very clear.
    Thanks! You are a legend

    One request: any thoughts on how i would go about making some of the fields disabled but still visible depending on the user populating the form? ie/ if current user = DOE John then form “Description” field is presented in display mode rather than edit mode.

    • mrackley - Reply

      You could create multiple HTML forms and place them on the page as separate web parts, then audience each web part so that users would only see the form for their group. Finally, to disable a field you could just add the attribute of disabled to the span and it should disable the field? that SHOULD work.

  12. Charles - Reply

    Hi Mark, love this new update. I’m able to get it to work fine, but I’ve been running into issues with managed metadata fields. They are displaying either greyed out (cannot interact with them) or, if they do allow interaction, it is impossible to enter a value in them because nothing appears in the metadata browser window. I’ve tested that they work fine so long as the scripts aren’t running. Have you encountered issues with the managed metadata fields that would explain this behavior? Thanks again

  13. Soumya - Reply

    Another fan of this solution. I get called to a lot of ad-hoc kind of solutions. My need was to show additional columns of lookup columns in a different section of a list form, and all together. OOB, one would be able to change the location of the main lookup field. But he won’t be able to change the additional values. I applied the same concept in rearranging such columns and it was a total success. Thanks Mark!

  14. MM - Reply

    Hi Mark, I was really pleased to see this, it looks like a great way to design forms. Unfortunately, I have just tried this on a site I created this morning in a new enterprise version of SPo but when I get to the part of adding the custom web part to the list, I get a massively reduced list of components to choose from, in fact only things on the site appear. I am the admin and owner of the site. Has Microsoft changed something perhaps?

    • mrackley - Reply

      You are looking at the new Modern view… the customizations only work on the classic view. Go into your list settings, under advanced settings, switch it to classic experience. You should e good to go after that.

Leave Comment

Your email address will not be published. Required fields are marked *