Skip to main content
Nintex Community Menu Bar

Responsive Forms Challenge #1

  • June 2, 2017
  • 60 replies
  • 176 views

Forum|alt.badge.img+17

As many of you know, Frank Field‌, our fearless community manager would like to make granting users access to specific spaces a lot easier. Here is his request:

Build a form that can capture the following details and time yourself on how fast you can do this.

  • Name
  • Date
  • Email
  • Phone
  • Location/Country
  • Interest - forms, workflow, mobile, analytics, other
  • Member Type - customer, partner, employee, other

Image result for Challenge Meme

Should you accept this challenge there are a few things to consider:

  1. Navigate to your site in Office 365 - this has been emailed to you
  2. Create a list and call it something so you know it is the Pixel Perfect Form for Frank :-)
    1. Build the form first using Pixel Perfect. Time yourself and jot down any pain points you encounter
  3. Create a new list and call it something so you know it is the Responsive Form for Frank :-)
    1. Build the form using the new responsive forms feature. Time yourself and jot down any pain points or bonus things you've noticed.
  4. Once you've done both of those, come back to this post and respond with the time it took and any notes or feedback. If you have a suggestion, click here to create a new idea, or start a new discussion if you feel it merits that. 
  5. You are not required to build a workflow as this is a forms beta. Though I'd share that for anyone who gets eager to solve a problem, like I do sometimes. 

Everyone should attempt this challenge, it's quick, fun and gets you across the new design experience easily. 

Cheers!

Eric

60 replies

Forum|alt.badge.img+11
  • Nintex Partner
  • June 5, 2017

Hi! Thanks for this possibility!

I've just completed this challenge and here are my results:

  • Pixel Perfect Form: in order to do a basic layout for Desktop, Tablet and Smartphone (creating all fields in the form, without rules) I've spent 10 minutes
  • Responsive Form: in order to create my layout (putting all fields in the form without rules), I've spent 5 minutes

After the first publish I've started playing a bit with the new responsive editor and here are my feedback about it:

  • The form looks much more modern than classic ones and rearranging controls is much more EASIER than before..thanks!!!! Note: when in Preview Device, moving controls isn't so easy to do as in the designer, the anchor that allows to move the control/row is not so easy to find/make it appear.
  • I haven't found (maybe my fault) the possibility to change dimension of a control (maybe I want that Email is full width for LG-device and half width for MD-device and smaller)..is it possible? 
  • On Desktop, in my opinion the calendar tooltip is too big: 

      while a big panel could be useful for smaller device, on a desktop could be reduced in size (maybe lowering some padding is enough)

  • While viewing a form, the label shown using the Title property of the control is bigger than field value, while sometimes customers want to have the data with more evidence than the label..having capabilities to set a different ratio between labels and values could be great (maybe a form setting that will be applied to whole form could be enough)

I've also a question about one kind of rule that was announced at InspireX: a rule to set a field value..is this kind of rule still work in progress or has it been removed from the project?

Last..one clarification about one point in the description of the preview, control/features no more availables: the (on-premises only) means that this feature will be available only on-premises or that also for on-premises they won't be available anymore?

Why copy/paste control won't be supported? I've used it a lot if I've to build a big form with a lot of similar controls, I think this missing feature could be an issue in some scenario..

Giacomo


Forum|alt.badge.img+17
  • Author
  • June 5, 2017

Great feedback and glad you like the challenge.

50% time reduction is awesome and we're going to try and reduce that even more. We will digest your other comments as well and will respond accordingly but I wanted you to know that we are reviewing them.

Thanks,

Eric


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • June 7, 2017

Hi

Thanks for your feedback. Thats great to hear that the form build time is halved. Its one of the key drivers for this new designer.

Ill have a chat to the engineering team and the UX team about your feedback. We may have another build soon.

Let us know if you have any other suggestions.

Cheers,

Euan


TomaszPoszytek
Forum|alt.badge.img+17

Hi, below are my observations (Edge, Windows 10 PRO, Surface Pro 3).

