# Embed and style a form

URL: https://docs.sparklayer.io/help/forms/embedding-and-styling

Add a SparkLayer form to your store with the Shopify theme block or an embed code, set embed attributes and match it to your brand with CSS variables.

> **Quick summary**
>
> - On Shopify, add a published form with the **SparkLayer Form** block in the theme editor, with no code. On any other platform or website, paste the embed code from the form's **Embed** tab, at **Forms** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)).
> - You build forms in the SparkLayer Dashboard (Forms isn't in the SparkLayer Wholesale app in Shopify admin), but they work on your Shopify store.
> - Forms use your SparkLayer theme styles automatically. To make forms look different from the rest of SparkLayer, your developer can set `--spark-form-*` CSS variables.
> - Only the published version appears on your store, so [publish](https://docs.sparklayer.io/help/forms/versions.md#publish-changes) your form first.
> - To show a form in several languages, make one copy per language. See [Translate a form](#translate-a-form).

## Add a form to your store

**Shopify:**

Most Shopify stores should use the **SparkLayer Form** block. In the theme editor, you pick a form and set common layout and styling options, without adding code.

1. In the SparkLayer Dashboard, open the form from **Forms** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)). Go to the **Embed** tab and click **Open theme editor**. Or, in your Shopify admin, go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)) and click **Customize**.
2. Open the page where you want the form, and add the **SparkLayer Form** block to a section.
3. Select the form you want to show.
4. Adjust the styling options in the block's settings.
5. Click **Save**. The form is now on your store.

When you publish changes to the form later, they show on your store straight away. To share the form as a link instead, click **Copy registration link** on the **Embed** tab.

If your form isn't in the block's dropdown, open the **SparkLayer Wholesale** app under Sales channels in your Shopify admin and accept any new permissions it asks for.

For more control, use the embed code instead: see the **Other platforms** tab.

**Other platforms:**

1. In the SparkLayer Dashboard, go to **Forms** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)) and open your form.
2. Click the **Embed** tab and, under **Another website**, click **Copy code**. The code always shows the latest published version.
3. Paste the code into your theme or page content where you want the form to appear.
4. Save your changes and check the form on your store.

## Translate a form

