# Create and embed a subscription form

Pushwoosh gives you the flexibility to create subscription forms for different signup scenarios, customize the fields you collect, and display the form as a modal or inline widget on your website.

## How to build a form

To create a new subscription form:

1. Go to **Audience → Subscription forms**.
2. Click **Create form**.

<img src="/subscription-forms-1.webp" alt="Subscription forms page with Double Opt-In and Subscription forms cards, How to use link, and Create form button"/>  
3. Configure the form. A live preview appears on the right and updates as you change settings. 

### Configure general settings

Configure the following fields.

> **All fields in this section are required.**

- **Internal form name:** used only inside Pushwoosh, not shown to subscribers. Example: "Newsletter signup".
- **Display type:** choose how the form appears on your site:
  - **Modal popup:** a popup overlay that appears on top of the page when the **Trigger** you set fires, for example **Immediately** or after a few seconds (see [Set modal popup timing](#set-modal-popup-timing)). Good for newsletter signups or promotional offers that you want visitors to notice.
  - **Embedded inline:** the form sits inside your page content (e.g. in a sidebar or at the bottom of an article). Visitors see it as part of the page layout, not as a separate popup.
- **Privacy policy URL:** the form shows a consent checkbox ("I agree to the Privacy Policy") that links to this URL. Example: `https://example.com/policy`.


<img src="/subscription-forms-2.webp" alt="Create Subscription form interface with Internal form name, Display type, Privacy policy URL, and form fields configuration"/>


#### Set modal popup timing

For **Modal popup** only:

1. Define when the popup appears on the page. In the **Trigger** dropdown select:
  - **Immediately** (default)
  - After 3 seconds
  - After 5 seconds
  - After 10 seconds
2. In the **Frequency** dropdown select how often each visitor sees the popup:
  - **Once per visitor** (default): once per device
  - **Once per session**: once per browser session
  - **Always**: every time they visit the page

<img src="/subscription-forms-3.webp" alt="Create Subscription form with Modal popup display type, Trigger and Frequency dropdowns, and Add field buttons"/> 

### Configure form fields

Each form includes an **Email** field by default (it cannot be removed). You can add up to four more fields, for a total of five. 

Click **+ First name**, **+ Last name**, **+ Phone number**, or **+ Custom field** to add them. 

<Aside type="note">
Values from these built-in fields are saved to standard tags:  `first_name`, `last_name`, and `phone`. Custom fields save their values to the tags you select in the **Linked tag** setting.
</Aside>

For each field, check **Required** if the visitor must fill it in (required fields show an asterisk `*`). Use the trash icon to remove a field.

<img src="/subscription-forms-4.webp" alt="Form fields list with Email, First name, Phone number, Last name, City and field configuration for selected field"/>

#### Create a custom field

1. Click **+ Custom field** in the field list.
2. Under **Linked tag**, choose the Pushwoosh tag that will store the value submitted from this field (for example `birthday`). You need to create the tag in advance.
3. Set **Field label**: the text visitors see next to the input (for example `Date of birth`).
4. Optionally set **Placeholder (optional)**: hint text inside the empty field (for example `MM/DD/YYYY`).
5. Turn **Required** on or off. 

<img src="/subscription-forms-7.webp" alt="Custom field configuration with Linked tag, Field label, Placeholder, and Required checkbox"/>

### Customize form labels

By default, all form text is in English. To translate the form into another language or change any wording, click **Customize labels** below the live preview.

<img src="/subscription-forms-16.webp" alt="Customize form labels dialog with Heading, Button, Privacy Policy Text, Privacy Policy Link Text, Success Message, Double Opt In Message, Email Label, and Email Placeholder fields"/>

In the **Customize form labels** dialog, you can edit:

- **Heading**
- **Button**
- **Privacy Policy Text**
- **Privacy Policy Link Text**
- **Success Message**
- **Double Opt In Message** (applies only if double opt-in is enabled)
- **Label** and optional **Placeholder** for each form field

Click **Save** to apply your changes. They appear immediately in the live preview. The published form updates after you save or publish the subscription form.

### Preview and save the form

A live preview appears on the right side of the Create Subscription form interface and updates as you change settings. Use **Reset preview** below the preview to restore the default preview state.

<Aside type="note">
Test submissions from **Preview** do not create subscribers in your project.
</Aside>

<img src="/subscription-forms-5.webp" alt="Create Subscription form with live preview on the right, Reset preview, and Create button in the top right"/>

When you finish configuring the form, click **Create** in the top right corner.

### Copy the embed code and add it to your site

<Aside type="caution" icon="setting" title="Developer assistance needed">
You will need assistance from your development team to add the embed code to your website.
</Aside>

A dialog opens with the embed code for your form. Click **Copy code** to copy the snippet to the clipboard.

<img src="/subscription-forms-11.webp" alt="Modal form code dialog with script snippet, instruction to paste before closing body tag, and Copy code button"/>

#### Where to paste the embed code on your website

Add the script to the page HTML where it should run.

- For **Modal popup**, placing the script before the closing `</body>` tag is the usual approach.

- For **Embedded inline**, put the snippet in the exact place in your markup where you want the form block to appear.

<Aside type="tip" title="Customize the widget with CSS">
You can override default styling (colors, typography, spacing, and the modal) on your site by setting CSS custom properties on the `pushwoosh-subscribe-widget` element. [Learn more](/product/audience-data-and-segmentation/subscription-forms/customize-widget/).
</Aside>

### How different display types look on your website

These examples show how each form type can appear on a live page. Field labels and required markers match what you configure in the form builder.

<Tabs>
<TabItem label="Modal popup">

<img src="/subscription-forms-14.webp" alt="Modal newsletter signup overlay on a webpage with email, name, phone fields, privacy policy checkbox, and Subscribe"/>

</TabItem>
<TabItem label="Embedded inline">

<img src="/subscription-forms-15.webp" alt="Inline newsletter signup form in page body with email, name, phone fields, privacy checkbox, and Subscribe button"/>

</TabItem>
</Tabs>

## Next steps

- [Enable double opt-in](/product/audience-data-and-segmentation/subscription-forms/double-opt-in/) to require email confirmation before subscribers are added
- [Customize the subscription form widget](/product/audience-data-and-segmentation/subscription-forms/customize-widget/) to match the form to your website
- [Review form performance and export subscribers](/product/audience-data-and-segmentation/subscription-forms/form-analytics-and-export/) to track results and download subscriber data