Designer

I'm working on a Surface with a touch screen, mostly using the pen. I don't know how differently is pen interaction treated to a regular mouse, but I cannot drag&drop fields to change their order. Also, I cannot use it to drag&drop controls on to the form. I can say, that for some reason the drag&drop doesn't work (in Pixel Form designer it does happy.png).

Preview

I don't know if this is only my case, but it failed generating the preview. I clicked "generate preview" for edit mode and the "loading" hanged then I just gave up (it was under Edge). Preview of the form for dimensions works super fast and is ok. Also, there is an empty field "Device" on the "Preview" popup, that is a leftover from the Pixel Form functionality:

Form 

I noticed a problem with the option field where I can provide my own value. I cannot check the "Specify your own value" option:

Validation

I think (or maybe I am missing something) that somehow the regular expressions for validation are interpreted incorrectly. I have validated this regex in RegexStorm (online tester):

^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$

But even a correct email is highlighted as en error.

Other

I was aware of that but somehow I very miss the custom JS functionality. Ex. how can I re-create the custom function being called when the button was clicked, ex. to get external data? Ok, there is a "JavaScript" action for the "button" but... where can I declare the function itself?

How can I trigger any action on other field change? happy.png The "responsive" form is really modern and I like it very much, but somehow feel lack of JS support as a major gap sad.png

You wrote:

Can I use custom JavaScript with these responsive forms?

No. Our intent is to provide the controls and capabilities customers typically reverted to JavaScript for such as UI constructs, setting default values and additional validation of the product. JavaScript functionality will remain available in the 'Pixel Perfect' forms.

How can I then set a default value on the other field based on the selection in the first one? I cannot see any inline function like "onChange", neither there is a formula to do it.

Time to create

So I'm rather pedantic with the layouts - it always takes me much time to work with the Pixel form as there is so much effort needed to position new controls on the form. You have to first change working area to make more space, then precisely move the control on the layout, then work with overlapping etc... Definitely time required to create a basic form is rather equal for both scenarios - when it is started from a list having defined columns its always easy.

However then, when you decide to customize it, to reorganize controls, add new ones - responsive forms are faster, thanks to the fixed layout and stick panes where controls can be moved. So in Responsive it takes minutes, in Pixel tens of minutes happy.png

What am I missing?

Despite the "repeating section" what I would like to find, having in mind vertical layout of the form, is the expand/collapse pane, that would be used as some sort of a tab in the form, to hide controls inside, so that the form would not be that long.

And custom JS. Really happy.png

Regards,

Tomasz


Forum|alt.badge.img+17
  • Author
  • June 14, 2017

Thanks Tomasz. I am working through your notes and will update this post when we hear back from the product team regarding some errors.


jesse_mchargue
Forum|alt.badge.img+12

Hello All - 

I spent about 12 minutes on the Pixel Perfect Form and about 5 minutes on the Responsive Form.

I approached this with simply the form only in mind. I created all my fields in the designer and then "reset" the form to get them added. From there, it was a matter to resizing and rearranging the controls so that they are in the order that I want. 

Pixel Perfect Form

204255_pastedImage_3.png

Responsive Form

204256_pastedImage_5.png

Pixel Perfect Form took about 10 seconds to publish, but about 20 seconds to generate a preview. This was a bit of a pain as I like to see how things are going to look in the actual form and not just the design canvas. Interestingly, the Responsive Form took about 20 seconds to publish, but the preview was instantaneous (totally caught me off guard even though I remember the demo from InspireX)!

I prefer the Responsive Form much more as of now simply because of how easy it is to move controls and have them align with minimal effort! In Pixel Perfect, it requires some tinkering and can lead to countless previews to make sure it is...well... Pixel Perfect. 

One thing that I thought of while doing this and hope that it can be added in, especially if the intent is to move away from JS, but to have the ability to select how the data is formatted. Example would be for date, select how you want to format the date. We see this in InfoPath (yes... I went there), but I see this all too often where someone wants the date (or anything else) in a different format.  Not sure if we could accomplish this with some rules, but if it was baked into the settings somehow, I think it would answer a lot of asks.


