cancel
Showing results for 
Search instead for 
Did you mean: 

Nintex Forms for Office 365 Web Part

Workflow Hero
15 13 3,980

Building customized/branded forms in an Office 365 with Nintex Forms is a great experience.  It's even better now that there is support for our Nintex Mobile app.  If you haven't seen the great post by my colleague Dan Stoll, take a look here: Taking Office 365 for a Spin with Nintex Mobile.

When it comes to browser based forms, sometimes, you don't want to have your user go into a List and then click on New Item just to fill in a form.  Think of a Leave Request or an Expense Claim form.  Wouldn't it be easier for your employees to go to the HR site or the Finance site and simply have a form there to fill in?

With Nintex Forms for Office 365, there is a web part that comes with it that will let you do just that.

To get the result we want, we first start off with a simple SharePoint List.  As you can see, there's nothing to it but a Title field.  Of course you can make it as complex as you need it.

List.png

To this list, we need to customize a Nintex Form.  Click on the Nintex Forms button on the ribbon and begin the customizations that you need, if any.

FormDesign.png

I won't be going into the form design here.  This is simply for show.

Once the form has been finished and published, we can now move on to the interesting part of configuring a SharePoint page to display that form.

The web part that comes with Nintex Forms for Office 365 can be places on any SharePoint page.  You can add a new page and insert a number of these web parts if you want it to be a central place for users to fill in forms.  Or, you can use an existing page like the front page of a site and add the web part there.

When you are on a SharePoint page, in the ribbon, click on the Page tab then the Edit drop down and select Edit.

EditPage.png

Once that is done, you are in Edit mode for the SharePoint Page.  Click on the Insert tab and then the Web Part button on the ribbon.

InsertWebPart.png

Depending on the name of your lists, you may need to scroll across to find the Nintex List Forms Online web part.

NintexListFormsOnlineWebPart.png

Then click on the Add button to add it to your page.

AddNintexFormsWebPart.png

Web Part Configuration

Now that the web part is on the page, we need to configure it to show the appropriate form.  You will find at the top of the web part, there is a drop down where you then select Edit Web Part.

EditWebPart.png

On the right side of the page, you'll see the editable settings.  This is the same for all web parts, but if you don't see it, you may need to scroll to the right.

WebPartSettings.png

In order to configure this, there are few important settings.  The Form Mode is whether you want to display a New form or edit form or even a Display form.  If you select Edit or Display, you'll need to provide an Item ID.

In our case, since we are only interested in a New Form, we need the List Name, a Redirect URL and a Site URL.

The rest of this work is this :

FormOnSPPage.png

Our form is now embedded in our front page and our uses can go to that page and fill in there expense form quite easily without having to find where the Expense Claim list is.

A HUGE Thank You goes to Daniel Kinal, the Product Manager for Nintex Forms, who pointed me in the right direction for the web part.  His knowledge of Nintex Forms, both on-premise and in the cloud is amazing!!

13 Comments
Workflow Hero

great to see this is now available in Office 365! Great post!

Not applicable

This works great for a web part but I need to use the different modes in a list itself.  How can I just have one panel display while it is NEW mode, then when the workflow sends out the email and they click on the link it will open in is Edit Mode and all of the other fields will be displayed.  I do not want all of the other fields exposed during the NEW item part, the back end is for our IT to complete.

Any help would be appreciated.

Dorinda

Workflow Hero

This looks all great but I am trying to use the Display mode, hence how can I pass a parameter to the Item ID field ?

Would be great to use connected webpart to display the item or QueryString value to extract the ID from a URL.

Workflow Hero

This is great, but I agree with the above that if using the Edit or View mode, the web part needs to be able to utilize filter such as parameters in the URL.  Hardcoding a value into the Item ID isn't flexible enough; unless only wanting to display a single item.   Nintex: Please implement this additional functionality as it would solve a business issue I'm currently having! 

Vadim - great job on the post and explaining what does exist! 

Workflow Hero

Have to agree, the usefulness of this web part is very limited, if only we could pass a filter into the Item ID - I wouldn't have to go to other solutions to display nice looking data on pages.

Workflow Hero

Hi 

 I am new to the Nintex and Sharepoint. I can't figure out how to add a webpart. I have follow your steps but didn't work.

I got a form which doesn't record any information it just work as bridge to three forms. The forms has three button and each button is connected to a list which appeared as form when it click. I want to add this Form as a Web Part to the webpage

    

It would be great anyone could help me with this. 

Workflow Hero

Hi Theekshana,

and this image you attached... this is a Nintex Form that you want to add to a Nintex Forms web part?

Are you getting an error of any kind?

Vadim

Workflow Hero

Hi Vadim

Thanks for the quick respond.

yes. I am getting following error

Object reference not set to an instance of an object.
If the problem persists, contact your support team with the following information:
Correlation ID: 85567278-346d-48a2-b38a-1c3d9680c05a
Tenant ID: 371cb917-b098-4303-b878-c182ec8403ac
Time (UTC): 2017-08-25 05:06:21
Theekshan
Workflow Hero

That's a weird on.  Can you try to create a new list and a really simple form on there.  Then try the web part configured to that list and see if you get the same error.

If it persists, reach out to Nintex Support.  They may need to take a deeper look.

Vadim

Workflow Hero

Hi Vadim

Ok I create new simple form and try.

Thanks 

Theekshan

Workflow Hero

Hi Vadim

I created normal form and try to do it and it didn't show anything. 

From where do i get the Redirect URL  and Site URL. May be i am doing it wrong.

To get URL i am doing following steps.

First I got to the site content, then click on the simple form test library.

Then from the top tab click List  and select list setting.

One i am in, I can see the Web address. This Web Address I used as the Redirect URL and Site URL.

Please correct me if I wrong.

Theekshana. 

Workflow Hero

Hi Vadim Tabakman

Hope you are well!! As you have shown, I added a responsive design form on the web page. It shows a lot of blank space around the actual form.

When i look in designer the layout size is 900X700 but there is no way to modify it (or is there?). I understand it should automatically fit to the canvas, but it doesn't. Please see the screen shot below.

The outer lines show the canvas on the web page. Is there any way to fit this in the canvas or reduce the space around it? I'm Using nintex for O365.

Thank you.

Workflow Hero

Thank you for this Tutorial, it has helped tremendously when trying to set this up.