# सब्सक्रिप्शन फ़ॉर्म विजेट को कस्टमाइज़ करें

डिफ़ॉल्ट रूप से, सब्सक्रिप्शन फ़ॉर्म विजेट एक न्यूट्रल स्टाइल का उपयोग करता है जो अधिकांश पेजों पर काम करता है। [एम्बेड कोड](/hi/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site) जोड़ने के बाद, आप `pushwoosh-subscribe-widget` एलिमेंट पर CSS कस्टम प्रॉपर्टीज़ सेट करके इसे अपनी साइट की विज़ुअल पहचान से मिला सकते हैं। नीचे दी गई तालिकाओं में दिए गए मान डिफ़ॉल्ट को बदल देते हैं।

<Aside type="caution" icon="setting" title="डेवलपर सहायता की आवश्यकता है">
आपको अपनी वेबसाइट पर इन विजेट स्टाइल परिवर्तनों को लागू करने के लिए अपनी डेवलपमेंट टीम से सहायता की आवश्यकता हो सकती है।
</Aside>

## रंग कस्टमाइज़ करें

| वेरिएबल | विवरण | डिफ़ॉल्ट |
| --- | --- | --- |
| `--esw-primary-color` | बटन, लिंक और एक्सेंट के लिए प्राथमिक रंग | `#0E72E5` |
| `--esw-primary-hover` | प्राथमिक तत्वों का होवर रंग | `#1A85FF` |
| `--esw-text-color` | मुख्य टेक्स्ट का रंग | `#4B5057` |
| `--esw-text-secondary` | द्वितीयक टेक्स्ट (प्लेसहोल्डर, कैप्शन) | `#969CA3` |
| `--esw-background` | विजेट का बैकग्राउंड | `#FFFFFF` |
| `--esw-surface-color` | सतह का रंग (होवर, द्वितीयक बैकग्राउंड) | `#F7F9FA` |
| `--esw-border-color` | बॉर्डर का रंग | `#DCE1E5` |
| `--esw-border-color-focus` | फ़ोकस स्थिति में बॉर्डर का रंग | `#0E72E5` |
| `--esw-error-color` | त्रुटि का रंग | `#E52E59` |
| `--esw-success-color` | सफलता का रंग | `#479900` |
| `--esw-success-bg` | सफलता संदेश का बैकग्राउंड | `#F7F9FA` |

## टाइपोग्राफी

| वेरिएबल | विवरण | डिफ़ॉल्ट |
| --- | --- | --- |
| `--esw-font-family` | फ़ॉन्ट परिवार | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | बेस फ़ॉन्ट आकार | `14px` |
| `--esw-font-size-title` | शीर्षक फ़ॉन्ट आकार | `18px` |
| `--esw-font-size-label` | फ़ील्ड लेबल फ़ॉन्ट आकार | `12px` |
| `--esw-font-size-small` | छोटा टेक्स्ट (त्रुटियाँ, नोट्स) | `12px` |
| `--esw-font-weight-regular` | नियमित वज़न | `400` |
| `--esw-font-weight-medium` | मध्यम वज़न | `500` |
| `--esw-font-weight-bold` | बोल्ड वज़न | `700` |
| `--esw-line-height-base` | बेस लाइन की ऊँचाई | `1.4` |
| `--esw-line-height-title` | शीर्षक लाइन की ऊँचाई | `1.2` |

## आकार और स्पेसिंग

| वेरिएबल | विवरण | डिफ़ॉल्ट |
| --- | --- | --- |
| `--esw-input-height` | इनपुट फ़ील्ड की ऊँचाई | `36px` |
| `--esw-button-height` | बटन की ऊँचाई | `36px` |
| `--esw-spacing-xs` | अतिरिक्त छोटी स्पेसिंग | `4px` |
| `--esw-spacing-sm` | छोटी स्पेसिंग | `8px` |
| `--esw-spacing-md` | मध्यम स्पेसिंग | `16px` |
| `--esw-spacing-lg` | बड़ी स्पेसिंग | `24px` |
| `--esw-popup-width` | मोडल की चौड़ाई | `380px` |
| `--esw-popup-max-width` | मोडल की अधिकतम चौड़ाई | `90vw` |

## दिखावट

| वेरिएबल | विवरण | डिफ़ॉल्ट |
| --- | --- | --- |
| `--esw-border-radius` | तत्वों के लिए कॉर्नर रेडियस | `4px` |
| `--esw-border-radius-popup` | मोडल कॉर्नर रेडियस | `8px` |
| `--esw-shadow-popup` | मोडल बॉक्स शैडो | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## उदाहरण

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Style attribute">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>