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

[Feature] Bootstrap 5 layout support #500

Merged
merged 1 commit into from
Jan 9, 2025
Merged

[Feature] Bootstrap 5 layout support #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@

## Installation

```json
"require" : {
"dachcom-digital/formbuilder" : "~5.1.0"
}
```bash
composer require "dachcom-digital/formbuilder":"~5.1.4"
```

Add Bundle to `bundles.php`:
Expand Down Expand Up @@ -93,7 +91,7 @@ Nothing to tell here, it's just [Symfony](https://symfony.com/doc/current/templa
- [Frontend Tips](docs/90_FrontendTips.md)
- [FormBuilder Javascript Plugins](docs/91_Javascript.md)
- [Configuration Flags](docs/100_ConfigurationFlags.md)

- [Custom form templates](docs/110_CustomTemplates.md)
## Upgrade Info
Before updating, please [check our upgrade notes!](UPGRADE.md)

Expand Down
4 changes: 3 additions & 1 deletion config/install/translations/admin.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,8 @@
"form_builder_form_template.bootstrap_3_layout","Bootstrap 3 Layout","Bootstrap 3 Layout"
"form_builder_form_template.bootstrap_4_horizontal_layout","Bootstrap 4 Horizontal Layout","Bootstrap 4 Horizontales Layout"
"form_builder_form_template.bootstrap_4_layout","Bootstrap 4 Layout","Bootstrap 4 Layout"
"form_builder_form_template.bootstrap_5_horizontal_layout","Bootstrap 5 Horizontal Layout","Bootstrap 5 Horizontales Layout"
"form_builder_form_template.bootstrap_5_layout","Bootstrap 5 Layout","Bootstrap 5 Layout"
"form_builder_form_template.form_div_layout","Form Div Layout","Form Div Layout"
"form_builder_type_container.repeater.option.min","Minimum","Minimum"
"form_builder_type_container.repeater.option.max","Maximum","Maximum"
Expand All @@ -145,4 +147,4 @@
"form_builder.output_workflow.channel.email","Email Channel", "E-Mail Channel"
"form_builder.output_workflow.channel.object","Object Channel", "Object Channel"
"form_builder.output_workflow.channel.api","API Channel", "API Channel"
"form_builder.output_workflow.channel.funnel","Funnel Layer", "Funnel Layer"
"form_builder.output_workflow.channel.funnel","Funnel Layer", "Funnel Layer"
10 changes: 9 additions & 1 deletion config/pimcore/config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ form_builder:
value: 'bootstrap_4_horizontal_layout.html.twig'
label: 'form_builder_form_template.bootstrap_4_horizontal_layout'
default: false
bootstrap_5_layout:
value: 'bootstrap_5_layout.html.twig'
label: 'form_builder_form_template.bootstrap_5_layout'
default: false
bootstrap_5_horizontal_layout:
value: 'bootstrap_5_horizontal_layout.html.twig'
label: 'form_builder_form_template.bootstrap_5_horizontal_layout'
default: false
field:
templates:
default:
Expand Down Expand Up @@ -241,4 +249,4 @@ form_builder:
imports:
- { resource: '../backend/base_config.yaml' }
- { resource: '../types/field_types.yaml' }
- { resource: '../types/container_types.yaml' }
- { resource: '../types/container_types.yaml' }
154 changes: 154 additions & 0 deletions docs/110_CustomTemplates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# Custom form templates
mackrais marked this conversation as resolved.
Show resolved Hide resolved
You can use your own custom form templates.

***

## Configuration

If you don't have a configuration file yet, create one `config/packages/form_builder.yaml`

```yaml
form_builder:
form:
templates:
my_custom_layout:
value: 'my_custom_layout.html.twig'
label: 'form_builder_form_template.my_custom_layout'
default: false
```

Then you need to create your own templates in the `templates/bundles/FormBuilderBundle/form/theme/` folder

`templates/bundles/FormBuilderBundle/form/theme/macro/my_custom_layout.html.twig`

```html
{% macro form_builder_form_head() %}
<div class="row">
{% endmacro %}

{% macro form_builder_form_foot() %}
</div>
{% endmacro %}

{% macro form_builder_form_message(flash_messages) %}
{% if flash_messages is not empty %}
<div class="col-12">
{% for label, messages in flash_messages %}
{% for message in messages %}
<div class="alert alert-{{ label == 'error' ? 'danger' : 'success' }}">
{{ message|raw }}
</div>
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% endmacro %}
```

`templates/bundles/FormBuilderBundle/form/theme/my_custom_layout.html.twig`

```html
{% extends 'bootstrap_5_layout.html.twig' %}

{% use '@FormBuilder/form/theme/type/dynamic_multi_file.html.twig' %}
{% use '@FormBuilder/form/theme/type/html_tag.html.twig' %}
{% use '@FormBuilder/form/theme/type/instructions.html.twig' %}
{% use '@FormBuilder/form/theme/type/snippet.html.twig' %}
{% use '@FormBuilder/form/theme/type/container.html.twig' %}
{% use '@FormBuilder/form/theme/type/friendly_captcha.html.twig' %}
{% use '@FormBuilder/form/theme/type/cloudflare_turnstile.html.twig' %}

