# Styling hooks

The names to select in your own CSS, for a form on your page and for a form shown in a frame.

A form can be on your website in two ways, and each has its own markup, so each is styled in its own way.

| | You write the markup | Where the styles live |
| --- | --- | --- |
| **A plain HTML form** (`<form data-ivf>`) | Yes | Your site's CSS |
| **A form in a frame** (`<div data-ivf-form>`) | No, it is InvoyForm's page | The form's own design |

Every name below starts with `ivf`. These names are the ones to select: they do not change, unlike the look of the form underneath.

## A plain HTML form

Add `data-ivf` to your `<form>` and set its `action` to the address from the **Share** tab. The script sends the form for you and shows the messages. You keep your own markup, so your own CSS styles all of it.

```html
<form data-ivf action="https://form.invoy.in/f/your-form" method="post">
  <input name="email" type="email" required />
  <button type="submit">Send</button>
</form>
<script src="https://form.invoy.in/v1/embed.js" defer></script>
```

### What the script adds

When a field has a problem, the script puts a message after it. The message is an element with the class `ivf-error` and the attribute `data-ivf-field="email"` (the field's name). When the form is sent it shows `ivf-success`, and a message about the whole form is a `data-ivf-form-message` element.

The script's own look is small (a red note) and is written so that **any rule of yours wins**, with no `!important`:

```css
.ivf-error {
  color: #7c3aed;
  font-weight: 600;
}
```

### Put a message where you want it

To place a message yourself, add an element with the name of the field. The script fills it and shows it, and does not add its own.

```html
<input name="email" type="email" />
<p data-ivf-error="email" hidden></p>
```

| Attribute | Where the message goes |
| --- | --- |
| `data-ivf-error="field"` | The problem with that field |
| `data-ivf-form-error` | A problem with the whole form (for example no connection) |
| `data-ivf-success` | What to show after the form is sent (the form is hidden) |

Put `data-ivf-success` outside the form, under the same parent. The script hides the form after a send and then shows this element, so one inside the form would be hidden with it. If several forms are on one page, give each form and its message a wrapper of its own: forms that share a parent cannot tell whose message it is, and the script says so in the console.

### The state of the form

The form carries `data-ivf-state`: `idle`, `submitting`, `success` or `error`. Use it to style a busy form.

```css
form[data-ivf-state="submitting"] button {
  opacity: 0.6;
}
```

While it is `submitting`, the submit buttons are disabled.

### After a send

`data-ivf-redirect="https://example.com/thanks"` on the form sends the person to an `http` or `https` address after it is sent. Without it, the form's own setting in InvoyForm is used, and without that the form is hidden and a short thanks is shown.

The short thanks is the form's own message when its owner wrote one in **Settings** (a paid plan feature), and a plain "Thanks, your response was received." when not. An element of yours with `data-ivf-success` always wins over both.

## A form in a frame

`<div data-ivf-form="your-form"></div>` shows the form's page in a frame as tall as the form. The page is InvoyForm's, so your site's CSS does not reach into it. This is also why nothing on your site can break it.

The frame accepts `data-ivf-title` (the frame's title, for screen readers). The form must allow your website in its **Settings**, and be published.

### The names on the form's page

These are on the form's page itself, for the design of the form:

| Attribute | The element |
| --- | --- |
| `data-ivf-card` | The card the form sits in |
| `data-ivf-question="id"` | One question, with its label, input and message |
| `data-ivf-label` | A question's label |
| `data-ivf-error="field"` | The problem with that question, with the field's name, as in a plain HTML form |
| `data-ivf-form-error` | A problem with the whole form |
| `data-ivf-submit` | The submit button |
| `data-ivf-status` | The screen after sending ("Thank you"), and the screens for a form that is not available |

`data-ivf-error` is the message about a field in both: your own place for it in a plain HTML form, and the message itself on the form's page. A message the script adds on its own in a plain HTML form is `.ivf-error` with `data-ivf-field`, so to style every field message in both, select both:

```css
.ivf-error,
[data-ivf-error] {
  color: #7c3aed;
}
```

A rule of yours wins over the form's own styles when it is not inside a CSS `@layer`.

## Names, in short

| Name | A plain HTML form | The form's page |
| --- | --- | --- |
| `data-ivf` | Turns the form on | |
| `data-ivf-error="field"` | Your place for a field's message | The field's message |
| `data-ivf-form-error` | Your place for the form's message | The form's message |
| `data-ivf-success` | Your place for the thanks | |
| `data-ivf-state` | The form's state | |
| `data-ivf-redirect` | Where to go after a send | |
| `data-ivf-card`, `-question`, `-label`, `-submit`, `-status` | | The parts of the page |

`data-ivf-form` is on neither: it goes on your own page, on the element that holds the frame.