Submit a new idea! Ideas for #Office365 #SharePoint custom feedback using lists,CSS & scripts

Its a beautiful day outside. Drizzles with a sweet sweet rainbow. Looking out longingly I got an idea,

How about we work on a fun form exercise?! It’ll be pretty, it’ll be functional and it’ll be in #Office365 with simple controls and script. Sounds fun no?

I thought it was. I was also inspired by Netflix, Starbucks and all things good and great in this world including but not limited to W3CSS, Bootstrap, JS and oh wait! SHAREPOINT and FORMS!!!

Since the code part is pretty self explanatory, am not gonna delve(see what I did there wink wink) deep in it. Still, to recreate this pretty form, you need to
  •  Create a list (SubmitYourIdea in this sample and yep am pretty creative)
    • Structure of the list is pretty straightforward, a few custom columns depending on what you want to gather from contributors:
      liststruct.png

       

  • Create a script file in your Site Assets (or anywhere else you please) call it PutYourThoughts.js (cause… why not?) You are welcome to copy the script and edit to suite your taste. I just chose something fun to do as a proof of concept and share it with my interweb peeps.
  • Create a site page and include the script file reference in a Content Editor Web Part/Script Editor web part. Save and page and here you go, a  completely responsive form for your folks to submit ideas on new projects/categories/just badmouth how awful the current project sucks. Freedom of speech rules!ideaform.png

Where is the Netflix and Starbucks connection you ask? Well, the form theme is inspired from them. So thanks folks!

What are the other uses/ possible derivatives using this idea?

  1. You can collect feedbacks(on your sites, projects, etc.,)
  2. Use this as a way to gather ideas from your team/staff
  3. Connect this with a #flow and extend its usage more! 🙂

Enjoy your new incoming ideas! Keep learning and sharing. Almost forgot, here is the solution in action with a not so subtle hint of enhancement to the code.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s