Custom fields to NL Form Plugin

This is an example plugin to add custom fields to your Shopware 6 newsletter subscription form. Used in conjunction with the Maileon plugin, the fields created can be submitted to Maileon as contact fields. The added fields are not stored in Shoprenter.

Starting from plugin version 1.3.0, it is possible to submit standard fields through the form. In this case, version 1.1.0 should be used; older plugin versions are only compatible with version 1.0.0.

Installation

	File	Modified
Labels No labels Preview View	ZIP Archive XQueueShopware6CustomForm_v1_0_0.zip	Mar 16, 2023 by Zsolt Mannheim
Labels No labels Preview View	ZIP Archive XQueueShopware6CustomForm_v1_1_0.zip	Jan 26, 2024 by Zsolt Mannheim

Download All

The installation package can be downloaded here.

You can upload the package in the Shopware 6 admin interface as follows:

Go to Extensions → My extensions
Click to the Upload extension button
Select the installation package and open
After install, activate the plugin

Change fields

Go to the /custom/plugins/XQueueCustomForm/src/Resources/views/storefront/element/cms-element-form/form-types/newsletter-form.html.twig

Here you can add extra fields to the form:

<div class="{{ formRowClass }}">
  {% block cms_form_newsletter_input_custom_field1 %}
      {% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
          with {
          fieldName: 'customField1',
          type: 'text',
          additionalClass: 'col-12',
          label: 'Custom Field 1',
          placeholder: 'some custom field data'
      }
      %}
  {% endblock %}
</div>

fieldName: Here you have to enter the name of the field, this will be the identifier, it will not be visible on your frontend. This will also be the name of the custom contact field in Maileon. If no custom contact field with this name exists in Maileon, the Maileon Plugin will create it. In the settings of the Maileon plugin you have to enter this name, if there are more than one field the names have to be separated by semicolons (User documentation | Configuration ). Must not contain whitespaces!
type: Here you can specify the field type. You can set any type, but in Maileon the custom contact field type will be string!
label: The name of the field, this will appear on the frontend.
placeholder: To set the placeholder of the field.

Send standard fields (only with plugin version 1.3.0 and above)

We can submit standard fields with the following field names:

Field name	Standard field	Remark

Field name	Standard field	Remark
`address`	`ADDRESS`	String, max 255
`birthday`	`BIRTHDAY`	Allowed patterns: YYYY-MM-DD
`city`	`CITY`	String, max 255
`country`	`COUNTRY`	String, max 255
`gender`	`GENDER`	Allowed values: m (male), f (female), or d (divers)
`hnr`	`HNR`	String, max 255
`nameday`	`NAMEDAY`	Allowed patterns: YYYY-MM-DD
`company`	`ORGANIZATION`	String, max 255
`region`	`REGION`	String, max 255
`state`	`STATE`	String, max 255
`zip`	`ZIP`	String, max 255

Examples

Birthday

<div class="row g-2">
    {% block cms_form_newsletter_input_birthday %}
        {% sw_include '@Storefront/storefront/element/cms-element-form/form-components/cms-element-form-input.html.twig'
            with {
            fieldName: 'birthday',
            type: 'date',
            additionalClass: 'col-12',
            label: 'Birthday'
        }
        %}
    {% endblock %}
</div>

Gender

<div class="row g-2">
    {% block cms_form_select_gender_content_label %}
        <label class="form-label" for="form-Gender">
            Gender
        </label>
    {% endblock %}
    {% block cms_form_select_gender_content_select %}
        <select name="gender"
                id="form-Gender"
                class="form-select"
                style="margin-bottom: 20px;">
            <option value="m">
                Male
            </option>
            <option value="f">
                Female
            </option>
            <option value="d">
                Diverse
            </option>
        </select>
    {% endblock %}
</div>