> ## Documentation Index
> Fetch the complete documentation index at: https://help.weavely.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# How to Style and Theme Forms in Weavely
> Learn how to customize form design using AI-powered styling and create reusable themes for your forms in Weavely.ai
{`{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://help.weavely.ai/features/theming",
"url": "https://help.weavely.ai/features/theming",
"name": "How to Style and Theme Forms in Weavely",
"description": "Learn how to customize form design using AI-powered styling and create reusable themes for your forms in Weavely.ai",
"inLanguage": "en",
"isPartOf": {
"@id": "https://help.weavely.ai/#website"
},
"publisher": {
"@id": "https://www.weavely.ai/#org"
}
},
{
"@type": "TechArticle",
"@id": "https://help.weavely.ai/features/theming#article",
"headline": "How to Style and Theme Forms in Weavely AI Form Builder",
"description": "Learn how to customize form design using AI-powered styling and create reusable themes for your forms in Weavely.ai",
"inLanguage": "en",
"author": {
"@id": "https://www.weavely.ai/#org"
},
"publisher": {
"@id": "https://www.weavely.ai/#org"
},
"mainEntityOfPage": {
"@id": "https://help.weavely.ai/features/theming"
}
},
{
"@type": "VideoObject",
"@id": "https://help.weavely.ai/features/theming#video",
"name": "How to Style & Theme Forms in Weavely AI Form Builder (Complete Tutorial)",
"description": "Learn how to style and theme your forms in Weavely, the AI-powered form builder! This complete tutorial covers everything from basic form styling to creating account-wide custom themes.",
"url": "https://youtu.be/q0STvqCxcVk",
"contentUrl": "https://youtu.be/q0STvqCxcVk",
"embedUrl": "https://www.youtube.com/embed/q0STvqCxcVk",
"duration": "PT4M48S",
"uploadDate": "2025-12-23T00:00:00Z",
"thumbnailUrl": [
"https://i.ytimg.com/vi/q0STvqCxcVk/hqdefault.jpg"
],
"publisher": {
"@id": "https://www.weavely.ai/#org"
},
"potentialAction": {
"@type": "WatchAction",
"target": "https://youtu.be/q0STvqCxcVk"
}
},
{
"@type": "WebSite",
"@id": "https://help.weavely.ai/#website",
"name": "Weavely Help Center",
"url": "https://help.weavely.ai",
"inLanguage": "en",
"publisher": {
"@id": "https://www.weavely.ai/#org"
}
},
{
"@type": "Organization",
"@id": "https://www.weavely.ai/#org",
"name": "Weavely",
"url": "https://www.weavely.ai"
}
]
}`}
Weavely gives you two ways to customize your form design: styling individual forms or creating reusable themes for your entire account. This guide covers both methods so you can build professional, branded forms efficiently.
## Method 1: Styling Individual Forms
### Using AI to Style Your Form
The fastest way to customize your form design is by asking Weavely's AI to apply styling for you.
**Custom Colors**
Simply describe the colors you want in the chat. For example:
* "Make all the buttons black"
* "Use #FF5733 as the primary color"
The AI will instantly apply your color choices to the form.
**Brand Styling**
You can ask Weavely to automatically style your form based on any brand. Type something like:
* "Make this look like Coca-Cola"
The AI will prompt you for the brand's domain to confirm, then automatically fetch the logo, brand colors, fonts, and even banner images where available.
### Manual Styling Options
For more control over your form design, use the manual styling panel in the form editor.
**Pre-made Templates**
Choose from a selection of ready-to-use design templates to quickly apply professional styling to your form.
**Colors**
Customize your color palette by setting:
* **Background** color
* **Primary** color (for buttons and key elements)
* **Secondary** color (for text)
**Typography**
Select fonts that match your brand from the typography settings.
**Layout Options**
Choose how your form appears:
* **No visual** - Form only, no background image
* **Visual on left** - Background image on the left side
* **Visual on right** - Background image on the right side
* **Transparent form** - Form overlays the background
**Background Visuals**
Set your form's background in three ways:
1. **Search Unsplash** - Type a keyword (e.g., "forest") and Weavely will find a matching image
2. **Solid color** - Use a plain color background
3. **Upload custom image** - Use your own branded imagery
### Advanced Styling Features
Click the **Advanced** button to access additional customization options:
**Custom CSS**
Add your own CSS code for complete control over styling.
**Input Fields**
Choose your input field style:
* Rounded inputs
* Underlined inputs
* Square inputs
**Buttons**
Customize button appearance:
* Rounded corners
* Square corners
* Toggle animations on/off
**Form Layout**
Fine-tune your form's appearance:
* Adjust form width
* Control spacing between fields
**Logo Settings**
Add your company logo to the form:
1. Toggle **Show logo** on
2. Upload your logo file
3. Set the logo size
## Method 2: Creating Account-Wide Themes
If you're building multiple forms, you'll want to avoid styling each one individually. Account-wide themes let you create a design once and reuse it across all your forms.
### Accessing Theme Settings
From your dashboard:
1. Click on **Themes** in the navigation
2. Select **Create new theme**
### Creating a Theme
**Import Brand Styling**
Just like with individual forms, you can import branding from any website:
1. Enter the brand's domain (e.g., "coca-cola.com")
2. Click **Import**
3. Weavely fetches the logo, colors, and fonts
**Customize Your Theme**
Adjust the imported styling or create a custom theme from scratch:
* Set primary, secondary, and background colors
* Choose typography
* Configure layout preferences
* Add your logo
**Important:** When editing a theme, you're only setting the visual style, not the form content. There's no way to add specific questions or pages in theme settings.
**Save Your Theme**
Give your theme a descriptive name (e.g., "Coca-Cola Theme" or "Company Brand") and save it.
### Setting a Default Theme
Once you've created themes, you can set which one is applied automatically to new forms:
1. Go to **Themes** in your dashboard
2. Find the theme you want to use as default
3. Click **Set as default**
Now every new form you create will automatically use this styling.
### Applying Themes to Forms
When creating or editing a form:
1. Open the styling panel
2. Look for the **Templates** section
3. Select any of your saved themes
The theme will be applied instantly to your form.
## Collaboration Notes
All team members have access to account-wide themes. Any theme created by one team member can be used by others in the same workspace.
## Best Practices
* **Use themes for consistency** - If you're creating multiple forms for the same brand, set up a theme once and reuse it
* **Test on different devices** - Preview your styled forms on both desktop and mobile to ensure they look good everywhere
* **Keep logos readable** - Make sure your logo size is appropriate for the form layout you've chosen
* **Brand import works best with official domains** - For accurate brand styling, use the company's main website URL
### Manual Styling Options
For more control over your form design, use the manual styling panel in the form editor.
**Pre-made Templates**
Choose from a selection of ready-to-use design templates to quickly apply professional styling to your form.
**Colors**
Customize your color palette by setting:
* **Background** color
* **Primary** color (for buttons and key elements)
* **Secondary** color (for text)
**Typography**
Select fonts that match your brand from the typography settings.
**Layout Options**
Choose how your form appears:
* **No visual** - Form only, no background image
* **Visual on left** - Background image on the left side
* **Visual on right** - Background image on the right side
* **Transparent form** - Form overlays the background
**Background Visuals**
Set your form's background in three ways:
1. **Search Unsplash** - Type a keyword (e.g., "forest") and Weavely will find a matching image
2. **Solid color** - Use a plain color background
3. **Upload custom image** - Use your own branded imagery
### Advanced Styling Features
Click the **Advanced** button to access additional customization options:
**Custom CSS**
Add your own CSS code for complete control over styling.
**Input Fields**
Choose your input field style:
* Rounded inputs
* Underlined inputs
* Square inputs
**Buttons**
Customize button appearance:
* Rounded corners
* Square corners
* Toggle animations on/off
**Form Layout**
Fine-tune your form's appearance:
* Adjust form width
* Control spacing between fields
**Logo Settings**
Add your company logo to the form:
1. Toggle **Show logo** on
2. Upload your logo file
3. Set the logo size
## Method 2: Creating Account-Wide Themes
If you're building multiple forms, you'll want to avoid styling each one individually. Account-wide themes let you create a design once and reuse it across all your forms.
### Accessing Theme Settings
From your dashboard:
1. Click on **Themes** in the navigation
2. Select **Create new theme**
### Creating a Theme
**Import Brand Styling**
Just like with individual forms, you can import branding from any website:
1. Enter the brand's domain (e.g., "coca-cola.com")
2. Click **Import**
3. Weavely fetches the logo, colors, and fonts
**Customize Your Theme**
Adjust the imported styling or create a custom theme from scratch:
* Set primary, secondary, and background colors
* Choose typography
* Configure layout preferences
* Add your logo
Once you've created themes, you can set which one is applied automatically to new forms:
1. Go to **Themes** in your dashboard
2. Find the theme you want to use as default
3. Click **Set as default**
Now every new form you create will automatically use this styling.
### Applying Themes to Forms
When creating or editing a form:
1. Open the styling panel
2. Look for the **Templates** section
3. Select any of your saved themes
The theme will be applied instantly to your form.
## Collaboration Notes