Example of using VGS as a netlify addon
First to all you need to create your site and deploy to netlify.
- Clone repo
- Install netlify-cli. Netlify docs https://www.netlify.com/docs/cli/
netlify initfrom site's directory
netlify addons:create vgsfrom site's directory.
netlify addons:auth vgs, to authenticate and give addon access to your VGS account.
- Then, follow interactive guide.
Example of form
<form name="contact" method="post" netlify-honeypot="b" autocomplete="off" data-netlify data-secure> <p> <label for="name">Basic Field</label> <input type="text" name="name" id="name" /> </p> <p> <label for="secure">Secure Field</label> <input type="text" name="secure" id="secure" data-secure-field /> </p> <p> <button type="submit" id="submit">Send</button> </p> </form>
netlifyform attributes are required by Netlify Forms
data-secureattribute enables VGS Collect to secure your form.
data-secure-fieldinput attribute tells which field should be secured
Example of similar setup using Collect.js
- Go to VGS Dashboard
- Change YOUR_SITE_URL with url of your netlify site (with https://) in collect-route.yaml file
- Click Routes in the left Sidebar
- Import collect-route.yaml on the VGS Dashboard
- Copy your VGS Vault id (it looks like
- Replace YOUR_VAULT_ID in collect.js file with real id
- Deploy your site and open
- Submit the form & observe that
secure-fieldis aliased now
How it works
- When you deploy your site, make sure to include
nameattribute to your form. Then, add the same name to your collect payload https://github.com/verygoodsecurity/netlify-addon-example/blob/master/collect.js#L27
- Then create VGS Collect fields, isntead of hidden inputs https://github.com/verygoodsecurity/netlify-addon-example/blob/master/collect.js#L11
- Also, you need to include hidden input for each field that you want to secure https://github.com/verygoodsecurity/netlify-addon-example/blob/master/collect.html#L50. It will help netlify parser to know which field names will be submitted later.