Newsletter Form

The <newsletter-form> webcomponent is used to render a submittable newsletter form.

Usage requires adding HTML elements with slot="form" attribute in which form elements such as inputs and buttons should be provided. It is used in newsletter module.

Attributes

Attribute name	Type	Default	Description
module-instance-id	number	null	A unique instance id of the instance of the module the webcomponent is used in. It is needed in case there are multiple newsletter forms

DOM Events

This webcomponent listens to the following DOM events:

• submit
• submitError
• formInvalid

Example

sourceoutput

<newsletter-form module-instance-id="1">
    <div slot="form">
        <div class="newsletter__controls-wrapper">
            <control-connector class="control" email>
                <h-control>
                    <h-control-label class="control__label label_required">
                        <label class="label" for="newsletter-email">
                            Your e-mail address
                        </label>
                    </h-control-label>

                    <h-control-content class="control">
                        <h-control-element class="control__element">
                            <h-input controlId="newsletter-email" controlName="email">
                                <h-input-control></h-input-control>
                            </h-input>
                        </h-control-element>

                        <control-errors></control-errors>
                    </h-control-content>
                </h-control>
            </control-connector>

            <button type="submit" class="btn btn_primary newsletter__submit-button mb-xs-2">Join the newsletter</button>
        </div>
    </div>
</newsletter-form>

<newsletter-form module-instance-id="1">
    <form-connector id="newsletter-form-connector-1" submit-strategy="frontApi">
        <form id="newsletter-form-1" action="/webapi/front/pl_PL/subscribers" method="post">
            <div class="newsletter__controls-wrapper">
                <control-connector class="control" email>
                    <h-control>
                        <h-control-label class="control__label label_required">
                            <label class="label" for="newsletter-email">
                                Your e-mail address
                            </label>
                        </h-control-label>

                        <h-control-content class="control">
                            <h-control-element class="control__element">
                                <h-input controlId="newsletter-email" controlName="email">
                                    <h-input-control></h-input-control>
                                </h-input>
                            </h-control-element>
                            <control-errors></control-errors>
                        </h-control-content>
                    </h-control>
                </control-connector>

                <button type="submit" class="btn btn_primary newsletter__submit-button mb-xs-2">Join the newsletter</button>
            </div>
        </form>
    </form-connector>
</newsletter-form

Modules reference

• newsletter