Hooks#

Hooks give you the means to insert your own Twig template code into Formie's templates without having to overwrite templates. This allows you to add HTML, Twig variables or even JavaScript as various points of the form's rendering.

Hooks are purely for inserting new content, and cannot be used to prevent something already existing in the Formie template from rendering. To do this, read our theming guide.

Form#

View this template (opens new window).

HookDescription
formie.form.startThe start of the form element, before the form title (if shown).
formie.form.endThe end of the form element.

Example#

Craft::$app->getView()->hook('formie.form.start', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Page#

View this template (opens new window).

HookDescription
formie.page.startThe start of the page, before the page legend (if shown).
formie.page.endThe end of the page.

Example#

Craft::$app->getView()->hook('formie.page.start', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Buttons#

View this template (opens new window).

HookDescription
formie.buttons.beforeBefore the buttons container.
formie.buttons.afterAfter the buttons container.
formie.buttons.startThe start of the buttons container.
formie.buttons.endThe end of the buttons container.
formie.buttons.submit-startThe start of the submit/next page button.
formie.buttons.submit-endThe end of the submit/next page button.
formie.buttons.prev-startThe start of the previous page button (if shown).
formie.buttons.prev-endThe end of the previous page button (if shown).

Example#

Craft::$app->getView()->hook('formie.buttons.before', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Field#

View this template (opens new window).

HookDescription
formie.field.field-beforeBefore the field container.
formie.field.field-afterAfter the field container.
formie.field.field-startThe start of the field container.
formie.field.input-beforeBefore the input container.
formie.field.input-afterAfter the input container.
formie.field.input-startThe start of the input container.
formie.field.input-endThe end of the input container.

Example#

Craft::$app->getView()->hook('formie.field.field-before', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Control Panel - Edit Submission#

When editing a submissions in the control panel, you'll have access to the following hooks.

HookDescription
formie.cp.submissions.editBefore submission detail view’s template blocks.
formie.cp.submissions.edit.contentAfter submission detail view’s main content.
formie.cp.submissions.edit.detailsAfter submission detail view’s existing right sidebar details column.

Example#

Craft::$app->getView()->hook('formie.cp.submissions.edit.content', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Control Panel - Edit Sent Notification#

When viewing a sent notification in the control panel, you'll have access to the following hooks.

HookDescription
formie.cp.sentNotifications.editBefore submission detail view’s template blocks.
formie.cp.sentNotifications.edit.contentAfter submission detail view’s main content.
formie.cp.sentNotifications.edit.detailsAfter submission detail view’s existing right sidebar details column.

Example#

Craft::$app->getView()->hook('formie.cp.sentNotifications.edit.content', function(array &$context) {
    // Add a variable to be accessible in the context object.
    $context['foo'] = 'bar';

    // Optionally return a string
    return '<p>Hey!</p>';
});

Previous ← Events Next Form →