Skip to content

Contact Form

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

Usage requires adding HTML elements with slot="form" attribute. This is where form elements such as inputs and buttons should be provided. This webcomponent is used in contact_form module.

Attributes

Attribute name Type Default Description
module-instance-id number null A unique id representing the instance of the module in which the webcomponent is used. It is necessary when there are multiple contact forms

DOM events

This webcomponent listens to the following DOM events:

Example

<contact-form module-instance-id="1">
    <div slot="form">
        <input type="text" placeholder="name" name="name" />
        <input type="text" placeholder="email" name="email"/>
        <input type="text" placeholder="subject" name="subject" />
        <input type="text" placeholder="content" name="content" />
        <button>Send</button>
    </div>
</contact-form>

    <contact-form module-instance-id="1">
        <form-connector id="contact-form-connector-1" submit-strategy="frontApi">
            <form id="contact-form-1" action="/webapi/front/pl_PL/contact" method="post">
                <input type="text" placeholder="name" name="name" />
                <input type="text" placeholder="email" name="email"/>
                <input type="text" placeholder="subject" name="subject" />
                <input type="text" placeholder="content" name="content" />
                <button>Send</button>
            </form>
        </form-connector>
    </contact-form

Modules reference