📋Customizing Design

Once your form is saved, you can customize how it looks and add advanced behavior — including your own analytics, custom CSS for embed sizing, or JavaScript that pre-fills known visitors.

To open the customization editor:

1. Go to Forms & Pages → Forms.

2. Click the three dots (⋮) or gear icon on the right of any form in the list.

3. Click Customize Design.

The editor has three sections: Form Design, CSS, and Tracking Codes.

---

Form Design

Visual customization. Add a background image, change the background/form/border/text colors, or add a logo.

For anything the visual editor doesn't cover, use the CSS section below.

---

CSS

Paste any custom CSS to further style your form. Common uses:

• Resize an embedded form or popup — target the form container to control width, height, padding, and margins.

• Match your site's typography — override the default font family, weight, and sizes.

• Style a specific field — target individual field wrappers by class.

Example: resize a form embedded on your homepage

.gleantap-form-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
}

Example: override font

.gleantap-form-wrapper,
.gleantap-form-wrapper input,
.gleantap-form-wrapper button {
  font-family: 'Inter', -apple-system, sans-serif;
}

Save the form after any CSS change. It applies to every place the form is loaded — embed, standalone URL, and inside Pages.

---

Tracking Codes

Three separate boxes let you inject scripts at different points:

Box	Fires	Common uses
Head	Loaded in the <head> when the form renders	Google Analytics setup, Meta Pixel init, other analytics tags
Body	Loaded at the bottom of <body> when the form renders	Chat widgets, additional scripts, custom logic that needs the form DOM
Form Submission	Fires when the visitor submits the form	Conversion events (GA event, Meta Pixel Lead event, Google Ads conversion)

Example: Google Analytics 4 tracking

In the Head box:

<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Replace G-XXXXXXXXXX with your GA4 Measurement ID.

In the Form Submission box — fire a conversion event when someone submits:

<script>
  gtag('event', 'form_submission', {
    'form_name': 'lead_capture',
    'value': 1
  });
</script>

Example: Meta Pixel

In the Head box:

<!-- Meta Pixel -->
<script>
  !function(f,b,e,v,n,t,s){/* standard Meta Pixel init snippet */}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

In the Form Submission box:

<script>fbq('track', 'Lead');</script>

Example: pre-filling known visitors (autofill)

Gleantap doesn't automatically pre-fill fields for return visitors. If you want that behavior — e.g., for a QR code that a member scans repeatedly and you want their name and email pre-populated — you can add JavaScript in the Body box to detect a returning visitor and pre-fill fields.

Two common patterns:

Pattern 1 — pre-fill from URL parameters. Link to your form with query params like ?first_name=Alex&email=[e-mail] (useful when you send a personalized link via email or SMS with merge tags).

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const params = new URLSearchParams(window.location.search);
    ['first_name', 'last_name', 'email', 'phone'].forEach(name => {
      const value = params.get(name);
      if (!value) return;
      const field = document.querySelector(`input[name="${name}"]`);
      if (field) field.value = value;
    });
  });
</script>

Pattern 2 — pre-fill from localStorage. Store what the visitor entered on their first submission; auto-fill next time on the same device.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const stored = JSON.parse(localStorage.getItem('gleantap_form_prefill') || '{}');
    Object.entries(stored).forEach(([name, value]) => {
      const field = document.querySelector(`input[name="${name}"]`);
      if (field) field.value = value;
    });
    document.querySelector('form').addEventListener('submit', function() {
      const data = {};
      this.querySelectorAll('input[name]').forEach(f => data[f.name] = f.value);
      localStorage.setItem('gleantap_form_prefill', JSON.stringify(data));
    });
  });
</script>

If you're not comfortable writing this yourself, email [e-mail] — we can help set it up.

---

UTM parameters are captured automatically

You don't need custom code for UTM tracking. When a form loads with ?utm_source=, ?utm_medium=, or ?utm_campaign= in the URL, Gleantap automatically stores those values on the resulting contact — they show up in the contact's Source field.

This means you can:

• Link to the same form from multiple ad campaigns with different UTM values, and see which ad drove which lead.

• Segment new contacts by acquisition source in Audience → Segments.

• Report on lead volume by source in your dashboards.

No configuration needed. If a form URL is https://your.site/form?utm_source=facebook&utm_campaign=summer_promo, the new contact's Source becomes facebook and the full UTM string is preserved for reporting.

---

Where custom code applies

Your customizations (design, CSS, tracking code) apply everywhere the form loads:

• Standalone form URL — the direct link to the hosted form

• Embedded form — when embedded via the embed code on your website

• Advanced Form block inside Pages — the same form embedded in a Gleantap landing page

You only need to configure the customization once per form. Save the form after your changes.

---

Related pages

• Creating a Form

• Embedding Forms

• Adding Forms to Pages

• Trigger Flows or Campaigns

• Notifications