Handle HTML5 form submission
- Topics:
- Mobile Forms
CREATED FOR:
- Experienced
- Developer
HTML5 forms can be submitted to a servlet hosted in AEM. The submitted data can be accessed in the servlet as an input stream. To submit your HTML5 form, add an “HTTP Submit Button” on your form template using AEM Forms Designer.
Create your submit handler
A simple servlet can handle the HTML5 form submission. Extract the submitted data using the following code snippet. Download the servlet provided in this tutorial. Install the servlet using the package manager.
StringBuffer stringBuffer = new StringBuffer();
String line = null;
java.io.InputStreamReader isReader = new java.io.InputStreamReader(request.getInputStream(), "UTF-8");
java.io.BufferedReader reader = new java.io.BufferedReader(isReader);
while ((line = reader.readLine()) != null) {
stringBuffer.append(line);
}
System.out.println("The submitted form data is " + stringBuffer.toString());
Ensure you have configured the Adobe LiveCycle Client SDK Configuration if you plan to use the code to invoke a J2EE process.
Configure the Submit URL of the HTML5 form
- Open the xdp and navigate to Properties->Advanced.
- Copy http://localhost:4502/content/AemFormsSamples/handlehml5formsubmission.html and paste it into the Submit URL text field.
- Click the SaveAndClose button.
Add entry in the Exclude Paths
- Go to configMgr.
- Search for Adobe Granite CSRF Filter.
- Add the following entry in the Excluded Paths section: /content/AemFormsSamples/handlehml5formsubmission.
- Save your changes.
Test the form
- Open the xdp template.
- Click on Preview->Preview as HTML.
- Enter data in the form and click submit.
- Check the server’s stdout.log file for the submitted data.
Additional Reading
For more information on generating PDFs from HTML5 form submissions, refer to this article.