Category: Form Defender™
Integration
Last Update: 15.11.2018
Easily Integrate Form Defender protection
Form Defender is a JavaScript Widget prepared for non-developers so that you can easliy integrate it to your website. The following steps will explain how you can integrate Form Defender with most websites and platforms.
1. Make sure you have generated your API Key
Before we start, please check that you have created an application in the Form Defender Panel. If you have not done this yet, please read the article about How to create a new application in Form Defender.
2. Copy Form Defender settings script and Form Defender core script.
Next, copy and paste the following code at the top of your other scripts:
<script> const _CEDefenderSettings = { application: 'API_Key' }; </script>
<script src="https://correct.email/form-defender-1.0.min.js"></script>
Note: Make sure that you replace API_Key with the API Key you previously generated.
Your page structure should look like the following example:
...
<body>
...
<script> const _CEDefenderSettings = { application: 'API_Key' }; </script>
<script src="https://correct.email/form-defender-1.0.min.js"></script>
... other <scripts></scripts>
</body>
...
What does “at the top of your other scripts” mean?
There is a possibility that your document file (.html) contains many <script>
tags.
To make Form Defender work properly, you must paste our scripts above all other <script>
tags in your <body>
section but above your form declaration.
3. Indication email input field in your form
Form Defender is working properly when one of these conditions are met:
- There is an input field with type=“email”
<input type="email">
field inside<form>
- works automatically - There is an input field with name=“email”
<input name="email">
field inside<form>
- works automatically - There is a data-ce-defender attribute in input field
<input data-ce-defender>
- manually added
That’s it! Now your forms are protected and ready to go.
Find out more about using Form Defender’s full capabilities:
- Form Defender - Advanced Settings - set multilanguage, customize frame width, etc.