Switch label and input in TYPO3 7.6 form

Question

In TYPO3 7.4 it was possible to switch label and input in a form. For some reason this has been changed in 7.5 and 7.6.

class = form
enctype = multipart/form-data
id = contact
method = post
layout {
            checkbox (
                    <input />
                    <label />
            )
}
prefix = tx_form
confirmation = 0

Is this a known bug or is there a new way to do this?

Any help is very appreciated.

Answer 1

EXT:form was completely rewritten in 7.5. The whole frontend rendering was replaced by extbase and fluid.

Unfortunately, not all changes have been documented, yet. Some weeks ago, I did a major cleanup of the documentation which can be found here: https://docs.typo3.org/typo3cms/extensions/form/. The layout section is even more interesting for you. The linked document will explain, how to set up a view specific layout.

But using .layout stuff via TypoScript is not the best way anymore, when it comes to the customization of the layout in TYPO3 7.6. As the changelog shows, you should use fluid. The following examples depicts a form with some of the new features. I'm setting globally an additional partial path. But it is also possible to set a partial path for a specific form element (see element "900").

plugin.tx_form {
    view {
        # set up additional partial path
        partialRootPaths.20 = EXT:generic_lib/Resources/Private/Extensions/Form/Partials/
    }
}

# build contact form
lib.default_contact_form = FORM
lib.default_contact_form {
    prefix = {$content.mailform.prefix}
    confirmation = 1
    # want to work on a clean base without .layout settings
    compatibilityMode = 0

    postProcessor {
        1 = mail
        1 {
            recipientEmail = {$content.mailform.recipientEmail}

            senderNameField = name
            senderEmailField = email

            ccEmail = TEXT
            ccEmail {
                # depends on the fact that email is required and tested
                data = GP:tx_form_form|{$content.mailform.prefix}|email
                htmlSpecialChars = 1
            }

            subject = TEXT
            subject {
                value = [{$website.title}] - Kontakt
                lang.en = [{$website.title}] - Contact
                lang.es = [{$website.title}] - Contacto
                lang.it = [{$website.title}] - Contatto
            }
        }

        2 = redirect
        2.destination = {$content.mailform.redirectPage}
    }

    10 = TEXTLINE
    10 {
        name = name
        required = required
        type = text
        label.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:name
        placeholder.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:name
    }

    20 = TEXTLINE
    20 {
        name = email
        type = email
        required = required
        label.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:email
        placeholder.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:email
    }

    30 = TEXTAREA
    30 {
        name = message
        cols = 40
        rows = 5
        required = required
        data-foo = bar
        label.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:message
        placeholder.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:message
    }

    900 = TEXTLINE
    900 {
        name = honeypot
        type = text
        label.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:spam
        placeholder.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:spam
        autocomplete = off
        partialPath = FlatElements/Honeypot
        # hide field in confirmation and mail views
        visibleInConfirmationAction = 0
        visibleInMail = 0
    }

    1000 = SUBMIT
    1000 {
        name = submit
        value.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:submit
        class = button
    }

    rules {
        1 = required
        1 {
            element = name
            message.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:required
            error.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:mandatory
        }

        2 = email
        2 {
            element = email
            message = ([email protected])
            error.data = LLL:EXT:my_ext/Resources/Private/Language/Form/locallang.xlf:mandatory_email
        }
    }
}

You can join typo3.slack.com and open the ext-form channel, if you need any further assistance. Over there, you will find more examples and instant help.