tritum/form-element-linked-checkbox

Adds a new form element which allows the editor to create a checkbox with a linked label text. This is an extension for TYPO3 CMS.

4.0.0 2023-06-19 07:42 UTC

Requires

• php: ^7.4 || ^8.0
• symfony/polyfill-php80: ^1.15
• typo3/cms-core: ^11.5.0 || ^12.4.0
• typo3/cms-form: ^11.5.0 || ^12.4.0
• typo3/cms-frontend: ^11.5.0 || ^12.4.0

Requires (Dev)

• armin/editorconfig-cli: ^1.5
• ergebnis/composer-normalize: ^2.23
• helmich/typo3-typoscript-lint: ^3.1
• phpstan/phpstan: ^1.3
• saschaegerer/phpstan-typo3: ^1.0
• typo3/coding-standards: ^0.7.1

GPL-2.0-or-later

• Björn Jacob
• Elias Häußler

README

Custom form element "Linked checkbox"

This TYPO3 extension adds a custom form element "Linked checkbox" to the TYPO3 form framework. The user is able to define the link target and the link text.

Known incompatibilities

This extension is not fully compatible with EXT:form-mailtext. Both extensions override the same Fluid templates. Create a copy within your site package, adapt the template accordingly and configure TYPO3 properly to use this template.

Installation and configuration

Preferred Installation

1. Require the extension via composer.
2. Add the static TypoScript configuration to your TypoScript template.

Customization

The extension overrides templates for the following views:

• email to receiver, plain text
• email to receiver, HTML
• email to sender, plain text
• email to sender, HTML
• summary page

This is necessary to render links correctly. By default, the core templates of the form framework escape any HTML in both email and plain text mails. Thus, your users would receive mails with broken links.

If you also override those templates, please adopt your files accordingly.

Usage

Open the TYPO3 form editor and create a new form/open an existing one. Add a new element to your form. The modal will list the new custom form element "Linked checkbox". Provide a label for the checkbox including the link text. Select a page you want to link to.

Combination of label and link

The default label consists of the label itself, followed by a link to the specified page with the given link text.

Example:

• Label: I accept the
• Link text: terms and conditions.
• Output: I accept the <a href="/terms" target="_blank">terms and conditions.</a>

If want to use the link inside your label, define the link position in the label with a character substitution. We highly recommend this way.

Example:

• Label: I have read the %s and accept them.
• Link text: terms and conditions
• Output: I have read the <a href="/terms" target="_blank">terms and conditions</a> and accept them.

You can also use more than one link in the checkbox label. For this, just use the field additionalLinks and provide a combination of Page UID and link text.

Example:

• Label: I have read the %s and %s and accept them.
• Link text: terms and conditions
• Additional links:
  • privacy policy
• Output: I have read the <a href="/terms" target="_blank">terms and conditions</a> and <a href="/privacy-policy" target="_blank">privacy policy</a> and accept them.

Link configuration

You can provide additional link configuration which will be used when generating the link within the label. Note that this can only be defined in the appropriate .form.yaml file but not in the form editor and applies to all generated links.

type: LinkedCheckbox
identifier: consent
label: 'I accept the %s and %s.'
properties:
  pageUid: '67'
  linkText: 'terms and conditions'
  additionalLinks:
    83: 'privacy policy'

renderingOptions:
  linkConfiguration:
    # Additional typolink configuration can be inserted here, e.g.:
    no_cache: 1

For a full list of available configuration take a look at the TypoScript reference.

Override default link target

By default, the link target is set to _blank. If you want to override it, just define a custom link configuration parameter – either an empty string or a custom target/additional parameter configuration:

renderingOptions:
  linkConfiguration:
    parameter: ''

Possible improvements or changes

Instead of creating a new form element, the existing Checkbox form element could have been extended. In order to provide a more complex example, the extension creates a new element.

At the time of writing this, you have to provide a small JavaScript snippet (see \Resources\Public\JavaScript\Backend\FormEditor\ViewModel.js). This snippet is needed to show the custom form element in the form editor. For future TYPO3 versions we are aiming to remove this stumbling block to smoothen the element registration.

Versions

Breaking changes version 4.x

Version 4.x includes the following breaking changes:

• [!!!][TASK] Use timestamps as keys (1feab28)
• [!!!][BUGFIX] Switch EXT:form hook to respect applied variants (543830b)

Breaking changes version 3.x

Version 3.x includes the following breaking changes:

• [!!!][FEATURE] Move link resolving from field partial to hook (d128090)
• [!!!][TASK] Drop deprecated hook usage (90695cf)
• [!!!][TASK] Harden visibility and usage of FormElementLinkResolverHook (4ffb57b)

Credits

This TYPO3 extension was created by Björn Jacob and has been highly improved by Elias Häußler. The idea was born at the TYPO3 CertiFUNcation Day 2017. The audience of my talk kindly asked for such an element. Lightheaded, I said it will not take more than 30 minutes to create such an extension. Unfortunately, I could not make it in this time. It took my 1.5 hours to come up with the initial version code. The JS part gave me a hard time.

Thank you

Jochen Weiland - TYPOholic at jweiland.net - supported this challenge in multiple ways. Thanks for being an outstanding part of our TYPO3 community.

Elias Häußler - Best man, providing awesome PRs and providing the beautiful TYPO3 badges. Use them. Give him some kudos!