Web3form API keys are being exposed in html files, since any user can inspect the page and copy it, to prevent this create a process.env file and store you API key there
WEBFORM = your-api-key
Then we'll import it into the html file by adding an id to the
access key input as follows
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact us</title> </head> <body> <form action="https://api.web3forms.com/submit" method="POST"> <input type="hidden" name="access_key" id="key" > <input type="text" name="name" required> <input type="email" name="email" required> <textarea name="message" required></textarea> <div class="h-captcha" data-captcha="true"></div> <button type="submit">Submit Form</button> </form> <script src="https://web3forms.com/client/script.js" async defer></script> </body> </html>
document.getElementById('key').value = process.env.WEBFORM;
This will prevent users from inspecting the page and stealing your API key since the env file is not accesible.
If you are contributing to a Github repo or NPM make sure to add the process.env file to your gitignore file or npmignore respectively