Apply custom look and feel to your SharePoint forms

Vladi Gubler
Vladi Gubler
April 09, 2014 | Products

Hi,

Good news!

We've just released a new version of Smart List Pro (a component of Ultimate Forms). It now supports applying your own custom look & feel to every list, so you can effortlessly create great looking forms.

Just see how easy it is to turn this:

Form Before

into this:

Form after

Some technologies, such as InfoPath, SharePoint Designer or 3rd party solutions implement this by replacing the whole form with a custom form, breaking certain functionality and creating that "out-of-place" feeling. Smart List Pro does not do that, it actually applies layout changes and stylings directly to the original form, no changes required.

Let me show how it is done, it should not take you more than 1 minute flat:

  1. Make sure Smart List Pro version 1.23.0 or up is installed
  2. On any list view, go to List (or Document Library) ribbon and click on Design button
  3. Click on Tabs and tab permissions (the first option there)
  4. Close all sections but General Settings

General Settings

Under Title I put in [Full Name], it will show this nice looking title above the form itself with the full name of the contact. You don't have to put it there or you can use any other value, the value picker is right there to help you.

Label location: Above field - will place column names above the column values, intsead of being beside them.

And I also selected to render the form in a 2 side-by-side columns.

Done with General Settings, collapse it and open up the new Style section:

Style

Let me explain to you what I did here. I was using IE Developer Pane (F12, the same works in Chrome and, a bit differently, in FireFox) to find out the names of the CSS classes I wanted to override. You don't need to do that, you can simply enter the values for background and borders if you don't feel like honing your CSS skills just yet. So here we go:

  • Background color: I used a picker and selected a nice yellowish hue
  • Border radius: I gave rounded edges to the background (attention IE users on SharePoint 2007/2010, this option will not work for you)
  • Box shadow: I added a drop shadow to the form (again, IE users in earlier versions are out of luck).

I then added some direct CSS overrides to fine-tune my form. I changed the look of the submit buttons, changed the colors of field names and values, added some padding and enlarged the form title (remember that?) font.

Add the style (I added one for all forms, but you can actually enter a separate one for each). Save. You are done.

And it looks great in the Edit form too!

Edit form

Loading...

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.

UltimateForms

Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com

Related Topics


Copyright © 2018 - Infowise Solutions Ltd
The awesome power of ULTIMATEforms

Quickly and easily turn time-consuming business processes into automated, efficient workflows.

100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com
 Yes, send me Infowise Newsletter.

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.

Eastern time zone (GMT-5)

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.

Eastern time zone (GMT-5)