TomaszPoszytek
Forum|alt.badge.img+17

I would like to put your attention to distance between "Save" and "Cancel" buttons (it's huge imho). There is no possibility to make this gap smaller. Can this be enhanced somehow too? happy.png


jesse_mchargue
Forum|alt.badge.img+12

Tomasz Poszytek‌ - 

I was able to realign the buttons within their container and ended up with this look:

204530_pastedImage_1.png

But you raise an interesting point... you cannot resize the button as you could with Pixel Perfect. While it does attempt to resize to fit the button label, it has its limits:

Button Label : "Save Button Is This Big"

204531_pastedImage_2.png


Forum|alt.badge.img+17
  • Author
  • June 14, 2017

McHargue‌ ,  and Gelosi take a look at  . I played around with it and it was cool. Do any of you have a form that you need built out that we could test against? I'm fresh out of ideas, at the moment.


jesse_mchargue
Forum|alt.badge.img+12

What about hiding/showing sections based on some logic?

If the user selects this show that kinda thing? Would that work? 

I figure that has to be a common ask/need. Unless we can do pages...


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • June 19, 2017

Hi Jesse McHargue

We are building a new control called the 'Container' control. This is essentially like the 'Panel' control where you can place controls inside a container and hide the controls. The control will have a 'Title' property and also a 'Description' property.

Cheers,

Euan


Forum|alt.badge.img+8

I did this challenge a few different ways:

  1. Lists using custom list columns and no custom content type, then customized the forms.
  2. Multiple lists sharing the same site content type and columns (one list for Pixel Perfect and one for Responsive). I switched to this approach so I could ensure identical metadata used in both flavors of the form.
  3. Blank list without any custom columns and drag and drop disconnected controls.  Then went back and created columns and associated my controls to the new columns.

For 1 and 2, most of time is spent creating SharePoint columns, and minimal time is spent in Nintex.  The time spent depends on how you wish to adjust the layout of the controls.  I have a few suggestions for future versions of this challenge, assuming the goal is compare time needed to layout controls in Pixel Perfect vs Responsive designers...

  1. Provide a screenshot or image of a completed form with labels and controls to show the completed forms
  2. Instructs users to use a basic list with no custom columns.  Only drag new controls on the form.
  3. Goal is to recreate a form with same look and feel as one presented.

Anyway, here is my feedback so far:

  1. Responsive Designer is much faster.  Create layouts in 50% (or less) of time needed compared to Pixel Perfect designer.  Its so nice not to get bogged down in exact location of every control, and configuring a separate label and resizing controls in a nitpicky manner.  This is a big win.
  2. Responsive Designer only allows two columns of controls.  I assume this is by design?
  3. Responsive Designer only allows labels above each control.  Not to left or below the control.  Is this by design?  Any plans to allow different label placements in the future?  (It is nice to not worry about manipulating each label separately.)
  4. Many of our forms use repeating sections and panels.  I know these features are coming.  Any ETA for these yet?
  5. We often create "tabbed" forms, using option buttons styled as buttons/tabs.  In O365 this technique relies on some custom CSS.  But CSS is not supported in Responsive Forms.  Will something like the "Render as buttons" feature be available soon?
  6. I believe I found a bug if using a Choice field, configured as a Drop Down list with "Allow 'Fill In choices" enabled.  In Responsive forms, it does not allow you to select the option for "Specify your own value".

Chris_Ben
Nintex Employee
Forum|alt.badge.img+14
  • Nintex Employee
  • June 20, 2017

Hi all,

This is great stuff.  I love the new direction.  Here are my experiences in creating these forms using IE 11. 

My method

  • I created two lists with exactly the same fields as specified by Eric
  • I then added an "Interest Other" and a "Member Other" fields.  I did this on purpose at the end to simulate what it's like when someone goes "oh I forgot to ask you if you could just add..."
  • For both forms I wanted to make the following modifications
    • Replace the Nintex Logo with my own
    • Replace the location/country text control with the geo location control
    • Move the two "other" fields below their respective fields and only display them if "other" was selected
    • Add a validation rule to make those fields mandatory if "other" was selected
    • Make a desktop and a mobile phone layout
  • I already had a play with responsive designer before I started with this to level the playing field

Pixel Perfect results

  • Time: 10 mins
  • Desktop render worked as we know it.  I had to increase the layout size to give me room to move the "other" fields into place which is always a bit of a pain.  At least they were close to the bottom
  • Creating the mobile layout added the Nintex mobile logo as well as the new image I had added to the desktop form.  This always happens and it'll be due to the default template.  NB My method is to delete the default image and drag a new one onto the pallette vs replacing the existing image - I always do it this way as it means the image displays properly in the Nintex mobile app
  • Preview of the mobile layout showed some errors in displaying the "other" fields.  I had to separate a few controls to fix this and of course to separate them I had to increase the mobile layout size

Responsive results

  • Time: 10 mins but it actually took 7.  See below for why
  • I used a svg format logo from the web.  As this is a vector, it was friggin' HUGE in my layout vs the pixel perfect one which displayed at a nice size.  I had to go into properties and change the percentages to get it to display in a semi decent fashion
  • Moving the "other" fields into place was so easy
  • When I replaced the location text control with the geo tag one and bound the field, it automatically changed the label.  Nice touch!
  • When I wrote my hide rules, I realised I didn't need to apply the rules to the label because there aren't any.  Boom!
  • Creating the rule was slightly harder than the pixel perfect version.  On two occassions I forgot to choose the behaviour (e.g. hide or invalidate) because that option isn't in your face.  Maybe this could be rendered as a radio button instead of drop down?
  • Creating the mobile layout obviously took zero time
  • My issue came during preview time.  Preview "device" is fine.  As Jesse said, it's super fast.  However that only shows what a form will render like on different devices.  You can't test it so I think it's got limited use.  The preview that I really wanted to see was the preview "form" mode.  I had a funny dialog box where I couldn't select the form and then it sat on that screen trying to render for 3 mins until I gave up and closed the browser window.  Hence this taking me 10 mins instead of 7.  When I actually used the form in production mode, it worked fine.

When this is fixed, it will be sweet. However, I'd consider making the form preview the default vs the device preview.

Other comments

  • tool tips would be helpful e.g. what do the arrows do?  "make bigger" "move left" etc
  • This is FAST!  It's so nice and smooth compared to the current version
  • It took me a while to figure out how to add a row but got it eventually
  • I have no idea how to create a row at the top. In the end, I had to create it as row 2 and move it up
  • Wrapping for some field labels puts them out of alignment on smaller width devices (when you've resized the input field to be a bit shorter than default but the label is a bit longer)
  • Nice how the print to pdf button is optional
  • No copy/paste of elements
  • No way to change fonts/colours
  • Mandatory fields aren't identified (with a star or colour etc)
  • It woulld be good to get masks for validation in fields e.g. email/phone formats

Cheers,

Chris


Forum|alt.badge.img+7
  • Nintex Partner
  • June 20, 2017

Hi, 

my  feedback after first test :

- Faster design with Responsive Forms : 6 min vs 10 

- Impressive much faster Preview....before understanding it was not a preview :-) ! "Real" preview with New/Edit mode, rules testing,.... is much longer than it was 

- No need to hide labels ! :-)

