RockForms - Simple, secure and versatile forms based on NetteForms

[bernhard]

RockForms is based on the great Nette Forms Component and adds a little ProcessWire magic here and there to make working with forms a breeze.

It will render forms directly into the markup of your website (no iframes!), which makes it a perfect companion for tools like HTMX or Alpine.js ❤️

Download & Docs: baumrock.com/RockForms

[gebeer]

Great stuff as always ?

Receivd your newsletter today that features the release of RockForms. Totally did not see this post before.

I have read through the docs completely. Quite impressive. You seem to have all the functionality needed for rapidly building forms. Some nice wrappers around the sometimes clumsy Nette API. I've been building forms with Nette before and that was not always a pleasant experience. Great that your module simplifies the process.

Will surely use this in upcoming projects.

[bernhard]

From the Rock Monthly newsletter:

RockForms v1.4.0

• RockForms does now support file uploads!! ? 
  https://tinyurl.com/ymhofek9
• Improved several security features thx to @netcarver
• Improved the API

[nurkka]

Thanks @bernhard for making this awesome module!

I tested it today and got it to work instantly on a new page. I only had to install RockMigrations, which is a dependency, and RockFrontend. The latter is not defined as a module dependency, but it is needed by RockForms in order to load RockForms.js in the frontend.

Unfortunately I was not able to get RockForms to work in my current website project, where I am using RockPageBuilder, Latte, Less, Sass and so on. I am outputting the form within a RockPageBuilder block, which worked instantly. It is also possible to submit forms, and the form data is correctly logged, but cannot be saved to a new form entry page. It always says: "Can’t save page (id=0): /form-submitted-by-lorem-ipsum/: It has no parent assigned". Also, the option "Show datapage in PageTree for superusers" does not show the DataPage in the page list. I believe that somehow, the DataPage (which I assume is the parent in the mentioned error message) was not created when installing RockForms. Currently I don't know where to search for the cause of the problem - perhaps you have any clues?

I also have another comment on the UI of RockForms: I have a ProcessWire project, which is already several years old and grew already kind of large, with at least 30 to 40 different forms. The next form I will implement there shall have file-upload, and I would like to do that with RockForms - and possibly migrate all the other existing forms to RockForms, or at least use it for the next 30 forms 🙂 
But: The RockForms UI currently shows all form entries under one parent and in one list, even if they come from different forms. Example from my test installation of today:

This complete list of all form entries wouldn't be practical for my client, because they currently have about 50.000 form entries from about 30 different forms. They would at least need different folders for different forms. And the best thing would be, if they had some search/find/filter functions to quickly find certain form entries.
Are these features something you would add to the roadmap?

[bernhard]

Hey @nurkka glad if you like it 🙂 

1 hour ago, nurkka said:

I also have another comment on the UI of RockForms: I have a ProcessWire project, which is already several years old and grew already kind of large, with at least 30 to 40 different forms. The next form I will implement there shall have file-upload, and I would like to do that with RockForms - and possibly migrate all the other existing forms to RockForms, or at least use it for the next 30 forms 🙂 
But: The RockForms UI currently shows all form entries under one parent and in one list, even if they come from different forms. Example from my test installation of today:

This complete list of all form entries wouldn't be practical for my client, because they currently have about 50.000 form entries from about 30 different forms. They would at least need different folders for different forms. And the best thing would be, if they had some search/find/filter functions to quickly find certain form entries.
Are these features something you would add to the roadmap?

I've added docs for this question here: https://www.baumrock.com/en/processwire/modules/rockforms/docs/entries/

Does that answer your question? I'll come back to the other question later.

[nurkka]

Thanks @bernhard, and sorry to not have found that myself, as it's right in the documentation 🙈 
I'll definitely check out RockGrid, too!

[bernhard]

Just now, nurkka said:

Thanks @bernhard, and sorry to not have found that myself, as it's right in the documentation 🙈 

I've added that to the docs for you some minutes ago 😉 

[bernhard]

2 hours ago, nurkka said:

Unfortunately I was not able to get RockForms to work in my current website project, where I am using RockPageBuilder, Latte, Less, Sass and so on. I am outputting the form within a RockPageBuilder block, which worked instantly. It is also possible to submit forms, and the form data is correctly logged, but cannot be saved to a new form entry page. It always says: "Can’t save page (id=0): /form-submitted-by-lorem-ipsum/: It has no parent assigned". Also, the option "Show datapage in PageTree for superusers" does not show the DataPage in the page list. I believe that somehow, the DataPage (which I assume is the parent in the mentioned error message) was not created when installing RockForms. Currently I don't know where to search for the cause of the problem - perhaps you have any clues?

