# Success & error messages

> Control what visitors see after they submit: the hosted page, an inline message, or your own UI.

Source: https://docs.formclick.io/html-forms/success-messages

What the visitor sees after pressing Send depends on how the form is submitted.

## Plain HTML form

Without JavaScript, the browser navigates to a clean Formclick confirmation page that shows your success message and a **Go back** link to the page the visitor came from. Errors use the same page with the reason.

## Inline messages with formclick.min.js

With `formclick.min.js` the page never reloads. The submit button is disabled while sending, then a message appears at the end of the form. Set your own text with `data-success-msg`:

_Animation: with formclick.min.js the form submits in the background, the button shows "Sending…", then an inline success message appears and the form resets._

```html
<form action="https://api.formclick.io/submit" method="POST"
      data-success-msg="Thanks! We'll reply within one business day.">
  ...
</form>
<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

The message text is chosen in this order: the form’s `data-success-msg`, then the form’s default success message (“Thank you! Your message has been received.”, which can be changed with the MCP `update_form_settings` tool). Error messages come from the server, e.g. “Too many submissions. Please try again later.”

## Styling the messages

The script adds a `div.fc-form-msg` inside the form, with `fc-msg-success` or `fc-msg-error`. The submit button gets `fc-btn-loading` while sending. Override them with your own CSS:

```html
<style>
  .fc-form-msg   { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
  .fc-msg-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .fc-msg-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  button.fc-btn-loading { opacity: .7; cursor: wait; }
</style>
```

## Your own UI

To show a modal, confetti or anything else, listen for the `fc:success` and `fc:error` events, or skip the script and use [fetch](https://docs.formclick.io/html-forms/javascript-fetch).

```js
const form = document.querySelector('#contact');

form.addEventListener('fc:success', (e) => {
  console.log('Saved!', e.detail);       // { success: true, message: "…" }
  showThankYouModal();
});

form.addEventListener('fc:error', (e) => {
  console.error('Failed:', e.detail.message);
});
```