> For the complete documentation index, see [llms.txt](https://help.gleantap.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.gleantap.com/forms/customizing-design.md).
# 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**
```css
.gleantap-form-wrapper {
max-width: 480px;
margin: 0 auto;
padding: 24px;
}
```
**Example: override font**
```css
.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 `` when the form renders | Google Analytics setup, Meta Pixel init, other analytics tags |
| **Body** | Loaded at the bottom of `` 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:**
```html
```
Replace `G-XXXXXXXXXX` with your GA4 Measurement ID.
**In the Form Submission box** — fire a conversion event when someone submits:
```html
```
### Example: Meta Pixel
**In the Head box:**
```html
```
**In the Form Submission box:**
```html
```
### 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=alex@example.com` (useful when you send a personalized link via email or SMS with merge tags).
```html
```
**Pattern 2 — pre-fill from localStorage.** Store what the visitor entered on their first submission; auto-fill next time on the same device.
```html
```
If you're not comfortable writing this yourself, email — 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](/forms/creating-a-form.md)
* [Embedding Forms](/forms/embedding-forms.md)
* [Adding Forms to Pages](/pages/adding-forms-to-pages.md)
* [Trigger Flows or Campaigns](/forms/trigger-flows-or-campaigns.md)
* [Notifications](/forms/notifications.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.gleantap.com/forms/customizing-design.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
