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

Download the extension from the TYPO3 Extension Repository
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:

Go to the TYPO3 backend Form module
Click the "Create new form" button
Enter a form name (e.g., "Contact Form")
Select "Bootstrap Form with Floating Labels" as the prototype
Choose "Bootstrap Contact Form" as the template or start with a blank form
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:

Email to Receiver (Bootstrap): Sends an email to the form recipient with Bootstrap styling
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

touch5 / t5-bootstrap-form

Maintainers

Package info

Statistics

Security