Embed and style a form
Add a form to your store
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.
- In the SparkLayer Dashboard, open the form from Forms (opens in your SparkLayer Dashboard in a new tab). Go to the Embed tab and click Open theme editor. Or, in your Shopify admin, go to Online Store,Themes (opens in your Shopify admin in a new tab) and click Customize.
- Open the page where you want the form, and add the SparkLayer Form block to a section.
- Select the form you want to show.
- Adjust the styling options in the block's settings.
- 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.
- In the SparkLayer Dashboard, go to Forms (opens in your SparkLayer Dashboard in a new tab) and open your form.
- Click the Embed tab and, under Another website, click Copy code. The code always shows the latest published version.
- Paste the code into your theme or page content where you want the form to appear.
- 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 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:
- At Forms (opens in your SparkLayer Dashboard in a new tab), open the form's ⋯ menu and click Duplicate. Make one copy for each language.
- 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.
- Publish each copy.
- Copy each form's embed code from its Embed tab (under Another website, Copy code).
Then show each language's form on your store:
These steps are for the B2B login page, with your default language's embed code in its Custom Contact Form HTML setting.
- Open Shopify's Translate & Adapt app (opens in a new tab) and choose a language at the top.
- Under Theme, click Templates, then select Page: B2B Login.
- Find the field Main: Custom Form Html and paste that language's embed code.
- Save, then repeat for each language.
Your theme needs a language selector, so customers can switch language and see the right form.
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 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:
--spark-form-*form-specific variables--spark-*global SparkLayer variables- SparkLayer's default styles
For example:
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 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:
<script src="https://cdn.sparklayer.io/spark-form.v1.js"></script>Then the form itself, placed where you want it to appear:
<spark-form
form-id="your-form-id"
site-id="your-site-id">
</spark-form>Your site ID is in Account settings.
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
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.
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.
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.
Last updated