Automatic rendering or attached mode

The script recognizes forms by an attribute set in your HTML:

data-rikochey-form="contact"

The value is the form's identifier, visible in the client's panel. The mode is not configured anywhere: it is inferred from the tag carrying the attribute.

Attached mode — you keep your own form

<form data-rikochey-form="contact">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Send</button>
</form>

The script writes nothing into your page: it intercepts the submission, validates the fields, solves the captcha and posts the request. Your design, your classes and your field order stay untouched.

The only constraint: the name attributes must match the field names defined in the panel. The client sees them on the website's page, in the Expected markup in attached mode section; they are also available in window.FORMS[].fields[].name.

A field that is sent but not declared is kept with the request, without being validated. A field that is declared but never received shows up in the panel's diagnostics: it is almost always a mismatched name.

Your labels stay yours, in the page's language. The messages the script displays — validation errors, confirmation — follow the language resolved for the form: see Languages. A consent field is a checkbox with value="1" and the field's name.

The privacy notice is yours to write. In automatic rendering, a form without a consent field shows a short notice under the submit button on how the visitor's data is used. In attached mode the script never adds it: when window.FORMS[].privacy_notice is not null, write that text under your own submit button, with the link to the privacy policy. The client finds it, ready to paste, in the Expected markup in attached mode section:

    <button type="submit">Send</button>
    <small>By submitting this form, you agree that your data will be used to process your request. <a href="https://www.example.com/privacy" target="_blank" rel="noopener noreferrer">Privacy policy</a></small>
</form>

See What the script publishes for the text and link rules.

Automatic rendering — the script builds the form

<div data-rikochey-form="contact"></div>

The script builds the fields, their validation, the button and, when there is one, the privacy notice inside the tag, in the language of the page when the form offers it. The appearance comes from the panel and is exposed as CSS variables, which you can override:

[data-rikochey-form] {
    --rk-form-accent: #1f6f5c;
    --rk-form-radius: 6px;
    --rk-form-font: inherit;
}

Labels inherit your page's colour, so the form blends into your design whatever its theme. Fields do not: their background is set (--rk-form-field-bg, white by default), so their text colour is set too (--rk-form-field-text). On a dark page, inherited text would be white on white. If you darken the field background, set the text colour with it.

injection_position (inside, before, after) and html_wrapper let the client adjust the placement and wrapping from their panel, without touching your page.

Several forms on one page

Each tag carries its own identifier. Two tags can point to the same form: both work, and the resulting requests are indistinguishable on the client's side.

Events

The script dispatches events on the form's tag, useful to trigger conversion tracking:

Both events bubble (bubbles) and are cancelable: calling preventDefault() in your listener stops the script from displaying its own message, so you can take over.

document.querySelector('[data-rikochey-form="contact"]')
    .addEventListener('rikochey:success', (event) => {
        // event.detail.lead_id, event.detail.message
        event.preventDefault(); // to display your own confirmation
    });