{%- block form_widget_compound -%}
{%- if form is not rootform -%}
<div {{ block('widget_container_attributes') }}>
{% endif %}
{%- if form is rootform -%}
{{ form_errors(form) }}
{%- endif -%}
{{ block('form_rows') }}
{{ form_rest(form) }}
{%- if form is not rootform -%}
</div>
{% endif %}
{%- endblock form_widget_compound -%}

{% block checkbox_radio_label %}
{# [...] #}
{% endblock checkbox_radio_label %}

{% block help_text_label %}
{# [...] #}
{% endblock help_text_label %}

{% block form_widget_simple -%}
{# [...] #}
{%- endblock form_widget_simple %}

{% block textarea_widget -%}
{# [...] #}
{%- endblock textarea_widget %}

{% block choice_widget -%}
{# [...] #}
{%- endblock choice_widget %}

{% block checkbox_widget -%}
{# [...] #}
{%- endblock checkbox_widget %}

{% block form_builder_honeypot_row -%}
{# [...] #}
{%- endblock form_builder_honeypot_row %}

{% block form_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ parent() }}
</div>
{%- endblock form_row %}

{% block button_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ parent() }}
</div>
{%- endblock button_row %}

{% block checkbox_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
{%- endblock checkbox_row %}

{% block radio_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
{%- endblock radio_row %}

{% block form_builder_friendly_captcha_type_row %}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
<div class="form-group">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endblock form_builder_friendly_captcha_type_row %}

{% block form_builder_cloudflare_turnstile_type_row %}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
<div class="form-group">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endblock form_builder_cloudflare_turnstile_type_row %}

{% block form_builder_container_collection_widget %}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) -%}
{{ parent() }}
{% endblock form_builder_container_collection_widget %}
```

! Do not forget to add translations of `form_builder_form_template.my_custom_layout`

110 changes: 110 additions & 0 deletions templates/form/theme/bootstrap_5_horizontal_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
{% extends 'bootstrap_5_horizontal_layout.html.twig' %}

{% use '@FormBuilder/form/theme/type/dynamic_multi_file.html.twig' %}
{% use '@FormBuilder/form/theme/type/html_tag.html.twig' %}
{% use '@FormBuilder/form/theme/type/instructions.html.twig' %}
{% use '@FormBuilder/form/theme/type/snippet.html.twig' %}
{% use '@FormBuilder/form/theme/type/container.html.twig' %}
{% use '@FormBuilder/form/theme/type/friendly_captcha.html.twig' %}
{% use '@FormBuilder/form/theme/type/cloudflare_turnstile.html.twig' %}

{%- block form_widget_compound -%}
{%- if form is not rootform -%}
<div {{ block('widget_container_attributes') }}>
{% endif %}
{%- if form is rootform -%}
{{ form_errors(form) }}
{%- endif -%}
{{- block('form_rows') -}}
{{- form_rest(form) -}}
{%- if form is not rootform -%}
</div>
{% endif %}
{%- endblock form_widget_compound -%}

{% block help_text_label %}
<small class="text-muted">{{ help_text|trans }}</small>
{% endblock help_text_label %}

{% block form_widget_simple -%}
{{ parent() }}
{% if help_text %}
{{ block('help_text_label') }}
{% endif %}
{%- endblock form_widget_simple %}

{% block textarea_widget -%}
{{ parent() }}
{% if help_text %}
{{ block('help_text_label') }}
{% endif %}
{%- endblock textarea_widget %}

{% block choice_widget -%}
{{ parent() }}
{% if help_text %}
{{ block('help_text_label') }}
{% endif %}
{%- endblock choice_widget %}

{% block checkbox_widget -%}
{{ parent() }}
{% if help_text %}
{{ block('help_text_label') }}
{% endif %}
{%- endblock checkbox_widget %}

{% block form_builder_honeypot_row -%}
{{- form_widget(form) -}}
{%- endblock form_builder_honeypot_row %}

{% block form_row -%}
{% set form_row_class = attr['data-template'] is defined ? attr['data-template'] : 'col-12' %}
{% if form.vars.is_form_builder_container_block is defined %}
{% set form_row_class = 'formbuilder-container-block' %}
{% endif %}
<div class="formbuilder-row {{ form_row_class }}">
{{ parent() }}
</div>
{%- endblock form_row %}

{% block button_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ parent() }}
</div>
{%- endblock button_row %}

{% block checkbox_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ parent() }}
</div>
{%- endblock checkbox_row %}

{% block radio_row -%}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
{{ parent() }}
</div>
{%- endblock radio_row %}

{% block form_builder_friendly_captcha_type_row %}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
<div class="form-group">
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
</div>
{% endblock form_builder_friendly_captcha_type_row %}

{% block form_builder_cloudflare_turnstile_type_row %}
<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
<div class="form-group">
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
</div>
{% endblock form_builder_cloudflare_turnstile_type_row %}

{% block form_builder_container_collection_widget %}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) -%}
{{- parent() -}}
{% endblock form_builder_container_collection_widget %}
Loading
Loading