Vanilla HTML Forms

Protect any HTML form with automatic detection, moderation, and inline feedback. No framework required.

Before You Begin

  • A Babel Shield account and API token -- see Getting Started
  • Your site served over HTTPS (or http://localhost for development)

Add Babel Shield

Add the script tag before </body> in your HTML:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"
        data-api-token="YOUR_API_TOKEN"></script>

That's it. Every <form> on the page is now protected. When a user submits a form, Babel Shield extracts the text content, sends it for moderation, and blocks flagged submissions with an inline message. Clean content submits normally.

Customizing with Data Attributes

Add data attributes to the script tag to customize behavior without writing any JavaScript:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"
        data-api-token="YOUR_API_TOKEN"
        data-feedback-mode="modal"
        data-blocked-message="Please revise your message."
        data-debug="true"></script>

See the data attributes reference for all available options.

Programmatic Initialization

For more control, omit data-api-token from the script tag and call BabelShield.init() yourself:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"></script>
<script>
  BabelShield.init({
    apiToken: 'YOUR_API_TOKEN',
    debug: true,

    thresholds: {
      spam: 70,
      profanity: 50,
      hate: 30
    },

    feedback: {
      mode: 'inline',
      messages: {
        spam: 'This looks like spam. Please revise your message.',
        profanity: 'Please remove inappropriate language.',
        default: 'Your submission was blocked by our content filter.'
      }
    }
  });
</script>

This gives you full control over thresholds, feedback modes, custom messages, and event handling. See Configuration for all options.

Automatic Form Protection

Babel Shield only moderates user-generated text content. Pre-defined values and constrained inputs are skipped automatically.

Moderated Skipped
text, email, tel, url, search inputs select, checkbox, radio
textarea number, range, color, date/time
contenteditable elements (with name or data-name) password, hidden, file
submit, button, reset, image
Disabled or readonly fields

This means a feedback form with a star-rating <select> and a comment <textarea> only moderates the comment. The rating submits without moderation because its values are pre-defined.

Excluding Forms

Add data-babel-shield-ignore to any form that should not be moderated:


<form data-babel-shield-ignore
      action="/search"
      method="get">
  <input type="search"
         name="q"
         placeholder="Search...">
  <button type="submit">Search</button>
</form>

Search forms, login forms, and other non-content forms are good candidates for exclusion.

Checking Initialization Status

Use the ready event to confirm Babel Shield is active and forms are protected:

BabelShield.once('ready', () => {
  const formHandler = BabelShield.getModule('form-handler');
  const formCount = formHandler ? formHandler.getFormCount() : 0;
  console.log(formCount + ' form(s) protected');
});

The init() call itself returns a result object you can check immediately:

BabelShield.init({
  apiToken: 'YOUR_API_TOKEN'
}).then((result) => {
  if (result.success) {
    // Initialization succeeded, form handler is loading
  }
  else if (result.failOpen) {
    // Initialization failed, but forms submit normally (fail-open mode)
    console.warn(result.message);
  }
  else {
    // Initialization failed, forms may be blocked
    console.error(result.message);
  }
});

Next Steps