← All Guides

HTML Forms

Add a contact form to any HTML website with a single script tag. No server code, no backend setup.

2 minutes Beginner friendly

Prerequisites

  • A codaForms account (sign up free)
  • An HTML website where you can add a script tag

Step 1: Create a Form

Log in to your codaForms dashboard and create a new form. Use the drag-and-drop builder to add fields like name, email, and message.

Step 2: Copy the Embed Code

After saving your form, you'll see an embed code that looks like this: 

<script src="https://codasite.ai/forms-embed.js" data-form="cf_xxxxx"></script>

Step 3: Add to Your Website

Paste the script tag anywhere in your HTML where you want the form to appear: 

<!DOCTYPE html>
<html>
<head>
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Us</h1>

  <!-- Your codaForms form -->
  <script src="https://codasite.ai/forms-embed.js" data-form="cf_xxxxx"></script>

</body>
</html>

That's it! The form will automatically render with styling that matches light or dark mode.

Optional: Customize the Theme

Force light or dark mode with the data-theme attribute: 

<!-- Force dark mode -->
<script src="https://codasite.ai/forms-embed.js" data-form="cf_xxxxx" data-theme="dark"></script>

<!-- Force light mode -->
<script src="https://codasite.ai/forms-embed.js" data-form="cf_xxxxx" data-theme="light"></script>

Optional: Use a Container

Place the form inside a specific element using data-container: 

<div id="contact-form"></div>

<script
  src="https://codasite.ai/forms-embed.js"
  data-form="cf_xxxxx"
  data-container="contact-form">
</script>

What Happens Next?

When someone submits the form:

  1. You receive an email notification with the submission data
  2. The submission appears in your codaForms dashboard
  3. If configured, a webhook sends data to your external services
  4. The user sees a success message

Ready to get started?

Create your first form in under 2 minutes.

Create Free Account