FrontendForms - A module for creating and validating forms on the frontend

[Juergen]

Hello @perplexed

Are you sure that you have added this method to the WireMail object and not to the form object? I have tested it without problems.

Please take a look here at the example of a simple contact form and let me know if this solves your problem.

Jürgen

[perplexed]

Thank you Jurgen. By comparing your template with my code I see what I did now.

I copied a template you created on 15.02.2023 but somehow I'd deleted the line

'<p>[[TITLE]]</p><ul>

from $body.

Dur!

Thanks again.

[Juergen]

Hello @ all

The new version 2.3.0 comes with a brand new feature: the possibility to turn a form into a multi-step form.

Many thanks to @Jan S. for the idea and the support in testing during the development of the new feature.

In a nutshell:

A multi-step form is a long form divided into multiple steps. At the end of each step, the user clicks on a "Next" button to go to the next section. In the final step a summary of the data entered will be displayed to the user. The user now has the option to change some of the data if necessary before finally submitting the form.

Typical use cases are very long forms, surveys or quizzes.

I have written an extra chapter in the docs with a lot more information, which you can find here.

There are only 2 restrictions for multi-step forms to work properly: 

1. The send button must be after the last step (by the way, it wouldn't make sense to put it anywhere in between ;-))
2. File upload fields must be placed in the last step (otherwise they won't work)

To turn a form into a multi-step form, you only need one new method: addStep()

You need to add this method to the form object in the places where you want to make the cut:

$form = new \FrontendForms\Form('simpleform');

$firstname = new \FrontendForms\InputText('firstname');
$firstname->setLabel('Firstname');
$firstname->setRule('required');
$form->add($firstname);

$lastname = new \FrontendForms\InputText('lastname');
$lastname->setLabel('Lastname');
$lastname->setRule('required');
$form->add($lastname);

$form->addStep(); // first step

$email = new \FrontendForms\InputEmail('email');
$email->setLabel('Input Email');
$email->setRule('required');
$form->add($email);

$form->addStep(); // second step

$birthday = new \FrontendForms\InputDate('date');
$birthday ->setLabel('Birthday');
$form->add($birthday );

$form->addStep(); // third step

$message = new \FrontendForms\Textarea('message');
$message->setLabel('My message');
$form->add($message);

$form->addStep(); // fourth step

$button = new \FrontendForms\Button('submit');
$button->setAttribute('value', 'Send');
$form->add($button);


if($form->isValid()){


    print_r($form->getValues());
    // do what you want

}

// render the form
echo $form->render();

That is all! You can find more examples here.

To be informed of all the changes in this release, please read the changelog.

As always, please keep an eye on whether everything is working as expected and report any issues you discover here or directly on GitHub.

Jürgen

[ttbb]

force form to scroll to top after submission?

i've set up a form page with frontendforms which works fine so far.
as the error message after entering wrong or incomplete data appears on top, so it's uncertain the user becoming aware of it on longer form pages.

so i like the form page to scroll to top after hitting the submit button, on both faulty or correct submissions.

i tried to add scrollto actions to both the submit event and to the submit button directly, but they're removed after validation. so they only work once.

is there a hookable function inside of the module to get this done? i don't want to hack into the modules JS.

... or is it a feature/option i've simply overseen?

thanks for any light being shedded on this!

[ttbb]

SOLVED: force form to scroll to top after submission?

I found a solution for me. Pretty simple, feels a bit hacky, but works as intended:

// form.php
$fbutton = new \FrontendForms\Button('submit');
$fbutton->setAttribute('value', 'Send message');
$fbutton->setAttribute('onclick', 'scrollToTop();');
$form->add($fbutton);

// main.js
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

Maybe this can help someone with a similar problem ...

[Juergen]

Hello @ttbb

On 2/22/2026 at 10:43 PM, ttbb said:

so i like the form page to scroll to top after hitting the submit button, on both faulty or correct submissions.

This should work by default 😐, so there is no need to add it to the JS manually. To be more specific: If a form submission is successful or has errors, than the page jumps to the start of the form (not to the top as you have written), so the user can see the success or the error message (independent of the length of the form).

This should work with or without AJAX. 

If it does not work in your case, please post your form code here or send it to me via PM and I will test it.

Best regards Jürgen

[ttbb]

Ah, okay. So, most probably the reason for this jump-up not working here is the page containing two forms next to each other in two Bootstrap columns.
For now, it works fine for me. So thank you anyway for your friendly offer! 

[Juergen]

9 hours ago, ttbb said:

So, most probably the reason for this jump-up not working here is the page containing two forms next to each other in two Bootstrap columns.

I have it on my list and I will test it. I will try to find a solution for such a scenario if I can reproduce the behavior. Thanks for pointing it out.