# ปรับแต่งวิดเจ็ตฟอร์มการสมัครสมาชิก

โดยค่าเริ่มต้น วิดเจ็ตฟอร์มการสมัครสมาชิกจะใช้สไตล์ที่เป็นกลางซึ่งใช้งานได้กับหน้าเว็บส่วนใหญ่ หลังจากที่คุณเพิ่ม [โค้ดฝัง](/th/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site) แล้ว คุณสามารถปรับให้เข้ากับเอกลักษณ์ทางภาพของเว็บไซต์ของคุณได้โดยการตั้งค่าคุณสมบัติที่กำหนดเองของ CSS บนองค์ประกอบ pushwoosh-subscribe-widget ค่าในตารางด้านล่างจะแทนที่ค่าเริ่มต้น

<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">

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

</TabItem>
</Tabs>