> ## Documentation Index
> Fetch the complete documentation index at: https://help.privy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create an Embedded Form

> Create a sign up form that you can embed directly into your website design.

An Embedded Form is a sign up for that is fixed directly or "embedded" onto the page of your website, unlike displays such as popups, flyouts, or Spin To Wins which associated with a display animation (i.e., sliding in or popping up) and trigger based on audience targeting conditions. Embedded Forms are perfect for website footers, or web pages where you consistently want an opportunity for visitors to sign up for your email list.

## Create a new Embedded Form

To create a new Embedded Form:

* Navigate to [Displays](https://dashboard.privy.com/displays).
* Click **Create new display**. This will open our Templates page.
* Our Embedded Forms need to be built using our Classic display builder, so navigate to this builder by selecting the **Get started** option in the lower left corner of your screen.
* Name your display in the following prompt, specify whether you want to collect email, phone, or both, and select **Create display**.

<video autoPlay muted loop playsInline className="new-embed-form" src="https://mintcdn.com/privy/gNYzweeSu_YfVjYU/new-images/displays/ef-create-new.mp4?fit=max&auto=format&n=gNYzweeSu_YfVjYU&q=85&s=0f2dcca2e4566c43681d1c2e61037c1d" data-path="new-images/displays/ef-create-new.mp4" />

* In the *Create* step of the Classic display builder, you can click to edit:

  * **Form Fields:** what information you want to collect at sign up.
  * **Compliance:** whether you want new sign ups to go through a Single Opt-In or Double Opt-In process.
  * **Validations:** set any rules to restrict who may sign up for your display.

  <img height="200" alt="Screenshot showing the form fields and validation settings for a legacy display" src="https://mintcdn.com/privy/soCpR44lUIpPYTY_/images/displays/legacy-form-fields.png?fit=max&auto=format&n=soCpR44lUIpPYTY_&q=85&s=b34fa9edadb4c2832cdbf49d99a5df84" data-path="images/displays/legacy-form-fields.png" />
* Click to **Add a display**.
* On the following screen, select **Embedded Form** from the left side. Browse the templates and choose which one you’d like to start with. Press **Choose selected** in the upper right corner to open the designer.

<video autoPlay muted loop playsInline className="embed form add display" src="https://mintcdn.com/privy/gNYzweeSu_YfVjYU/new-images/displays/ef-add-display.mp4?fit=max&auto=format&n=gNYzweeSu_YfVjYU&q=85&s=79093f1b93c1779d6b0506d43203cfab" data-path="new-images/displays/ef-add-display.mp4" />

## Customize your Embedded Form

Now that you’ve selected a template to start from, it’s time to customize your display’s appearance.

<video autoPlay muted loop playsInline className="customize embed form" src="https://mintcdn.com/privy/gNYzweeSu_YfVjYU/new-images/displays/ef-customize.mp4?fit=max&auto=format&n=gNYzweeSu_YfVjYU&q=85&s=5cbf181df06fca07dddb3ea84eca66c8" data-path="new-images/displays/ef-customize.mp4" />

<Tip>
  With Embedded Forms, most people prefer to keep the design minimal in Privy so that it fits in with their site's theme.
</Tip>

### Add new elements

To add a text box, click **+ Add new element** on the left.

### Edit existing elements

To edit existing elements, click directly on them in your display. You can edit their settings, duplicate, or delete the element on the left.

Under your *Elements* on the left, you can drag your elements to reorder them and edit your form’s background.

Once you're happy with your design, press **Save & Close** in the upper right corner.

## Customize your Thank You Page

After saving your changes, you’ll be brought back to the *Create* step of your display builder. You’ll want to customize your display’s Thank You Page to confirm your contact’s sign up.

* Scroll down and click to edit your **Thank You Page Design**.
* If you’re offering a coupon code in exchange for a sign up, be sure to include the `{{ signup.coupon_code }}` merge tag on your Thank You Page.

<video autoPlay muted loop playsInline className="embed form thank you page" src="https://mintcdn.com/privy/q3FRvRse1aXJ200h/new-images/displays/ef-typ.mp4?fit=max&auto=format&n=q3FRvRse1aXJ200h&q=85&s=5e3f4289340a96d8819bd80249cb612b" data-path="new-images/displays/ef-typ.mp4" />

## Edit your settings

### Attach a coupon code

If you are offering a coupon code in exchange for a sign up, be sure to attach your coupon to your display:

* In your display’s *Create* step, scroll to edit the **Coupon** section and select the desired Coupon from the dropdown menu. **Save.**

### Targeting

Since an Embedded Form only appears when someone visits the web page it's embedded on, the only audience targeting option revolves around how long the form is available. If you would like the display to expire after a fixed period, move to the *Target* step and update the **How Long to Show It** setting.

<img height="200" alt="Screenshot of an Embedded Form's targeting settings in the legacy display builder" src="https://mintcdn.com/privy/q3FRvRse1aXJ200h/new-images/displays/ef-targeting.png?fit=max&auto=format&n=q3FRvRse1aXJ200h&q=85&s=5dd0fcc8240c7e44aa3f57c660c7b888" data-path="new-images/displays/ef-targeting.png" />

## Edit your Follow-Up actions

Once you’ve finalized your settings and audience targeting, you’ll want to make sure that you’re properly following up with your new sign up. Head to the *Follow-Up* step of your builder.

<img height="200" alt="Screenshot showing the Follow-up settings for an Embedded Form in the legacy display builder" src="https://mintcdn.com/privy/gNYzweeSu_YfVjYU/new-images/displays/ef-fu.png?fit=max&auto=format&n=gNYzweeSu_YfVjYU&q=85&s=d225e23bdc23d409f79184a2e9efea66" data-path="new-images/displays/ef-fu.png" />

<AccordionGroup>
  <Accordion title="After Signup Email" defaultOpen="false">
    Click on your After Signup Email to view and edit your template, subject line, and sender info. [Learn more about our drag-and-drop email editor.](https://help.privy.com/docs/learn/email-campaigns/email-templates) Make sure that you **Publish** your email so that it sends to new sign ups.
  </Accordion>

  <Accordion title="Create a series" defaultOpen="false">
    If you want to create a series of more than one After Signup Email for this specific display, select this option.
  </Accordion>

  <Accordion title="Sync signups" defaultOpen="false">
    If you're syncing new sign ups to a [Linked Account](https://help.privy.com/docs/learn/integrations/overview-integrations), be sure to add a sync rule here.
  </Accordion>

  <Accordion title="Send Text Message" defaultOpen="false">
    If you're on the Growth Plan and you're collecting SMS contacts with this display, you can create an After Signup Text to deliver to new contacts after they complete their Double Opt-In.
  </Accordion>

  <Accordion title="Notifications" defaultOpen="false">
    Enable or disable real-time notifications for your users. These notifications will alert the user of new display signups immediately. **Save**. 
  </Accordion>
</AccordionGroup>

## Launch your Embedded Form

Once you’ve finalized your design, targeting, and follow-up actions, select the **Publish** button at the upper right of the *Follow-Up* step and confirm your decision in the prompt. 

<img height="200" alt="Screenshot pointing out where to launch a new display in the legacy display builder" src="https://mintcdn.com/privy/q3FRvRse1aXJ200h/new-images/displays/ef-launch.png?fit=max&auto=format&n=q3FRvRse1aXJ200h&q=85&s=5467a768dd2d2a2921a80b7902e49fb1" data-path="new-images/displays/ef-launch.png" />

### Embed your form onto your site

To retrieve the embed code once the display is published:

* Navigate back to the *Create* step. 

* Click the **\</> Get embed code** button and copy the appropriate value.

  <img height="200" alt="Screenshot highlighting where to locate and copy the embed code for a live Embedded Form" src="https://mintcdn.com/privy/gNYzweeSu_YfVjYU/new-images/displays/ef-embed-code.png?fit=max&auto=format&n=gNYzweeSu_YfVjYU&q=85&s=498619b096ac8cccc877e8a8d6cb73c5" data-path="new-images/displays/ef-embed-code.png" />

* Paste the embed code into the HTML of your external page. 

### Embedding your form into your Shopify footer

Make sure you've copied your Embedded Form's code from Privy (as shown above).

* Navigate to the **Online Store** >**Themes**  section of your Shopify account.
* On the *Themes* dashboard, click on the **Customize** button.
* In the *Sections* sidebar, select the **Header, Template or Footer** section and then add a **Custom Liquid** element.
* Paste your Privy form’s embed code into the **Custom Liquid** element.
  * Drag and drop the **Custom Liquid** element to edit its placement. Moving the element higher will move it left, while lowering it will move the form to the right.
* Select the **Save** button in the upper right after each change to reload and preview the form.

<img height="200" at="Screen recording showing how to add an embedded form onto your Shopify site" src="https://mintcdn.com/privy/O66j7OCpV1QGVCAV/images/displays/add-embedded-form.gif?s=523d5ec72a162284a8606f30714f0115" data-path="images/displays/add-embedded-form.gif" />

Here's a preview of what the form might look like in your store's footer:

<img height="200" alt="Example image of an Embedded Form live in a website's footer" src="https://mintcdn.com/privy/0Edy3SFOeKekgbdl/images/displays/ef-example.png?fit=max&auto=format&n=0Edy3SFOeKekgbdl&q=85&s=3fd06d56e315d88e755eec96d7444188" data-path="images/displays/ef-example.png" />

That's it! Your Embedded Form is now incorporated into your content and will appear to site visitors. [You can review your display's performance at any time.](https://help.privy.com/docs/learn/displays/reporting-overview)
