### Install Freeform via Composer (CLI)

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/setup/installing-updating.mdx

Install Freeform using Composer in your Craft project's CLI. This method allows for installing the latest version or a specific version. After requiring the package, you can install the plugin via the CLI, specifying the desired edition (pro, lite, or express).

```nix
cd /path/to/project
composer require solspace/craft-freeform -w
./craft plugin/install freeform pro
```

```nix
cd /path/to/project
composer require solspace/craft-freeform:5.10.15 -w
./craft plugin/install freeform pro
```

```nix
cd /path/to/project
composer require solspace/craft-freeform -w
./craft plugin/install freeform
```

--------------------------------

### Install AI Assistant via Composer CLI

Source: https://github.com/solspace/documentation/blob/main/craft-ai-assistant/setup/installing-updating.mdx

Installs the latest version of AI Assistant using Composer. Requires a CLI application and Composer to be installed.

```nix
cd /path/to/project
composer require solspace/craft-aiassistant -w
```

--------------------------------

### Render a Form using Twig

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/templates/queries/form.mdx

Demonstrates how to initialize and render a form using the freeform.form query. The basic example renders the form directly, while the advanced example shows how to pass configuration objects for attributes, field styling, and global overrides.

```twig
{{ freeform.form("myFormHandle").render() }}
```

```twig
{{ freeform.form("myFormHandle", {
    attributes: {
        novalidate: true,
        class: "my-form-class",
    },
    buttons: {
        attributes: {
            submit: { class: "form-field-button blue" },
            back: { class: "form-field-button gray" },
        },
    },
    fields: {
        "@global": {
            attributes: {
                input: {
                    class: "form-field-input",
                },
                label: {
                    class: "form-field-label",
                },
            },
        },
        ":required": {
            attributes: {
                label: { "+class": "form-field-required" },
            },
        },
        ":errors": {
            attributes: {
                input: { "+class": "form-field-is-invalid" },
            },
        },
        "@dropdown": {
            attributes: {
                container: {
                    "data-select-container": true,
                },
                input: {
                    "+class": "form-field-select fullwidth",
                },
            },
        },
        "@checkboxes, @radios" : {
            attributes: {
                input: {
                    "+class": "form-field-options",
                },
            },
        },
        "myFieldHandle": {
            value: entry.id,
        },
    },
}).render() }}
```

--------------------------------

### Install Calendar Plugin via CLI

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/setup/installing-updating.mdx

Installs the Calendar plugin after it has been added via Composer. This command is run from the root of your Craft project.

```sh
php craft plugin/install calendar
```

--------------------------------

### Install Specific Version of AI Assistant via Composer CLI

Source: https://github.com/solspace/documentation/blob/main/craft-ai-assistant/setup/installing-updating.mdx

Installs a specific version of AI Assistant using Composer. Requires a CLI application and Composer to be installed.

```nix
composer require solspace/craft-aiassistant:1.0.6 -w
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/solspace/documentation/blob/main/README.md

Installs all required project dependencies defined in the package.json file using the Yarn package manager.

```shell
yarn
```

--------------------------------

### Example: List All Calendars with Pagination

Source: https://github.com/solspace/documentation/blob/main/ee-calendar/templating/calendars.mdx

An example demonstrating how to list all available calendars or specific calendar information based on URL segments. It includes dynamic filtering using `segment_3`, setting a limit, enabling pagination, and displaying results or a 'no results' message.

```html
<ul>
  {exp:calendar:calendars
    {if segment_3} calendar_short_name="{segment_3}"{/if}
    limit="10"
    paginate="both"
  }
    <li><a href="{path='calendar/calendars'}/{calendar:short_name}">{calendar:name}</a></li>
    {if calendar:no_results}
      <li>No results found.</li>
    {/if}
    {calendar:paginate}
      <li>Page {calendar:current_page} of {calendar:total_pages} pages. {calendar:pagination_links}</li>
    {/calendar:paginate}
  {/exp:calendar:calendars}
