Formbutton

Formbutton is an embeddable popup contact form. You add a single <script> tag to any page and it injects a floating button into the corner of the window. When a visitor clicks it, a compact contact panel opens in the corner (it does not cover the page), and submissions land straight in your Formward dashboard. There is no build step, no framework, and no dependencies, and the whole widget is configured with data-* attributes on the script tag.

Getting started

Drop this near the end of your <body> and swap in your own form ID:

<script src="https://app.formward.eu/formbutton.js"
  data-form-id="your-form-id"
  data-button-text="Contact us"
  data-color="#00C871"></script>

data-form-id is the only attribute you need. The script builds the submission endpoint from it as {script-origin}/f/{id}, so the form posts back to the same origin the script is served from. If neither data-form-id nor data-endpoint is present, the widget logs a warning and does not render.

The script attributes

Every option is a data-* attribute on the script tag. All are optional except that you must provide either data-form-id or data-endpoint.

Attribute	Default	Meaning
data-form-id	—	Your Formward form ID. Required unless `data-endpoint` is set. The endpoint becomes `{origin}/f/{id}`.
data-endpoint	derived from `data-form-id`	Full POST URL. Overrides `data-form-id` when set, letting you post to any endpoint.
data-button-text	`Contact`	Label on the floating button. Also used as the modal title.
data-color	`#00C871`	Button and submit colour. Hex or `rgb()`. Text colour (black or white) is chosen automatically for contrast.
data-style	`pill`	Button design: `pill`, `circle`, `tab`, or `bar`. An unknown value falls back to `pill`.
data-fields	`name,email,message`	Comma-separated list of fields to render in the form, in order.

Button styles

Set data-style to one of four designs for the floating trigger. An unrecognised value falls back to pill.

pill (default) — a rounded button in the bottom-right corner showing an icon and the button text side by side.
bar — the same bottom-right button with a softer, rectangular corner radius instead of a full pill.
circle — an icon-only round floating action button. The button text becomes the accessible aria-label.
tab — a vertical tab pinned to the middle of the right edge, showing the button text rotated. No icon, since it does not read well rotated.

Fields

data-fields takes a comma-separated list of field names, rendered top to bottom in the order you list them. The default is name,email,message. Each known name gets a sensible label, input type, and placeholder automatically:

name — text input.
email — type="email" input.
message — rendered as a multi-line <textarea> rather than a single-line input.
subject — text input.
phone — type="tel" input.
company — text input.

<script src="https://app.formward.eu/formbutton.js"
  data-form-id="your-form-id"
  data-fields="name,email,phone,message"></script>

Field labels are derived by capitalising the field name, and placeholders are filled in for the known names above. Any field whose name is not in the known list still renders as a plain text input.

Accessibility & responsiveness

Honeypot. A hidden _gotcha field is built into every form. It is positioned off-screen and marked aria-hidden, so real users never see it. If a bot fills it in, Formward silently marks the submission as spam. You do not need to add it yourself.
Focus management. The panel opens with role="dialog", moves focus to the first field, closes on Escape, the close button, or clicking the trigger again, and returns focus to the trigger when it closes. The trigger has aria-haspopup="dialog" and toggles aria-expanded.
Mobile. The panel stays anchored in the corner and becomes a near-full-width card on small screens, scrolling inside itself rather than covering the whole page.

Customizing

Use data-color to match your brand. It accepts any hex or rgb() colour and is applied to both the floating button and the submit button. You never set the text colour: Formbutton computes the WCAG relative luminance of your colour and automatically picks near-black or white text, whichever has the higher contrast. The default brand green #00C871 is bright, so it correctly gets dark text.

<script src="https://app.formward.eu/formbutton.js"
  data-form-id="your-form-id"
  data-color="#1d4ed8"
  data-style="circle"></script>

To preview combinations of colour, style, button text, and fields before you ship, open the Formbutton builder, which renders a working widget live and generates the embed snippet for you.

Submit behavior

On submit, the form posts its fields as multipart/form-data (a FormData body) to the endpoint, with an Accept: application/json header. While the request is in flight the submit button is disabled and shows Sending….

Success. On a 2xx response the form is replaced in place by a green checkmark panel reading Message sent.
Error. On any non-OK response or a network failure, an inline error message appears and the submit button is re-enabled so the visitor can retry.

Every form carries a small Powered by Formward footer linking back to formward.eu.