This is a code sample to illustrate the use of ESPAsyncWebServer together with an HTML form, json for transferring data to the browser and ESP32 Preferences for persistent storage of configuration data. The HTML page is static and defined in PROGMEM as a raw string literal. The variable data in the HTML page comes via a XMLHttpRequest call at the end of the loading of the page.
There is nothing in it which has not been seen before but I put it together as a test bed because I am migrating one application, for which it is used primarily to load configuration data, away from the basic web server integrated into the ESP32 core and to the ESPAsyncWebServer
The JSON field would normally be hidden.
Anyway, here it is, the instructions are in the code and, once the libraries have been loaded, it is simple to set up and use or maybe just serve as a basis for some code snippets.
I hope someone finds it useful or interesting.
webserverASE_V_0_04.ino (12.5 KB)
EDIT
Some code changes based on the experience of scaling it up to a larger application.