</ul>
```

--------------------------------

### File Upload Drag & Drop SCSS Customization Example

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/fields.mdx

Provides an example of how to customize the File Upload Drag & Drop field's appearance using SCSS. This demonstrates overriding default styles for the input, preview zone, and remove button.

```css
.freeform-file-dnd__input {
  background: blue;

  &__preview-zone {
    &__file-preview {
      border: 3px solid grey;

      &__thumbnail {
        border: 1px solid black;
        padding: 5px;

        &__remove-button {
          border-radius: 0;
        }
      }
    }
  }
}
```

--------------------------------

### Install Calendar Latest Version via CLI

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/setup/installing-updating.mdx

Installs the latest version of the Calendar plugin using Composer. This command should be run from the root of your Craft project.

```sh
cd /path/to/project
composer require solspace/craft-calendar -w
```

--------------------------------

### Example Twig Heading for Predefined Assets

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/email-notifications.mdx

An example of a complete heading comment block in a Twig template file, including `presetAssets` to specify which assets should be attached to email notifications. This allows for dynamic attachment inclusion based on template configuration.

```twig
{# subject: New submission from your {{ form.name }} form #}
{# fromEmail: {{ craft.app.projectConfig.get('email.fromEmail') }} #}
{# fromName: {{ craft.app.projectConfig.get('email.fromName') }} #}
{# replyToEmail: {{ email }} #}
{# replyToName: {{ firstName }} {{ lastName }} #}
{# cc: ring@my-precio.us #}
{# bcc: #}
{# includeAttachments: true #}
{# presetAssets: 42,67 #}
{# templateName: My Template Name #}
{# description: A description of what this template does. #}
```

--------------------------------

### Install AI Assistant Plugin via CLI

Source: https://github.com/solspace/documentation/blob/main/craft-ai-assistant/setup/installing-updating.mdx

Installs the AI Assistant plugin after it has been added via Composer. Requires access to the Craft CMS console.

```nix
./craft plugin/install ai-assistant
```

--------------------------------

### Example Twig Heading for Template Wrapper

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/email-notifications.mdx

An example of a complete heading comment block in a Twig template file, including the `wrapperId` to specify a template wrapper. This demonstrates how to set various notification parameters directly in the template's metadata.

```twig
{# subject: New submission from your {{ form.name }} form #}
{# fromEmail: {{ craft.app.projectConfig.get('email.fromEmail') }} #}
{# fromName: {{ craft.app.projectConfig.get('email.fromName') }} #}
{# replyToEmail: {{ email }} #}
{# replyToName: {{ firstName }} {{ lastName }} #}
{# cc: ring@my-precio.us #}
{# bcc: #}
{# includeAttachments: true #}
{# presetAssets: 42,67 #}
{# wrapperId: 1 #}
{# templateName: My Template Name #}
{# description: A description of what this template does. #}
```

--------------------------------

### Example Success Template Structure

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/configuration/settings.mdx

A basic example of a Twig template file used for displaying success messages after form submission. It includes placeholders for dynamic data like form ID and name.

```twig
<div id="freeform-success">
    <h3>Thank you!</h3>
    <p>We have successfully received your submission.</p>
</div>
```

--------------------------------

### File Upload Drag & Drop CSS Customization Example

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/fields.mdx

Illustrates how to customize the File Upload Drag & Drop field's appearance using regular CSS. This example shows how to apply styles directly and use '!important' to ensure overrides take effect.

```css
.freeform-file-dnd__input {
  background: blue !important;
  border: 1px solid red !important;
}
.freeform-file-dnd__placeholder {
  font-size: 12px !important;
}
.freeform-file-dnd__preview-zone__file-preview__thumbnail {
  border: 3px solid yellow !important;
}
.freeform-file-dnd__preview-zone__file-preview__thumbnail__remove-button {
  border-radius: 0 !important;
}
```

--------------------------------

### Manage Dependencies via Composer

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/setup/installing-updating.mdx

Configuration examples for updating the composer.json file to manage Freeform versions. Includes both caret-based versioning for automatic updates and explicit version locking.

```json
"require": {
    "craftcms/cms": "^5.0.0",
    "vlucas/phpdotenv": "^5.4.0",
    "solspace/craft-freeform": "^5.0.0",
    "solspace/craft-calendar": "^5.0.0"
}
```

```diff
"require": {
    "craftcms/cms": "5.6.1",
    "vlucas/phpdotenv": "5.4.0",
-   "solspace/craft-freeform": "5.7.2",
+   "solspace/craft-freeform": "5.9.15",
    "solspace/craft-calendar": "5.0.14"
}
```

--------------------------------

### DynamicSelect API Request Example

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/developer/field-properties/dynamic-select.mdx

An example of the resulting HTTP GET request generated by the DynamicSelect property when parameters are mapped from the form fields.

```http
http://localhost:3000/api/foods?formId=123&defaultValue=sushi&currentValue=pizza&label=Choose+your+favorite+food
```

--------------------------------

### Importing UI Components and Utilities

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/guides/guide/file-upload-custom-delete-dialog.mdx

Imports necessary components and utilities for building the documentation interface. Includes Tabs, TabItem for tabbed content, VerticalStepWrapper and StepMarkdown for structured steps, and Badge and Photo for visual elements.

```javascript
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { VerticalStepWrapper, StepMarkdown } from '@site/src/components/docs';
import { Badge, Photo } from '@site/src/components/utils';
```

--------------------------------

### Show Only Events Starting on Weekdays

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/templates/queries/week.mdx

This example demonstrates how to retrieve a Week object using the calendar.week query and then filter the events to display only those that start on a weekday. It utilizes a conditional within the loop.

```twig
{% set week = craft.calendar.week({
  date: "today",
  calendar: ["holidays", "sports"]
}) %}

{% for event in week.events if event.startDate.weekday %}
  <div style="{{ event.calendar.color }};
">
    {{ event.title }}
  </div>
{% endfor %}
```

--------------------------------

### Twig Formatting Template Integration

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/guides/guide/range-slider-number.mdx

An example of how to integrate the Range field type within a Twig formatting template, specifically using the 'Basic Light' template as a starting point. This snippet shows the conditional rendering based on the field type and the inclusion of necessary HTML structure.

```twig
{# Shortened for Example #}
...
<div class="freeform-fieldtype-{{ field.type }}">
  {% if field.type == "number" %}
    {{ field.renderLabel() }}
    {{ field.renderInstructions() }}
    <div class="freeform-range">

```

--------------------------------

### Constructing ICS Subscription URL with Site Handle in Twig

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/templates/objects/calendar.mdx

This example demonstrates how to construct a full ICS subscription URL within a Twig template, including the ability to specify a particular site's translated version by appending the 'site' parameter with the site's handle. This is useful for multi-site installations.

```twig
{{ siteUrl }}index.php?p=actions/calendar/api/ics&site=mySiteHandle&hash={{ calendar.icsHash }}
```

--------------------------------

### Manual Route Installation for Freeform Demo Templates

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/configuration/demo-templates.mdx

This code snippet provides the necessary PHP routes to manually install Freeform's demo templates. These routes map specific URL patterns to corresponding template files within your Craft CMS project, enabling the demo templates to function correctly. Ensure these are added to your Craft's `/config/routes.php` file.

```php
'demo/templates/<*:[^\/]+>' => ['template' => 'demo/templates'],
'demo/templates/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/templates/form'],
'demo/templates/<*:[^\/]+>/<*:[^\/]+>/edit/<*:[^\/]+>' => ['template' => 'demo/templates/form'],
'demo/submissions/<*:[^\/]+>' => ['template' => 'demo/submissions'],
'demo/submissions/<*:[^\/]+>/spam' => ['template' => 'demo/submissions'],
'demo/submissions/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/submissions/view'],
'demo/submissions/<*:[^\/]+>/<*:[^\/]+>/spam' => ['template' => 'demo/submissions/view'],
'demo/submissions/delete/<*:[^\/]+>/<*:[^\/]+>' => ['template' => 'demo/submissions/delete'],
'demo/custom' => ['template' => 'demo/custom'],
'demo/custom/<*:[^\/]+>' => ['template' => 'demo/custom/form'],
'demo/extras/suppress-edit-submissions/edit/<token\w+>' => ['template' => 'demo/extras/suppress-edit-submissions']
```

--------------------------------

### Set First Day of Week in Calendar Template Queries

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/guides/common-issues.mdx

This example shows how to override the default first day of the week directly within Calendar template queries like `calendar.month`, `calendar.week`, or `calendar.day`. It uses the `firstDay` parameter with an integer value (0-6) to specify the desired starting day of the week.

```twig
{% set calendarData = calendar.month({ firstDay: 1 }) %}
```

--------------------------------

### List of Available Integrations

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/intro.mdx

This is a comprehensive list of available third-party integrations, categorized by service. Each item includes a title, link to its documentation, and an icon identifier.

```javascript
items=[
  {
    title: 'Active Campaign',
    link: 'integrations/activecampaign/',
    icon: 'active-campaign',
  },
  {
    title: 'Anthropic AI',
    link: 'integrations/anthropic/',
    icon: 'anthropic',
    filterIcon: true,
  },
  {
    title: 'Campaign',
    link: 'integrations/campaign/',
    icon: 'campaign',
  },
  {
    title: 'Campaign Monitor',
    link: 'integrations/campaign-monitor/',
    icon: 'campaign-monitor',
  },
  {
    title: 'Click',
    link: 'integrations/click/',
    icon: 'click',
  },
  {
    title: 'Cloudflare Turnstile',
    link: 'integrations/turnstile/',
    icon: 'turnstile',
  },
  {
    title: 'Constant Contact',
    link: 'integrations/constant-contact/',
    icon: 'constant-contact',
  },
  {
    title: 'Dotdigital',
    link: 'integrations/dotdigital/',
    icon: 'dotdigital',
  },
  {
    title: 'Freshdesk',
    link: 'integrations/freshdesk/',
    icon: 'freshdesk',
  },
  {
    title: 'Gemini AI',
    link: 'integrations/gemini/',
    icon: 'gemini',
  },
  {
    title: 'Generic Webhooks',
    link: 'integrations/generic-webhooks/',
    icon: 'generic-webhook',
  },
  {
    title: 'Google Sheets',
    link: 'integrations/google-sheets/',
    icon: 'google-sheets',
  },
  {
    title: 'Google Tag Manager',
    link: 'integrations/google-tag-manager/',
    icon: 'google-tag-manager',
  },
  {
    title: 'hCaptcha',
    link: 'integrations/hcaptcha/',
    icon: 'hcaptcha',
  },
  {
    title: 'HubSpot',
    link: 'integrations/hubspot/',
    icon: 'hubspot',
  },
  {
    title: 'Insightly',
    link: 'integrations/insightly/',
    icon: 'insightly',
  },
  {
    title: 'Jira',
    link: 'integrations/jira/',
    icon: 'jira',
  },
  {
    title: 'Keap',
    link: 'integrations/keap/',
    icon: 'keap',
  },
  {
    title: 'Mailchimp',
    link: 'integrations/mailchimp/',
    icon: 'mailchimp',
  },
  {
    title: 'Mollie',
    link: 'integrations/mollie/',
    icon: 'mollie',
    filterIcon: true,
  },
  {
    title: 'OpenAI',
    link: 'integrations/openai/',
    icon: 'openai',
    filterIcon: true,
  },
  {
    title: 'Pardot',
    link: 'integrations/pardot/',
    icon: 'pardot',
  },
  {
    title: 'PayPal',
    link: 'integrations/paypal/',
    icon: 'paypal',
  },
  {
    title: 'Pipedrive',
    link: 'integrations/pipedrive/',
    icon: 'pipedrive',
  },
  {
    title: 'reCAPTCHA',
    link: 'integrations/recaptcha/',
    icon: 'recaptcha',
  },
  {
    title: 'Salesforce',
    link: 'integrations/salesforce/',
    icon: 'salesforce',
  },
  {
    title: 'Slack',
    link: 'integrations/slack/',
    icon: 'slack',
  },
  {
    icon: 'square',
    title: 'Square',
    link: 'integrations/square/',
    filterIcon: true,
  },
  {
    title: 'Stripe',
    link: 'integrations/stripe-payments/',
    icon: 'stripe',
  },
  {
    title: 'SugarCRM',
    link: 'integrations/sugarcrm/',
    icon: 'sugarcrm',
    filterIcon: true,
  },
  {
    title: 'xAI',
    link: 'integrations/xai/',
    icon: 'xai',
    filterIcon: true,
  },
  {
    title: 'Zapier',
    link: 'integrations/zapier/',
    icon: 'zapier',
  },
  {
    title: 'Zoho',
    link: 'integrations/zoho/',
    icon: 'zoho',
  },
  {
    title: 'Tailwind CSS',
    link: 'templates/formatting/#sample-templates',
    icon: 'tailwind',
  },
  {
    title: 'Bootstrap',
    link: 'templates/formatting/#sample-templates',
    icon: 'bootstrap',
  },
  {
    title: 'Craft Entries',
    link: 'integrations/elements/#craft-entries',
    icon: 'craft-entries',
    filterIcon: true,
  },
  {
    title: 'Craft Users',
    link: 'integrations/elements/#craft-users',

```

--------------------------------

### Configure PHP Application for Module

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/headless/graphql.mdx

Shows how to update the application configuration file (`/config/app.php`) to register and bootstrap the custom Freeform module.

```php
<?php

use modules\FreeformModule;

return [
    'modules' => [
        'freeform-module' => FreeformModule::class,
    ],
    'bootstrap' => ['freeform-module'],
];
```

--------------------------------

### Create Simple API Mock Server in PHP

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/developer/email-marketing.mdx

Sets up a basic PHP API server for testing integration connections. It checks for a valid 'Access-Token' header and responds with JSON.

```php
<?php

header('Content-Type: application/json');

$headers = getallheaders();
$accessToken = $headers['Access-Token'] ?? null;

if ('valid-token' !== $accessToken) {
    http_response_code(401);
    echo 'invalid token';

    exit;
}

$url = $_SERVER['REQUEST_URI'];
switch ($url) {
    default:
        echo 'OK';

        break;
}

```

--------------------------------

### User Select Notifications Setup

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/email-notifications.mdx

Guides users on setting up email notifications using the 'User Select' feature in Freeform. This involves selecting a target field (Dropdown, Checkbox, Radios, Multi-Select), choosing a notification template, and mapping recipient email addresses to form options. It also covers default recipients and the use of Twig for dynamic email addresses.

```markdown
In the form builder, click on the **Notifications** tab. Then click the
      _New_ button beside the **User Select** menu.

      Choose any [Dropdown](./fields.mdx#dropdown), [Checkbox](./fields.mdx#checkbox),
      [Checkboxes](./fields.mdx#checkboxes), [Radios](./fields.mdx#radios) or
      [Multi-Select](./fields.mdx#multiple-select) field in the **Target field**
      setting.

      Create a new notification template or choose an existing one from the **Default Notification Template** setting.

      If you wish to have an email address notified if _NO_ options are chosen,
      you can set email address(es) in the **Default Recipients** setting.
      **Otherwise, leave this setting blank.**

      In the **Recipient Mapping** area, add email address(es) for each corresponding option. If you need
      to specify more than one email address for an option, hit _Enter_ and additional email inputs will appear.

      You can also choose to specify a different email notification template for any or all options.

      Twig (isolated to `form` and field handles) is allowed here, e.g. `{{ email }}` or `{{ form.handle }}`.<Badge type="feature" text="New in 5.10.3+" />

      :::info
      Email addresses will never be rendered in the front-end form.
      :::

```

--------------------------------

### Basic Form Rendering with Freeform Next

Source: https://github.com/solspace/documentation/blob/main/ee-freeform/templating/form.mdx

A simple example of how to render an entire form using its designated formatting template with the Freeform Next `render` tag. This is the most basic way to display a form and its fields.

```html
{exp:freeform_next:render form="contact_form"}
```

--------------------------------

### Run database migrations

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/setup/updating-freeform-4.mdx

Execute database migrations for the entire project or specifically for the Freeform plugin using the Craft CLI.

```sh
php craft migrate/all
```

```sh
php craft migrate --plugin=freeform
```

--------------------------------

### Compare Event Start Date with Current Day in Twig

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/templates/queries/events.mdx

This Twig snippet illustrates how to compare an event's start date with the current day's date using the `lt` (less than) method. If the event's start date is before the current day, it prints the start date in 'Y-m-d' format.

```twig
{# Print out the Y-m-d of start date if start date is before the Day date #}

{% set events = craft.calendar.events %}

{% for event in events %}
  {% if event.startDate.lt(day.date) %}
    {{ event.startDate.dateString }}
  {% endif %}
{% endfor %}
```

--------------------------------

### Compare Event Start Date with Current Day (Twig)

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/templates/objects/event.mdx

This snippet demonstrates comparing an event's start date with the current day's date using the `lt` (less than) method. If the event's start date is before the current day, it prints the start date in 'Y-m-d' format. This is useful for conditional display of event information.

```twig
{# Print out the Y-m-d of start date if start date is before the Day date #}

{% if event.startDate.lt(day.date) %}
  {{ event.startDate.dateString }}
{% endif %}
```

--------------------------------

### Iterating Over Multiple Integrations

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/templates/queries/integration.mdx

Demonstrates a dynamic approach to fetching and displaying properties from multiple integrations by iterating through a configuration array.

```twig
{% set form = freeform.form("myFormHandle") %}

{% set integrations = [
    { handle: 'post-forwarding', fields: ['enabled', 'url', 'errorTrigger', 'sendFiles'] },
    { handle: 'honeypot', fields: ['enabled', 'inputName', 'errorMessage'] },
    { handle: 'javascript-test', fields: ['enabled', 'inputName', 'errorMessage'] },
    { handle: 'google-tag-manager', fields: ['enabled', 'containerId', 'eventName'] },
] %}

<ul>
{% for integration in integrations %}
    {% set instance = freeform.integration(form, integration.handle) %}
    {% if instance %}
        <li>
            <strong>{{ integration.handle }}</strong>:
            {{ integration.fields
                |map(field => attribute(instance, field)|default(''))
                |filter(v => v is not empty)
                |join(', ')
            }}
        </li>
    {% endif %}
{% endfor %}
</ul>
```

--------------------------------

### Execute Migrations via CLI

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/setup/installing-updating.mdx

Commands to run database migrations after updating dependencies via Composer. Users can choose to migrate all plugins or specifically target Freeform.

```nix
composer update
./craft migrate/all
./craft migrate --plugin=freeform
```

--------------------------------

### Example JSON Payload

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/developer/crm.mdx

An example of the JSON data structure received by the API server after form submission.

```json
{
  "fullName": "John Doe",
  "privateEmail": "john@doe.com",
  "companyEmail": "john@doe.com"
}
```

--------------------------------

### Render Photo Component in Documentation

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/guides/guide/toggle-switch-checkbox.mdx

This snippet demonstrates how to use the Photo component to display images within the documentation. It requires the image path as a prop and an alt text for accessibility.

```jsx
<Photo
  img={require('@site/static/img/craft/freeform/v5/guides/toggle-switch-2.png')}
  alt="Range Slider"
/>
```

--------------------------------

### Example: Form Before Save Hook Implementation (PHP)

Source: https://github.com/solspace/documentation/blob/main/ee-freeform/developer/extension-hooks.mdx

Example demonstrating how to register and implement the `form_before_save` hook in a PHP extension. This hook is called before a form is saved and allows modification of the FormModel.

```php
<?php

use Solspace\Addons\FreeformNext\Model\FormModel;

class Example_ext
{
    // ... other code

    /**
     * Set all new Freeform forms to have random hash as their name and handle
     *
     * @param FormModel $model
     * @param bool      $isNew
     */
    public function form_before_save(FormModel $model, $isNew)
    {
        if ($isNew) {
            // Set the form's name and handle to some random hash
            $model->name = md5(time());
            $model->handle = $model->name;
        }

        // the model gets saved later on, no need to call save() here
    }
}

```

--------------------------------

### Start Local Development Server

Source: https://github.com/solspace/documentation/blob/main/README.md

Launches a local development server with hot-reloading enabled. This allows for real-time previewing of changes during the development process.

```shell
yarn start
```

--------------------------------

### Implement Global Layouts for Notifications

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/forms/email-notifications.mdx

Shows how to create a base layout template and extend it within specific email notification templates for consistent styling.

```twig
<html>
<head>
    <title>Global Layout</title>
</head>
<body>

<h1>Global Layout</h1>
<div>
    {% block content %}{% endblock %}
</div>

</body>
</html>
```

```twig
{% extends "_layout/email-notifications" %}

{% block content %}

    <p>Submitted on: {{ dateCreated|date('l, F j, Y \\a\\t g:ia') }}</p>
    <ul>
        {% for field in allFields %}
            <li>{{ field.label }}: {{ field.valueAsString }}</li>
        {% endfor %}
    </ul>

{% endblock %}
```

--------------------------------

### Install Calendar Specific Version via CLI

Source: https://github.com/solspace/documentation/blob/main/craft-calendar/setup/installing-updating.mdx

Installs a specific version of the Calendar plugin using Composer. Replace '5.0.15' with the desired version number. This command should be run from the root of your Craft project.

```sh
cd /path/to/project
composer require solspace/craft-calendar:5.0.15 -w
```

--------------------------------

### Install AI Assistant via Composer

Source: https://github.com/solspace/documentation/blob/main/craft-ai-assistant/guides/getting-started.mdx

The standard method for installing the AI Assistant plugin into a Craft CMS project using the Composer package manager.

```bash
composer require solspace/craft-aiassistant
```

--------------------------------

### Basic Template with TinyMCE

Source: https://github.com/solspace/documentation/blob/main/craft-freeform/guides/guide/tinymce-editor-textarea.mdx

A complete HTML template structure demonstrating the inclusion of the Freeform form rendering and the TinyMCE initialization script.

```twig
<html>
<head></head>
<body>
  {{ freeform.form("yourFormHandle").render() }}

  <script src="/assets/js/tinymce/tinymce.min.js"></script>
  <script>
    tinymce.init({
      selector: 'textarea#tinymce-example'
    });
  </script>
</body>
</html>
```

--------------------------------

### Calendar:Month_List Current Year Example

Source: https://github.com/solspace/documentation/blob/main/ee-calendar/templating/month-list.mdx

Displays a list of all months within the current year. This example utilizes date_range_start and date_range_end set to the beginning and end of the year, respectively.

```html
<ul>
  {exp:calendar:month_list
    date_range_start="year-01-01"
    date_range_end="year-12-last"
    limit="12"
  }
    <li>
      <a href="{path='calendar/month'}/{calendar:date format='%Y/%m'}/">
        {calendar:date format="%F, %Y"}
      </a>
    </li>
  {/exp:calendar:month_list}
</ul>
```