We used GWT to build the UI, validate the response and submit the form to Magnolia. You can use all sorts of ajax functions or RPC to communicate with the server using GWT, but we didn't need that for our goal. A disadvantage of GWT is that you do not have a very big influence on the html that is being built. If you want to ban tables from your pages and only use divs, you can forget about GTW. If you want your form to be read by form readers for disabled users, GTW does not give you a lot of support for that.
Of course there is a lot of information about GWT available.
What do you need to do to get this done?
Step 1: build an application in GWT.
We built the GTW forms in a separate project. After compilation you get a main js file, like myForm.Application.js and several files with names like 0B9EB67B64740833768F41C7692609DA.cache.html for the different browsers and languages (if you defined those).
We copy the files to the Magnolia project or module so the js files become available for browsing.
Step 2: use the form in a template.
The paragraph contains some information that the GWT-form needs. GWT can get these hidden values from the page.
Then the script is defined, and a container is added in which GWT will write the html to display the form.
Step 3: the form is available in the browser.
The user can fill in the form, including the captcha, and submit it. Validations are done first by GWT, like the required fields, but also regex checks like:
where the regex is:
Step 4: submit and process the form
The form is submitted to "/sendForm", a url which is mapped to a servlet.
In the servlet the content is validated, processed, and a response is sent back to the browser. For example check the captcha:
Send a response:
GWT deals with the response:
You will need to take some time to get to know your way in GWT, but once you have accustomed yourself to it, it is quite easy (and fun) to create forms like these and integrate them in Magnolia.