Loading...
Skip navigation

Create a simple form

This How-To shows you, how you can define a very simple contact form. You just have to insert some Setup-TypoScript, optionally define TypoScript-Constants for configuration and make your form selectable by using Page-TypoScript.

TypoScript setup

The complete definition of the form is done by the following Setup-TypoScript:

plugin.tx_fluidform.settings.forms.contactSmall < plugin.tx_fluidform.presets.forms.default
plugin.tx_fluidform.settings.forms.contactSmall {
    configuration {
        ajax = 1
    }
    # Fields
    fieldsets {
        complete < plugin.tx_fluidform.presets.fieldsets.normalWithoutLabel
        complete {
            fields {
                message < plugin.tx_fluidform.presets.fields.textarea
                message {
                    required = 1
                    label = Nachricht
                    placeholder =
                    validation {
                        NotEmpty = Bitte füllen Sie dieses Feld aus
                    }
                }
                name < plugin.tx_fluidform.presets.fields.inputName
                name {
                    required = 1
                    label = Name
                    placeholder =
                    validation {
                        NotEmpty = Bitte geben Sie Ihren Namen ein
                    }
                }
                email < plugin.tx_fluidform.presets.fields.inputEmail
                email {
                    required = 1
                    label = E-Mailadresse
                    placeholder =
                    validation {
                        NotEmpty = Bitte geben Sie Ihre E-Mailadresse ein
                        Email = Bitte geben Sie eine gültige E-Mailadresse ein
                    }
                }
                required < plugin.tx_fluidform.presets.fields.honeypot
            }
        }
        buttons < plugin.tx_fluidform.presets.fieldsets.buttons
        buttons {
            fields {
                submit < plugin.tx_fluidform.presets.fields.submit
                submit {
                    css.class.field = btn btn-primary
                    value = Senden
                }
            }
        }
    }
    # Finisher
    finisher {
        database < plugin.tx_fluidform.presets.finisher.database
        database {
            active = {$themes.configuration.extension.fluid_form.contactSmall.database.active}
            storagePid = {$themes.configuration.extension.fluid_form.contactSmall.database.storagePid}
        }
        mail < plugin.tx_fluidform.presets.finisher.mail
        mail {
            active = 1
            from {
                name = {$themes.configuration.extension.fluid_form.contactSmall.mail.from.name}
                email = {$themes.configuration.extension.fluid_form.contactSmall.mail.from.email}
            }
            to {
                0 {
                    name = {$themes.configuration.extension.fluid_form.contactSmall.mail.to.0.name}
                    email = {$themes.configuration.extension.fluid_form.contactSmall.mail.to.0.email}
                }
            }
        }
    }
    # Messages
    messages {
        successfullySent {
            title = Anfrage wurde erfolgreich verschickt!
            message = Wir werden uns in Kürze mit Ihnen in Verbindung setzen.
        }
        validationFailed {
            title = Fehler beim Versenden!
            message = Bitte füllen Sie die erforderlichen Felder aus.
        }
    }
}

TypoScript constants

For a better configuration you can define some TypoScript-Constants:

# customcategory=form=LLL:EXT:fluid_form/Resources/Private/Language/locallang.xlf:tx_fluidform_constants.category
themes.configuration.extension.fluid_form {
    # customsubcategory=form_contact_small=Small contact form
    contactSmall {
        mail {
            from {
                # cat=form/form_contact_small/100; type=string; label= Mail from: Name from the sender
                name = Fluid-Form
                # cat=form/form_contact_small/110; type=string; label= Mail from: Email from the sender
                email = fluid-form(at)t3co(dot)de
            }
            to {
                0 {
                    # cat=form/form_contact_small/200; type=string; label= Mail to: Name from the receiver
                    name = Fluid form
                    # cat=form/form_contact_small/210; type=string; label= Mail to: Email from the receiver
                    email = fluid-form-to0(at)t3co(dot)de
                }
            }
        }
        database {
            # cat=form/form_contact_small/300; type=options[0,1]; label= Activate saving mails in database
            active = 0
            # cat=form/form_contact_small/310; type=int+; label= Storage container mails in database
            storagePid = 0
        }
    }
}

Page TypoScript (tsconfig)

Finally you need the following Page-TypoScript in order to make your form selectable in Backend:

# Available forms
forms {
    contactSmall = This is out small form
}

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
C9X_________9________
S______I____4_T___38F
6WA___WUE___X4Y______
__U____3______S___3A8
Q6H___________6______