README

Overview

The Bootstrap Form extension enhances TYPO3's form system with Bootstrap 5 integration, providing responsive and modern form styling with floating labels. This extension extends the standard TYPO3 form functionality with Bootstrap-specific components and styling.

Features

• Bootstrap 5 styling for all form elements
• Floating labels support
• Custom email finishers with enhanced features
• Pre-configured form templates
• Content element integration for form headers and images
• Responsive design

Requirements

• TYPO3 CMS 12.4 or 13.0
• Bootstrap 5 CSS framework

Installation

Composer Installation

composer require touch5/t5-bootstrap-form

Extension Manager

1. Download the extension from the TYPO3 Extension Repository
2. Upload and install the extension through the Extension Manager

Configuration

The extension is configured through the TYPO3 form framework. It adds a new form prototype called formFloatingLabels that inherits from the standard form prototype.

TypoScript Setup

The extension automatically adds the necessary TypoScript configuration:

module.tx_form.settings.yamlConfigurations {
    100 = EXT:t5_bootstrap_form/Configuration/Form/FormSetup.yaml
}

plugin.tx_form.settings.yamlConfigurations {
    300 = EXT:t5_bootstrap_form/Configuration/Form/FormSetup.yaml
}

Usage

Using the Form Wizard

The extension provides a Form Wizard in the TYPO3 backend that makes it easy to create and configure Bootstrap forms:

1. Go to the TYPO3 backend Form module
2. Click the "Create new form" button
3. Enter a form name (e.g., "Contact Form")
4. Select "Bootstrap Form with Floating Labels" as the prototype
5. Choose "Bootstrap Contact Form" as the template or start with a blank form
6. Click "Create form" to generate the form

Creating Forms Manually

When creating forms manually by writing YAML configurations, you must use the correct prototype name:

prototypeName: formFloatingLabels  # Required for Bootstrap styling

Important: The formFloatingLabels prototype name is required for all Bootstrap form functionality to work correctly.

Using the Email Finishers

The extension provides two enhanced email finishers:

1. Email to Receiver (Bootstrap): Sends an email to the form recipient with Bootstrap styling
2. Email to Sender (Bootstrap): Sends a confirmation email to the form submitter with Bootstrap styling

Both finishers support:

• HTML emails with Bootstrap styling
• Content element integration (header, bodytext, image)
• File attachments
• Custom templates

Template Customization

You can customize the templates by overriding the template paths in your site package:

plugin.tx_form.settings.yamlConfigurations {
    1000 = EXT:your_extension/Configuration/Form/FormSetup.yaml
}

In your custom YAML file:

prototypes:
  formFloatingLabels:
    formElementsDefinition:
      Form:
        renderingOptions:
          templateRootPaths:
            200: 'EXT:your_extension/Resources/Private/Templates/'
          partialRootPaths:
            200: 'EXT:your_extension/Resources/Private/Partials/'
          layoutRootPaths:
            200: 'EXT:your_extension/Resources/Private/Layouts/'

Examples

Basic Form Configuration

type: Form
identifier: bootstrap-contact-form
label: 'Bootstrap Contact Form'
prototypeName: formFloatingLabels
renderables:
  - type: Page
    identifier: page-1
    label: 'Contact'
    renderables:
      - type: Text
        identifier: name
        label: 'Name'
        properties:
          fluidAdditionalAttributes:
            placeholder: 'Name'
        validators:
          - identifier: NotEmpty
      - type: Email
        identifier: email
        label: 'Email'
        properties:
          fluidAdditionalAttributes:
            placeholder: 'Email'
        validators:
          - identifier: NotEmpty
          - identifier: EmailAddress
      - type: Textarea
        identifier: message
        label: 'Message'
        properties:
          fluidAdditionalAttributes:
            placeholder: 'Your message'
        validators:
          - identifier: NotEmpty
finishers:
  - identifier: EmailToReceiverBootstrap
    options:
      subject: 'New contact form submission'
      recipientAddress: 'recipient@example.com'
      recipientName: 'Recipient Name'
      senderAddress: '{email}'
      senderName: '{name}'
      addHtmlPart: true
  - identifier: Redirect
    options:
      pageUid: '42'
      additionalParameters: ''

Documentation

Detailed documentation is available in the Documentation directory:

• User Documentation: Comprehensive guide for users
• Developer Documentation: Technical details for developers

Compatibility

• TYPO3 12.4 - 13.0

License

GPL-2.0-or-later

Author

Michael Scheunemann m.scheunemann@touch5.de