Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to modify form templates in custom theme #189

Merged
merged 3 commits into from
May 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions docs/themes/forms.rst
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,33 @@

To provide custom Form field templates or to manipulate the Form body, create the following directory structure::

Field/ <– for customizing form field types
html/
MauticFormBundle
Builder <– for customizing the form structure itself
Field <– for customizing form field types
MauticFormBundle/
Builder/
_style.html.twig <– for customizing CSS for Form
form.html.twig <– for customizing the form structure itself

Copy from ``app/bundles/FormBundle/Views/Builder/form.html.php`` into the Theme’s Builder directory and/or one or more of the fields templates in ``app/bundles/FormBundle/Views/Field/*.html.php`` into the Theme’s `field` directory. Then customize to the desired layout. Note that these must be PHP templates.
Copy from ``app/bundles/FormBundle/Resources/views/form.html.twig`` into the Theme’s Builder directory and/or one or more of the fields templates in ``app/bundles/FormBundle/Views/Field/*.html.php`` into the Theme’s `field` directory. Then customize to the desired layout.

You can add a custom style sheet to the Form by adding a ``style.html.twig`` with your custom CSS to ``html/MauticFormBundle/Builder``. The best way is to copy the content of the default Form styles and modify them to your needs.
You can add a custom style sheet to the Form by adding a ``_style.html.twig`` with your custom CSS to ``html/MauticFormBundle/Builder``. The best way is to copy the content of the default Form styles and modify them to your needs.

Customize field types
*********************

Create a new template in the `Field` directory to change HTML generated by field types.
The best way is to copy the original template from `app/bundles/FormBundle/Resources/views/Field/*.html.twig` and modify it.


How to modify templates including base `text.html.twig` template
================================================================

Several templates are including the base `text.html.twig` template so you may need modify it. In that case you also need to modify templates including it. Change the `include` statement.

For example `email.html.twig` including:

{{ include('@MauticForm/Field/text.html.twig', { ...

Check warning on line 31 in docs/themes/forms.rst

View workflow job for this annotation

GitHub Actions / prose

[vale] reported by reviewdog 🐶 [Google.Ellipses] In general, don't use an ellipsis. Raw Output: {"message": "[Google.Ellipses] In general, don't use an ellipsis.", "location": {"path": "docs/themes/forms.rst", "range": {"start": {"line": 31, "column": 54}}}, "severity": "WARNING"}

you need change `@MauticForm` to you theme, for example:

{{ include('@themes/MyTheme/Field/text.html.twig', { ...

Check warning on line 35 in docs/themes/forms.rst

View workflow job for this annotation

GitHub Actions / prose

[vale] reported by reviewdog 🐶 [Google.Ellipses] In general, don't use an ellipsis. Raw Output: {"message": "[Google.Ellipses] In general, don't use an ellipsis.", "location": {"path": "docs/themes/forms.rst", "range": {"start": {"line": 35, "column": 58}}}, "severity": "WARNING"}
Loading