Setting Up a Captive Web Portal to Input Wi-Fi Credentials

Hello all!

I have been working on this bit of code (shown below) as part of a larger project and the end goal is to connect to an ESP-32's wi-fi network and set up my wi-fi network through a captive web portal. This seems like a simple concept but despite hours of research, I cannot get anything to work. I know that there are GitHub projects related to this idea but I could not get any of them to work either.

Please be warned that the code is made up of bits of tutorials that I have cobbled together and edited to try and get the functionality I need. It is not properly commented. I am not a professional/expert programmer or anything close to that, but I am very keen to learn.

So far I have got the ESP32 access point to appear on my phone and when I tap on it, the HTML form appears. The part which I am struggling with is getting the information from the form, once it has been submitted, and using it in my program. It seems very simple, and I can find ways to do it when the HTML page is hosted on a separate web server but not when hosted on the ESP32 itself.

I would really appreciate any help that you can offer.

Many thanks,
Sean

#include <WiFi.h>
#include <DNSServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(8,8,4,4); // The default android DNS
DNSServer dnsServer;
WiFiServer server(80);

char* wifiSSID = "input1";
char* wifiPass = "input2";
char* devName = "input3";
char* emailAdd = "input4";
char* userName = "input5";

String responseHTML = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>Device Setup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body{color:white; background-color:#141414; font-family: Helvetica, Verdana, Arial, sans-serif}
  h1{text-align:center;}
  p{text-align:center;}
  div{margin: 5%; background-color:#242424; padding:10px; border-radius:8px;}
  br{display: block; margin: 10px 0; line-height:22px; content: " ";}
  label{text-align:left; padding:2%;}
  input{border-radius: 4px; border: 2px solid #0056a8; width:90%; padding:10px; display:block; margin-right:auto; margin-left:auto;}
  input[type="submit"]{font-size: 25px; background-color:#0056a8; color:white; border-radius:8px; height:50px; width:95%;}
  </style>
  </head><body>
  <div>
    <h1>Device Setup</h1>
    <p>Please enter the following details to setup your device:</p>
    <form action="/get">
      <label>Wi-Fi Details</label>
      <br>
      <input type="text" name="wifissid" id="wifissid" placeholder="Wi-Fi SSID">
      <br>
      <input type="password" name="wifipass" id="wifipass" placeholder="Wi-Fi Password">
      <br>
      <label for="devname">Device Name</label>
      <br>
      <input type="text" name="devname" id="devname">
      <br>
      <label for="emailadd">Email Address</label>
      <br>
      <input type="email" name="emailadd" id="emailadd">
      <br>
      <label for="username">Your Name</label>
      <br>
      <input type="text" name="username" id="username">
      <br>
      <input type="submit" value="Submit">
    </form><br>
  </div>
</body></html>)rawliteral";

void setup() { 
  WiFi.mode(WIFI_AP);
  WiFi.softAP("Smart System");
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
  WiFiClient client = server.available();   // listen for incoming clients

  if (client) {
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (c == '\n') {
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print(responseHTML);
            break;
          } else {
            currentLine = "";
          }
        }
      }
    }
    client.stop();
  }
}

Take a look at the system library WebServer of the ESP32 Arduino package, especially the examples there.