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.

Sign up for GitHub

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

Jump to bottom

How to modify form templates in custom theme #189

Merged
merged 3 commits into from
May 24, 2024
Merged

How to modify form templates in custom theme #189

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08e1f9f
How to modify form templates in custom theme
luk4s May 23, 2024
4997b84
Merge branch 'mautic:5.x' into custom_themes-form
luk4s May 24, 2024
4f6fc17
Apply suggestions from code review
luk4s May 24, 2024
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
33 changes: 28 additions & 5 deletions docs/themes/forms.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,34 @@

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
*********************

For change HTML generated by field types, you can create a new template in the `Field` directory.

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

View workflow job for this annotation

GitHub Actions / prose 

[vale] reported by reviewdog 🐶
[Google.FirstPerson] Avoid first-person pronouns such as ' I '.

Raw Output:
{"message": "[Google.FirstPerson] Avoid first-person pronouns such as ' I '.", "location": {"path": "docs/themes/forms.rst", "range": {"start": {"line": 20, "column": 98}}}, "severity": "WARNING"}
luk4s marked this conversation as resolved.
Show resolved Hide resolved
I recommend copy the original template from `app/bundles/FormBundle/Resources/views/Field/*.html.twig` and modify it.
luk4s marked this conversation as resolved.
Show resolved Hide resolved


How modify templates including base `text.html.twig` template
=============================================================
luk4s marked this conversation as resolved.
Show resolved Hide resolved

Several templates including the base `text.html.twig` template.
So you will want modify it, but you also need modify templates including it - change `include` statement.

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

View workflow job for this annotation

GitHub Actions / prose 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/themes/forms.rst", "range": {"start": {"line": 28, "column": 8}}}, "severity": "WARNING"}
luk4s marked this conversation as resolved.
Show resolved Hide resolved

For example `email.html.twig` including::
luk4s marked this conversation as resolved.
Show resolved Hide resolved

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

you need change `@MauticForm` to you theme, for example::
luk4s marked this conversation as resolved.
Show resolved Hide resolved

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