- I'm afraid this could not be used for many of my projects because of huge space between fields : I don't see how I could design a big Form, like 30 or 40 fields, letting users scroll and scroll to get bottom fileds. 

In my test, I couldn't see more than 10 fileds without scrolling...

If I tried to imagine customer reactions seeing my test form : 

- "Buttons in top doesn't look like designed for professional environment" 

204722_pastedImage_1.png

- "Why can't I set fields on 3 columns if I want to ?"


TomaszPoszytek
Forum|alt.badge.img+17

Ad. 6 - I also faced that bug happy.png


TomaszPoszytek
Forum|alt.badge.img+17

Regarding the preview - I also faced that issue. I gave up waiting for the preview to render. Have you succeeded in using it in the end?

Regards,

Tomasz


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • June 21, 2017

Hi Thomas Beduneau‌,

Thanks for your feedback. I appreciate your comment "I'm afraid this could not be used for many of my projects because of huge space between fields". This sort of feedback is really important to us - knowing what is going to stop you from using it on a project.

I have already raised padding as an issue across Responsive Forms and Nintex Workflow Cloud, however, its great to see it from our partners.

Is there any other major blockers for you at the moment?

Cheers,

Euan


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • June 21, 2017

As always, appreciate the feedback ‌. Would you mind getting on a call with our UX team? They are looking to do some UX testing on the betas.


