side project – ninja forms w/conditions

I was working on a student re-enrollment page and with Ninja forms and wanted the parent to be able to specify how many children they were re-enrolling. This allows Ninja forms to show the exact number of fields required, which I think looks more professional, and also allows all of those fields to be set to required. (Each student needs 5 fields filled out to re-enroll.)

So there’s 6 conditions (number of students: 1, 2, 3, 4, 5, 6), and just in case someone decides to scroll through and randomly pick numbers, for each condition you have to declare which fields to show and which to hide. So, for 1 student, that means show 5 fields for that student, and hide 5 fields for students 2, 3, 4, 5, and 6. Repeat again for students 2, 3, 4, 5, 6. Yikes. It is a WYSIWYG editor, which is nice, but also means a lot click click clicking. In fact, just for one condition on a 1440p monitor, only students 1-4 fit. (See end of post for screenshot.)

So long story maybe shorter, I made a new Ninja form with a very simple conditional to see what the output looked like (you can import and export Ninja forms, and it looks like key/value pairs or maybe even valid JSON.) And what it looks like is this (I’ve replaced the actual values with NINJA_FIELD_NAME):

      {
        "collapsed": "",
        "process": "1",
        "connector": "all",
        "when": [
          {
            "connector": "AND",
            "key": "NINJA_FIELD_NAME_1",
            "comparator": "equal",
            "value": "one",
            "type": "field",
            "modelType": "when"
          }
        ],
        "then": [
          {
            "key": "NINJA_FIELD_NAME_2",
            "trigger": "show_field",
            "value": "",
            "type": "field",
            "modelType": "then"
          },
          {
            "key": "NINJA_FIELD_NAME_3",
            "trigger": "hide_field",
            "value": "",
            "type": "field",
            "modelType": "then"
          }
        ],
        "else": []
      },

So, when field name _1 is “one”, show field _2 and hide field _3. Pretty easy. I was also able to get all the field names by exporting the original form. They’re easy to find since it’s your_field_name + a_random_string. So I hope this helps anyone that might need helping. In the end, maybe it would have been faster to set all the values in the Ninja WYSIWYG editor, but making a script to do it was much more fun and interesting than click-click-clicking (and then checking that there were no misclicks!) The end result was 1300+ lines, but for every 7 lines, 5 are conditions and 2 are curly braces (as you can see above – thank you prettier.)

Reply