Addon docs https://www.verygoodsecurity.com/docs/integrations/netlify
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/
- Run
netlify init
from site's directory - Run
netlify addons:create vgs
from site's directory. - Run
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>
name
&netlify
form attributes are required by Netlify Formsdata-secure
attribute enables VGS Collect to secure your form.data-secure-field
input attribute tells which field should be secured
- 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
tnt9vwcpbe8
) - Replace YOUR_VAULT_ID in collect.js file with real id
- Deploy your site and open
/collect
page - Submit the form & observe that
secure-field
is aliased now
- When you deploy your site, make sure to include
name
attribute 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.