Forum|alt.badge.img+8

Hi Euan Gamble‌ -

I'm curious to see what additional functionality is planned for the "Rules" feature.  

At the last InspireX there was discussion about the need for Javascript (or not) in Responsive forms.  As I understand the vision was that using Rules, we should be able to accomplish most things that Javascript is used for.  

I recall a comment being made that the Rules feature would support the ability to manipulate any property on any control based on changes to any other property on any control (or something along those lines).

Is that still the vision?  


Forum|alt.badge.img+16

OK I finally had a look and the results are in:

Pixel perfect took me 9 minutes

Responsive took me 2.5 minutes

That is quite a significant change!!  Also, my blimmin' labels still weren't quite aligned properly on pixel perfect but I got fed up - so in reality it's a much cleaner looking form and took me so much less time!


Chris_Ben
Nintex Employee
Forum|alt.badge.img+14
  • Nintex Employee
  • June 21, 2017

It worked fine for pixel perfect but I was unsuccessful with responsive.  Then again, I only tried a couple of times.


Chris_Ben
Nintex Employee
Forum|alt.badge.img+14
  • Nintex Employee
  • June 21, 2017

Absolutely Euan!


Forum|alt.badge.img+16

OK my feedback just based on what I have just done for this challenge is as follows:

  • Normally I would create my list first with the columns as per my design before even entering the designer - so this was not a true test of how I would approach it.  if I had done it this way then the labels and everything would have been there for me and I wouldn't have spent so much time copying and pasting the labels and realigning (didn't think to do what you did Jesse McHargue‌ and just reset the form!!)
  • When moving fields around in responsive designer I think that the "drop zones" or "containers" (what are they called out of interest) could be bigger - I found it quite fiddly to get the hang of where I was dropping stuff at first - it all kept going into the button section when I first started!
  • Paging / Tabs / Panels - this is an absolute must for us.  As I have discussed with you before Euan Gamble‌ we design our forms following UK government guidance for forms design (links below) - they argue usability is impacted when a form is very long and has lots of questions.  I know you said multi-paging would be discussed - are you any further along with that?
  • Agree that the required fields indicator (*) was a really nice feature before and I would like that back
  • I would like to be able to change the position of the labels to be to the left (or other)
  • I also think there could be more visual help with what the controls on the designer are doing
  • I just lost quite a bit of work in responsive...  went to preview my changes, missed the tiny little "Return" button at the bottom right and inadvertently clicked "back to site" - no warning that I would lose all the rules and other changes I had made to the form - that will be an easy mistake for a lot of users to make.

https://userresearch.blog.gov.uk/2015/08/13/no-more-accordions-how-to-choose-a-form-structure/

https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/

https://www.gov.uk/service-manual/design/form-structure


EuanGamble
Nintex Employee
Forum|alt.badge.img+13
  • Nintex Employee
  • June 21, 2017

Hi ‌,

We are discussing set field value at the moment but nothing has started yet. However, we would prefer to offer native functionality in the product over using JavaScript.


Cheers,

Euan


Forum|alt.badge.img+8

That is good!  Set Field Value is critical of course (along with the existing features for Hide, Disable, and basic formatting).