A form's **Language** setting (on the **Settings** tab) only translates built-in text, such as buttons and the address lookup. The labels, descriptions and messages you write stay as you wrote them. Forms aren't covered by the [Core Script translations](https://docs.sparklayer.io/help/storefront/languages-and-international.md) either. On Shopify, Translate & Adapt can't translate a form's field labels, because the form loads as an embed.

To show a form in several languages, make one form per language:

1. At **Forms** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/forms)), open the form's **⋯** menu and click **Duplicate**. Make one copy for each language.
2. In each copy, rewrite the labels, descriptions, button text and success message in that language, and set its **Language** if it's listed. See [Configure form settings](https://docs.sparklayer.io/help/forms/setup.md#configure-form-settings).
3. [Publish](https://docs.sparklayer.io/help/forms/versions.md#publish-changes) each copy.
4. Copy each form's embed code from its **Embed** tab (under **Another website**, **Copy code**).

Then show each language's form on your store:

**Shopify:**

These steps are for the [B2B login page](https://docs.sparklayer.io/help/platforms/shopify/customisations/registration-and-login.md#embed-a-sparklayer-form), with your default language's embed code in its **Custom Contact Form HTML** setting.

1. Open Shopify's [Translate & Adapt app](https://apps.shopify.com/translate-and-adapt) and choose a language at the top.
2. Under **Theme**, click **Templates**, then select **Page: B2B Login**.
3. Find the field **Main: Custom Form Html** and paste that language's embed code.
4. Save, then repeat for each language.

Your theme needs a language selector, so customers can switch language and see the right form.

**Other platforms:**

Add each language's embed code to the version of the page for that language.

Entries arrive on each copy separately, so check the entries of every language's form.

## Style a form

Forms match the rest of SparkLayer on your store automatically, so most stores don't need to change anything.

**Shopify only:**

On Shopify, the **SparkLayer Form** block also has styling options you can set in the theme editor, without code.

To make forms look different from the rest of SparkLayer, your developer or agency can set CSS variables.

**Code for your developer**

Embedded forms use the same core CSS variables as the rest of SparkLayer. If the SparkLayer Core Script already sets `--spark-*` variables on your storefront, forms pick them up automatically. See [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md) for your global styles.

To style forms differently from the rest of SparkLayer, set `--spark-form-*` variables on the `spark-form` element. Styles are applied in this order of priority:

1. `--spark-form-*` form-specific variables
2. `--spark-*` global SparkLayer variables
3. SparkLayer's default styles

For example:

```css
spark-form {
  --spark-form-max-width: 680px;
  --spark-form-button-color: #000000;
  --spark-form-button-raised-background: #000000;
  --spark-form-button-raised-color: #ffffff;
  --spark-form-link-color: #000000;
  --spark-form-border-radius-default: 4px;
}
```

See [Form CSS variables](#css-variables) for every variable.

## Embed a form manually (for developers)

This section is for your developer or agency, when they add the form by hand or need its options. The embed code has two parts. First, the SparkLayer form script:

```html
<script src="https://cdn.sparklayer.io/spark-form.v1.js"></script>
```

Then the form itself, placed where you want it to appear:

```html
<spark-form
form-id="your-form-id"
site-id="your-site-id">
</spark-form>
```

Your [site ID](https://docs.sparklayer.io/help/glossary.md#site-id) is in [Account settings](https://docs.sparklayer.io/help/dashboard/account.md).

### Embed attributes

| Attribute | Required | What it does |
| --- | --- | --- |
| `form-id` | Yes | The ID of the form to show. |
| `site-id` | Yes | Your SparkLayer site ID. |
| `site-env` | No | Set to `test` to load the form from your test environment. Defaults to live. |
| `entry-id` | No | Resumes an existing entry. |
| `entry-key` | No | The key needed to open an existing entry. |
| `hide-title` | No | Set to `true` to hide the form title. |
| `preview-version-id` | No | Previews a specific form version. |

## Form CSS variables (for developers)

Each form variable falls back to the matching global variable when it isn't set.

**All form CSS variables**

| Form variable | Falls back to | Controls |
| --- | --- | --- |
| `--spark-form-max-width` | None | Maximum form width |
| `--spark-form-button-width` | None | Button width, for example 100% |
| `--spark-form-font-default` | `--spark-font-default` | Main font family |
| `--spark-form-header-font` | `--spark-header-font` | Heading font family |
| `--spark-form-button-font-family` | `--spark-button-font-family` | Button font family |
| `--spark-form-font-default-size-small` | `--spark-font-default-size-small` | Base font size on smaller screens |
| `--spark-form-font-default-size` | `--spark-font-default-size` | Base font size |
| `--spark-form-input-font-size` | `--spark-input-font-size` | Input font size |
| `--spark-form-h1-fontsize` | `--spark-h1-fontsize` | H1 size |
| `--spark-form-h2-fontsize` | `--spark-h2-fontsize` | H2 size |
| `--spark-form-h3-fontsize` | `--spark-h3-fontsize` | H3 size |
| `--spark-form-h4-fontsize` | `--spark-h4-fontsize` | H4 size |
| `--spark-form-h5-fontsize` | `--spark-h5-fontsize` | H5 size |
| `--spark-form-h6-fontsize` | `--spark-h6-fontsize` | H6 size |
| `--spark-form-button-small-font-size` | `--spark-button-small-font-size` | Small button font size |
| `--spark-form-button-font-size` | `--spark-button-font-size` | Default button font size |
| `--spark-form-button-large-font-size` | `--spark-button-large-font-size` | Large button font size |
| `--spark-form-font-weight-default` | `--spark-font-weight-default` | Default font weight |
| `--spark-form-font-weight-medium` | `--spark-font-weight-medium` | Medium font weight |
| `--spark-form-font-weight-heavy` | `--spark-font-weight-heavy` | Heavy font weight |
| `--spark-form-header-font-weight` | `--spark-header-font-weight` | Heading font weight |
| `--spark-form-button-font-weight` | `--spark-button-font-weight` | Button font weight |
| `--spark-form-header-text-transform` | `--spark-header-text-transform` | Heading text transform |
| `--spark-form-header-letter-spacing` | `--spark-header-letter-spacing` | Heading letter spacing |
| `--spark-form-button-text-transform` | `--spark-button-text-transform` | Button text transform |
| `--spark-form-button-text-letter-spacing` | `--spark-button-text-letter-spacing` | Button letter spacing |
| `--spark-form-border-radius-default` | `--spark-border-radius-default` | Default border radius |
| `--spark-form-border-radius-button` | `--spark-border-radius-button` | Button border radius |
| `--spark-form-input-padding` | `--spark-input-padding` | Input padding |
| `--spark-form-button-padding` | `--spark-button-padding` | Button padding |
| `--spark-form-product-card-button-padding` | `--spark-product-card-button-padding` | Product card button padding |
| `--spark-form-lightest-color` | `--spark-lightest-color` | Form background and light surfaces |
| `--spark-form-default-body-color` | `--spark-default-body-color` | Body text colour |
| `--spark-form-header-color` | `--spark-header-color` | Heading colour |
| `--spark-form-primary-color` | `--spark-primary-color` | Primary colour |
| `--spark-form-primary-color-light` | `--spark-primary-color-light` | Light primary colour |
| `--spark-form-primary-color-dark` | `--spark-primary-color-dark` | Dark primary colour |
| `--spark-form-secondary-color` | `--spark-secondary-color` | Secondary colour |
| `--spark-form-link-color` | `--spark-link-color` | Link colour |
| `--spark-form-button-color` | `--spark-button-color` | Button brand colour |
| `--spark-form-button-raised-color` | `--spark-button-raised-color` | Primary button text colour |
| `--spark-form-button-raised-background` | `--spark-button-raised-background` | Primary button background |
| `--spark-form-button-raised-hover-background` | `--spark-button-raised-hover-background` | Primary button hover background |
| `--spark-form-button-raised-border-color` | `--spark-button-raised-border-color` | Primary button border colour |
| `--spark-form-button-disabled-color` | `--spark-button-disabled-color` | Disabled button text colour |
| `--spark-form-button-large-color` | `--spark-button-large-color` | Large button colour |
| `--spark-form-input-background` | `--spark-input-background` | Input background |
| `--spark-form-input-border-color` | `--spark-input-border-color` | Input border colour |
| `--spark-form-input-text-color` | `--spark-input-text-color` | Input text colour |
| `--spark-form-input-focus-border-color` | `--spark-input-focus-border-color` | Focused input border colour |
| `--spark-form-table-header-background-color` | `--spark-table-header-background-color` | Table header background |
| `--spark-form-success-color` | `--spark-success-color` | Success state colour |
| `--spark-form-error-color` | `--spark-error-color` | Error state colour |
| `--spark-form-warn-color` | `--spark-warn-color` | Warning state colour |
| `--spark-form-info-color` | `--spark-info-color` | Info state colour |
| `--spark-form-agent-color` | `--spark-agent-color` | Agent state colour |
| `--spark-form-company-users-color` | `--spark-company-users-color` | Company users state colour |

## FAQs

**The address search box clears after the customer picks an address**

That's expected. When the customer picks an address from the search, the address finder fills in the separate address fields (such as street, city and postcode) and clears the search box. The address is in the fields below it.

**Can Translate & Adapt translate my form?**

No. Translate & Adapt can't reach a form's field labels, because the form loads as an embed. Make one form per language and paste each one's embed code into Translate & Adapt instead. See [Translate a form](#translate-a-form).

**Where should the form script go on BigCommerce?**

Only on the page that shows the form, such as your registration page, and you can load it with `defer`. See [Use SparkLayer Forms on BigCommerce](https://docs.sparklayer.io/help/platforms/bigcommerce/install.md#use-sparklayer-forms-on-bigcommerce).