We’re excited to announce a powerful new customization option for contact forms: HTML injection into the <head> tag. This new feature gives you complete control to customize the styling, layout, and behavior of your contact forms.

🚀 What’s New?

You can now inject custom HTML content into the <head> of your form, which means you can, for example:

  • Modify placeholder text or labels via JavaScript

  • Inject CSS to match your brand

  • Add accessibility metadata or custom fonts

  • Insert headings, scripts, or meta tags

Whether you're a developer looking for deeper control or a power user wanting brand alignment, this update opens up vast flexibility.

✨ What You Can Do

Here are a few examples of how you can use this feature:

✅ Example 1: Change Placeholder Text via JavaScript

<script>
  window.onload = function() {
    const emailInput = document.querySelector('input[name="email"]');
    if (emailInput) {
      emailInput.placeholder = "Enter your business email";
    }
  };
</script>

🎨 Example 2: Add Custom Styling

<style>
  body {
    background-color: #f9f9f9;
  }
  .form-control {
    border-radius: 8px;
    border-color: #0075FF;
  }
</style>

📜 Example 3: Add a Legal Disclaimer Below the Form

<script>
  window.onload = function() {
    const form = document.querySelector('.ghc-contact-form');
    if (form) {
      const disclaimer = document.createElement('p');
      disclaimer.textContent = "By submitting this form, you agree to our terms of service and privacy policy.";
      disclaimer.style.fontSize = "12px";
      disclaimer.style.color = "#6A6A6A";
      disclaimer.style.marginTop = "1em";
      disclaimer.style.textAlign = "center";
      form.appendChild(disclaimer);
    }
  };
</script>

🌍 Example 4: Add Google Fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

📌 How It Works

Go to: Settings > Channels > Contact form > choose your contact form > Customization > Add extra HTML

You simply paste your desired HTML snippet into the HTML customization field in the Noticeable interface. The code you enter will be injected into the <head> of the contact form page, so it executes or applies before the form renders.

This means styles, fonts, or scripts will all be active immediately—giving you total freedom over the user experience.

Start customizing today and create a form experience that’s as unique as your brand!

If you have questions or ideas for enhancements, we’re here to help.

Happy building!