The Responsive Forms Designer, now available with Nintex Forms, allows you to create beautiful and powerful forms that are automatically optimized for any device or screen size. With the rapid pace of tech advances, responsive design is becoming an increasingly necessary component to any online interactions, including at the data capture phase of your most important business processes. Read on to learn about the 5 features that I am loving the most!
1 – Responsive From Beginning to End
Not only does the new Responsive Designer allow you to create responsive forms for your end users, but the design experience itself is responsive. For example, one of the most common updates we make to our Nintex Forms is to implement a multi-column layout instead of the default single column layout. With the Responsive Designer, you can simply drag and drop your controls on the canvas to re-position very easily into a two-column layout.
The Responsive Designer also makes it easier to add new controls onto the form. New rows are automatically created and controls are shifted accordingly when you drag and drop a new control onto the canvas. Resizing controls is a breeze with the “Increase width” and “Decrease width” buttons on each control.
2 – Streamlined Controls
One of the more subtle, but very impactful changes with the Responsive Designer is the combination of each input control with its corresponding label control. As you may have noticed in the previous examples, the label control is tied to each input control, so when you rearrange controls on the canvas, you only need to do move each control once. This. Is. Huge!
Of course, you still have the ability to change the label at any time by simply selecting the control and updating the “Title” in the Properties pane on the right side of the canvas.
3 – Themes
Once you’ve rearranged all of the controls for more effective data capture, you will likely want to update the styling of your form to coordinate with your company’s look and feel – otherwise known as branding. The Responsive Forms Designer provides a Theme feature where you can easily adjust form colors and fonts, without the need for CSS. For example, I can change the color of my Save button, select a different font, and update the size and color of the text on my form, through the Global styles section of the Theme pane.
4 – Updated Rules Pane
I really like the new presentation of the Rules pane in the Responsive Forms Designer. The formatting and validation rules have been combined into a single definition structure, which reads in a slightly more logical order resembling an “if-then” statement. For example, when Start Date is in the past, then Invalidate (i.e. the form cannot be submitted), and display this Validation Message. Easy-peasy!
5 – Power of Choice
While the Responsive Designer provides a great alternative to the Classic “pixel-perfect” experience, especially when working within a BYOD culture, there are times when you may still prefer the Classic Designer. For example, the Responsive Designer does not currently support custom CSS or JS/jQuery. So, if you have a form with those types of requirements, you will need to use the Classic Forms Designer. Luckily, Nintex makes this easy for us. When you first create a new Nintex Form, you will be presented with the option to specify which design experience you would like to use.
In addition, this choice is available whether you are using Nintex for SharePoint 2013, Nintex for SharePoint 2016, or Nintex for Office 365. So, no matter where you are automating your business processes, you have the power to choose the forms design experience that makes sense for each scenario.
So, what next?
Have you tried the Responsive Designer yet? Whether you are tired of nudging your controls and labels to get them lined up just so, or you are intrigued by the option to use the Theme settings instead of CSS for form styling, the next step is to try it out!
If you are using Nintex for Office 365, it should be automatically available in your tenant. If you are using Nintex for SharePoint 2013 or 2016, you may need to update your Nintex product to the latest version. Details on that process can be found on the Nintex Community site, Nintex Connect, here for 2013 and here for 2016.
Nicole Vesser 