Summit 7 Team Blogs

Anonymous Nintex 2013 Form Submission with JavaScript Redirect Embedded into a SharePoint page

I have recently been working on creating an anonymous form in a public facing on-premises SharePoint 2013 site. After creating and testing the form, I wanted a better way to display the form and to change the form submission process. Out-of-the-box anonymous Nintex forms provide a short URL to share with anonymous end users and default text on form submission "The form has been submitted successfully." The first thing I wanted to change was how the anonymous users viewed the form. However, the current default behavior is the user is sent to another site outside of SharePoint. To change this, I first tried to use the Nintex 2013 list form web part that comes with Nintex. This web part works great, until you try to access the form as an anonymous user. This web part prompts for authentication even though the site is available for anonymous access.

To work around this, I ended up using a page viewer web part embedded into a SharePoint 2013 page. This allowed for anonymous users to stay within the SharePoint 2013 site collection while filling out the form.

  1. Navigate to your anonymous site of choice.
  2. Select edit page.
  3. Select Insert in the ribbon.
  4. Select Web Part.
  5. Select Media and Content.
  6. Select Page Viewer.

  7. Select Add.
  8. Select the Page Viewer just added and select Edit Web Part in the drop down menu.
  9. Leave the default Web Page selected and enter in the Nintex form link.

    IMPORTANT: One thing to note about the Nintex Form link is that you need to paste it into a browser first, load the page in order to get the long version of the URL, and use the long URL in the Link section, not the short URL.

  10. Select the Appearance tab and for Chrome Type select None to have a clean look.

Once the form was embedded into the page and accessed as an anonymous user I could successfully fill out my form and select submit.

In order for the form match the customer's branding, we needed to remove the default Nintex border. To remove the border, add the following custom CSS to your Nintex form and republish:

  1. Open your Nintex form in edit mode.
  2. Select Settings in the ribbon.
  3. Navigate to the custom CSS section.
  4. Add the following CSS:

  1. Save and publish your form.



The next issue I ran into with the form is the submission of the form. The form I created was very long and upon submitting the embedded form, the form would close and the user would see a blank screen. The "Form has been submitted successfully" text was all the way at the top of the page and unable to be seen without scrolling back up the page. I wanted a way to notify the users the form submission worked without requiring them to scroll up on the page. To do this, I modified my submission button with the built in Nintex behavior:

  1. Select the button that users click to submit the form.
  2. Select Advanced.
  3. Enter in the text you want to display.
  4. Save and publish your form.

Now the user is prompted when the form submission is successful, but they still need to scroll up the page after it has been submitted to see the default submission text and navigate through the rest of the site as needed. To avoid this, I wanted to redirect the user to the page they were previously on after the form has been submitted and after they are prompted that the form has been submitted correctly. I looked through the default options for redirects and none of those seemed to work correctly for what I was wanting. After testing a several things, I ended up using the following JavaScript for the redirect and to hide the ribbon:

  1. Open your Nintex form in edit mode.
  2. Select Settings in the ribbon.
  3. Select the Custom JavaScript section.
  4. Enter in the following JavaScript:

I first tried to use the redirect function inside the document ready instead of onunload and I ran into an issue with some forms submitting and other forms not submitting. The issue was happening because the form was redirecting before the submission process completed occasionally. With onunload the form now submits correctly and anonymous users are redirected to the page they were on before filling out the form.