Success & error 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:

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

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

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);
});