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

# Forms, Code Embeds, and Navigation Menus in Site Store Pro

> Build contact forms, embed third-party widgets, and manage multi-level navigation menus and link lists across your Site Store Pro storefront.

Site Store Pro gives you three complementary tools for embedding interactive content and managing navigation: a Code Embeds Manager for reusable HTML/JS snippets, a visual Form Builder for custom data capture, and menu builders for top-level navigation and structured link lists. All three integrate with the CMS page editor via shortcodes.

## Code Embeds Manager

Navigate to **Admin → CMS → Code Embeds** (`/admin/cms/embeds`) to create and manage reusable HTML and JavaScript snippets. Once saved, embed any snippet on a CMS page using its shortcode.

```text theme={null}
[code-embed:5]
```

Replace `5` with the ID of your saved code embed.

### Common Use Cases

<CardGroup cols={2}>
  <Card title="Video Iframes" icon="play">
    Paste a YouTube or Vimeo `<iframe>` embed code and reuse it across multiple pages without duplicating markup.
  </Card>

  <Card title="Charts & Calculators" icon="chart-bar">
    Embed JavaScript-powered charts, pricing calculators, or configurators that require custom script tags.
  </Card>

  <Card title="Audio Players" icon="headphones">
    Add embedded audio players or podcast players to product or content pages.
  </Card>

  <Card title="External Widgets" icon="puzzle-piece">
    Embed third-party widgets such as booking tools, maps, or social feeds.
  </Card>
</CardGroup>

<Note>
  Code embeds are rendered safely in the storefront without allowing the page editor to corrupt or strip the markup on subsequent edits.
</Note>

***

## Visual Form Builder

Build fully custom forms at **Admin → CMS → Forms** (`/admin/cms/forms`) using a drag-and-drop field editor. Embed any form on a CMS page with its shortcode:

```text theme={null}
[cms-form:3]
```

Replace `3` with the ID of your saved form.

### Building a Form

<Steps>
  <Step title="Add and Arrange Fields">
    Drag fields into your form layout. Set each field's label, placeholder text, whether it is required, and any custom validation rules.
  </Step>

  <Step title="Configure Security">
    Site Store Pro automatically applies **reCAPTCHA v3** and **rate limiting** to every form submission. No additional configuration is required to enable baseline spam protection.
  </Step>

  <Step title="Set Up Email Notifications">
    In the **Email Notifications** section, add one or more recipient email addresses. Site Store Pro sends a notification email for every new submission.
  </Step>

  <Step title="Configure Mailing List Opt-Ins">
    Toggle **Opt-In Subscription** to automatically subscribe form submitters to one or more of your mailing lists. This is useful for newsletter sign-up or gated content forms.
  </Step>
</Steps>

### Submission Log

After your form goes live, view every submission in the **Submission Log**. From the log you can:

* Filter submissions by date, field values, or status
* View the full content of individual submissions
* Export submissions to a file for reporting or CRM import

***

## Top Navigation Builder

Build and manage your storefront's primary navigation at **Admin → Navigation Menus** (`/admin/nav-menus`). The top navigation builder supports multi-level dropdown menus and gives you control over:

* Hover styles and color schemes
* Item visibility rules (show or hide items based on login state or role)
* Per-item translations for multilingual storefronts

Organise your menu items into parent–child hierarchies to create nested dropdown menus that render responsively across desktop and mobile.

***

## Relational List Menus

Relational list menus are structured link lists designed for secondary navigation contexts such as footer columns, sidebar menus, and quick-links sections. Manage them at **Admin → CMS List Menus** (`/admin/cms-list-menus`).

Embed any list menu in a CMS page or layout widget using its shortcode:

```text theme={null}
[list-menu:4]
```

Replace `4` with the ID of your saved list menu.

<Tip>
  Use the **Shortcodes Generator** drawer in the CMS page editor to find your form and list menu IDs by name. Select the element from the search results and click **Insert into Editor** — no manual ID lookup required.
</Tip>