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:

[bernhard]

RockForms v2.1.0

• Breaking Change: RockForms was refactored to use RockLoaders for loading animations.
  If you have not used any loading animations in your project you should be safe to just upgrade without issues. If you have any problems let me know in the forum!
• Added getData() method to improve API usage for multi-step-forms

[zoeck]

On 11/1/2024 at 6:21 PM, bernhard said:

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

Thanks Bernhard for your example, I'll have a look to see if I can implement it like this 🙂 

[bernhard]

RockForms v3.0.0 removes RockFrontend dependency for asset loading and uses RockDevTools instead.

It also comes with a new config migration that creates a field to select a form (eg from your rockpagebuilder blocks):

[Pavel Radvan]

HI.
Is possible to use RockForms for updating existing PW pages from Frontend?
For example to create form which will change only specific fields on selected page ($pages->find), that are normaly not required (by field setting in backend), but using this form user will need to enter them, because it will be required before submision of the form.
Or is this better to use some custom way or FormBuilder? FormBuilder is quite big for this specific form...

Thanks for any hint.

[bernhard]

Hey Pavel. Sure. Why not? Any specific questions? Whether RockForms or FormBuilder is better depends on preferences I guess. There's also FrontendForms as another option. Not sure what you mean by "FormBuilder is quite big for this specific form".

[Pavel Radvan]

15 minutes ago, bernhard said:

Hey Pavel. Sure. Why not? Any specific questions? Whether RockForms or FormBuilder is better depends on preferences I guess. There's also FrontendForms as another option. Not sure what you mean by "FormBuilder is quite big for this specific form".

Thanks for your answer. I know about FrontendForms also. FormBuilder specificaly is not intended for updating PW pages, and I think same is FrontendForms. In your docs for RockForms (I have whole suite subscription) is not specified that i could prepare forms for updating PW pages directly from templates.
What I need it is this:
There is PW page with fields and I need logged user (which has also access to backend) to update only specific fields from that page.
In default those fields are not required and by using that form I need users to enter to them values.
What do you think of this ?
Is that possible by some simple form in template or I need RockForms, FormBuilder or FrontendForms for this...?

[bernhard]

Hey Pavel. I think it's the same with all form modules - that's not their primary goal. You'd have to update the page via API.

But in your case it might be easier to modify the regular PW page edit form via hook:

<?php
$wire->addHookAfter('ProcessPageEdit::buildForm', function($event) {
  $form = $event->return;
  
  // the page being edited
  $page = $event->process->getPage();
  if($page->template == 'your_template') return;
  
  // remove a field
  $form->remove('my_field_name');
  
  // sometimes removing fields leads to problems, so you can do this:
  if($f = $form->get('my_field_name')) {
    $f->collapsed = InputfieldForm::statusHidden;
  }
  
  // make a field requried / not required
  if($f = $form->get('your_other_field')) {
    $f->required = true; // or false
  }
});

That might be an easier approach?

[Pavel Radvan]

6 hours ago, bernhard said:

Hey Pavel. I think it's the same with all form modules - that's not their primary goal. You'd have to update the page via API.

But in your case it might be easier to modify the regular PW page edit form via hook:

<?php
$wire->addHookAfter('ProcessPageEdit::buildForm', function($event) {
  $form = $event->return;
  
  // the page being edited
  $page = $event->process->getPage();
  if($page->template == 'your_template') return;
  
  // remove a field
  $form->remove('my_field_name');
  
  // sometimes removing fields leads to problems, so you can do this:
  if($f = $form->get('my_field_name')) {
    $f->collapsed = InputfieldForm::statusHidden;
  }
  
  // make a field requried / not required
  if($f = $form->get('your_other_field')) {
    $f->required = true; // or false
  }
});

That might be an easier approach?

Thanks very much Bernhard. This looks very interesting.
Just I hope I understand right - when I call editing of page by editUrl this hook will start.
Remove field - is this intended to remove from backend form ? I hope yes and not to remove from template permanently....
Regarding required - that means it will put on required for field which in backend is not set as required....?
Regarding formbuilder, rockforms and others I understand - I know that modules for forms re intended to go out of my scope of use...
I will try this anyway...it is of course better to have backend forms ..I already prepared some form on frontend, but if this will work it is better...
Is there possible to more customize backend forms to have for example another text on button for save ?
One more question : How could I edit same page without that hook ? How I could I distinguish when it is with hook or without ?

[Pavel Radvan]

10 hours ago, bernhard said:

Hey Pavel. I think it's the same with all form modules - that's not their primary goal. You'd have to update the page via API.

But in your case it might be easier to modify the regular PW page edit form via hook:

<?php
$wire->addHookAfter('ProcessPageEdit::buildForm', function($event) {
  $form = $event->return;
  
  // the page being edited
  $page = $event->process->getPage();
  if($page->template == 'your_template') return;
  
  // remove a field
  $form->remove('my_field_name');
  
  // sometimes removing fields leads to problems, so you can do this:
  if($f = $form->get('my_field_name')) {
    $f->collapsed = InputfieldForm::statusHidden;
  }
  
  // make a field requried / not required
  if($f = $form->get('your_other_field')) {
    $f->required = true; // or false
  }
});

That might be an easier approach?

I tested it and for some strange reason this hook changed settings of form for every edit of PW page.
It does not matter if i put int template == 'name of my template' or 'id'.
All edit forms changed.
Another thing is that i need to remove several fields and have required several fields - i had to put that form->remove several times and also that part for "required" several times - for each of field.
Then it worked and removed fields and thos I wanted to be required were required...
But there is still problem that this hook do not recognize my template id or name...
I think I have to use another approach or is there some error in your code?