Hey @nurkka I looked into that and I'm not sure what happened. At first I was able to reproduce this, but now I can't any more. I'm not sure, maybe my changes fixed that issue. I have removed RockLoaders as dependency as I think it should only be an enhancement but not a requirement. But as I see now your version likely didn't include RockLoaders as this was only on the dev branch.

Whatever. Could you please backup everything and then remove RockForms from your project and then reinstall the newest version v2.0.0 ? https://www.baumrock.com/releases/rockforms/

I'll have to fix an issue with those loading animations provided by RockLoaders, but apart from that the module should work!

If you have already created forms in /site/templates/RockForms you can leave them untouched. Just replace everything in /site/modules/RockForms

Let me know how it goes!

[nurkka]

I installed the new RockForms version 2.0.0 and now everything works:
The DataPage is displayed in the page tree and the form submissions are saved as child pages of the DataPage.
Filtering via the ProcessWire Find and Bookmarks feature also works like a charm.
(I also installed RockGrid (1.0.2), but when trying to create a new Grid, there was an error message (RockGrid::refresh does not exist or is not callable in this context), so I postponed the test until later, when I finished my current project 🙂)

Thanks @bernhard !

[Sanyaissues]

@bernhard I was aware of RockForms' existence but just by name, but never took the time to read more about it.
I just finished reading the docs, and man, that module is a beast! hats off!

[zoeck]

Hello Bernhard,

since I am currently revising some functions on a page, I would like to partially renew a few forms that currently run via their own scripts.
I have encountered a problem where I don't know exactly how to implement this with RockForms.

I have the possibility to add any entries in a form, I have also seen that there is a plugin for Nette Forms.
Is it possible to use the forms-multiplier plugin in RockForms, or is there another way to implement this?

Thanks 🙂 

[bernhard]

5 hours ago, Sanyaissues said:

@bernhard I was aware of RockForms' existence but just by name, but never took the time to read more about it.
I just finished reading the docs, and man, that module is a beast! hats off!

Hey @Sanyaissues thank you very much!! 🙂 

3 hours ago, zoeck said:

Is it possible to use the forms-multiplier plugin in RockForms, or is there another way to implement this?

Hi @zoeck thank you for your question - I have not had the need for that so far but looking at the docs of your link it looks like a great match. If you only need a simple repeating element it might also be an option to use AlpineJS! What is the exact use case?

[zoeck]

41 minutes ago, bernhard said:

What is the exact use case?

For example, I have a case where I select a period in days in step 1 of the form.
In step 2, the user should then be shown 3 checkboxes for each day that they can select (morning, midday, evening).

While I'm writing this text, I'm not sure whether I need the forms-multiplier plugin at all.

Is it possible to display a dynamic number of checkboxes in groups in a 2nd step with RockForms with a MultiStepForm?
If that would work, I could also use RockForms without the additional plugin 😉 

[bernhard]

I still don't understand. Could you please describe it with an example from start to finish?

[zoeck]

The interesting part is actually steps 1 and 2.
Step 3 is just a check by the user that all the data entered is correct
Step 4 is the confirmation that the information has been saved.

I have created a small mockup here, I think you can see what the form does.

 

[bernhard]

Hey @zoeck thx that helped a lot.

I hacked together an example for you that shows how you can use AlpineJS for that:

  public function buildForm()
  {
    $form = $this;
    $form->setRockFormsRenderer('UIkit');
    $form->setHtmlAttribute('x-data', '{
      lines: 2,
      init() {
        // update lineData when lines input changes
        this.$watch("lines", this.lineData.bind(this));

        // monitor inputs and update textarea
        document.addEventListener("input", this.updateTextarea.bind(this));
      },

      // return an array that we can use for x-for
      lineData() {
        return Array.from({length: this.lines});
      },

      // update textarea when inputs change
      updateTextarea(e) {
        // find all .linedata elements
        const els = document.querySelectorAll(".linedata");
        // get their values
        const values = Array.from(els).map(el => el.value);
        // join them with newlines
        const text = values.join("\n");
        // set the textarea value to that
        document.querySelector("textarea").value = text;
      },
    }');

    $form->addInteger('lines')
      ->setHtmlAttribute('x-model', 'lines');
    $form->addTextArea('times')
      ->setHtmlAttribute('rows', '10');
    $form->addMarkup('<template x-for="line in lineData">
      <div><!-- must have one single root element -->
        <input type="text" class="linedata uk-input">
      </div>
    </template>');
  }

The idea is to create a textarea (that would be hidden) that holds the data and to build the UI based on another input via AlpineJS x-for directive: