Styling hooks

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.

<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:

.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.

<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.

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:

.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.