​PageObject: Contact form

This PageObject renders a customizable contact form. Users can configure which fields show up, the email address the submitted values are sent to and the feedback message which is shown after submitting the form successfully.

Due to legal issues it is not possible to add a custom design to the email sent by the form. It is also not possible to send a copy of the data to the entered email address.

HTML example (system generated)

<div class="fx_po_form fx_po_contactform" id="fx_po_contactform_UNIQUE-FORM-ID">
    <form id="fx_contactform_request_UNIQUE-FORM-ID">
        <div id="cms_page_object_contact_form_request">
            <div>
                <label for="cms_page_object_contact_form_request_name">Name</label>
                <input id="cms_page_object_contact_form_request_name" name="cms_page_object_contact_form_request[name]" maxlength="150" type="text">
            </div>
            <div>
                <label for="cms_page_object_contact_form_request_company">Company</label>
                <input id="cms_page_object_contact_form_request_company" name="cms_page_object_contact_form_request[company]" maxlength="150" type="text">
            </div>
            <div>
                <label for="cms_page_object_contact_form_request_email">Email address</label>
                <input id="cms_page_object_contact_form_request_email" name="cms_page_object_contact_form_request[email]" maxlength="150" type="email">
            </div>
            <div>
                <label for="cms_page_object_contact_form_request_phone">Phone number</label>
                <input id="cms_page_object_contact_form_request_phone" name="cms_page_object_contact_form_request[phone]" maxlength="50" type="tel">
            </div>
            <div>
                <label for="cms_page_object_contact_form_request_message">Message</label>
                <textarea id="cms_page_object_contact_form_request_message" name="cms_page_object_contact_form_request[message]" maxlength="2000"></textarea>
            </div>
            <input id="cms_page_object_contact_form_request__token" name="cms_page_object_contact_form_request[_token]" value="UNIQUE-FORM-TOKEN" type="hidden">
        </div>
        <button type="button" id="cms_page_object_contact_form_request_save" name="cms_page_object_contact_form_request[save]" class="fx_btn" onclick="sendFormUNIQUE-FORM-ID(); return false;">Absenden</button>
    </form>
</div>

Alternatively editors can select, that instead of labels placeholder should be used. The generated HTML code differs in this case:


<div class="fx_po_form fx_po_contactform fx_po_form_placeholders" id="fx_po_contactform_UNIQUE-FORM-ID">
    <form id="fx_contactform_request_UNIQUE-FORM-ID">
        <div id="cms_page_object_contact_form_request">
            <div>
                <input id="cms_page_object_contact_form_request_name" name="cms_page_object_contact_form_request[name]" maxlength="150" type="text" placeholder="Name">
            </div>
            <div>
                <input id="cms_page_object_contact_form_request_company" name="cms_page_object_contact_form_request[company]" maxlength="150" type="text" placeholder="Company">
            </div>
            <div>
                <input id="cms_page_object_contact_form_request_email" name="cms_page_object_contact_form_request[email]" maxlength="150" type="email" placeholder="Email address">
            </div>
            <div>
                <input id="cms_page_object_contact_form_request_phone" name="cms_page_object_contact_form_request[phone]" maxlength="50" type="tel" placeholder="Phone number">
            </div>
            <div>
                <textarea id="cms_page_object_contact_form_request_message" name="cms_page_object_contact_form_request[message]" maxlength="2000" placeholder="Message></textarea>
            </div>
            <input id="cms_page_object_contact_form_request__token" name="cms_page_object_contact_form_request[_token]" value="UNIQUE-FORM-TOKEN" type="hidden">
        </div>
        <button type="button" id="cms_page_object_contact_form_request_save" name="cms_page_object_contact_form_request[save]" class="fx_btn" onclick="sendFormUNIQUE-FORM-ID(); return false;">Absenden</button>
    </form>
</div>

Form fields

Editors can configure which fields the form should contain. Available options are:

  • name (input type="text")
  • company (input type="text")
  • email address (input type="email")
  • phone number (input type="tel")
  • message (textarea)

As you cannot be sure, which fields the editors may configure, your CSS should contain styles for all of them.

Each form field is rendered inside a <div> tag and consists of a <label> and a <input> tag.

Every form needs at least an email address or a phone number field.

HTML example of a form field block (system generated)

<div>
    <label for="cms_page_object_contact_form_request_email">Email address</label>
    <input id="cms_page_object_contact_form_request_email" name="cms_page_object_contact_form_request[email]" maxlength="150" value="dfsdf" type="email">
</div>

Submitting the form

The form is submitted with AJAX, so it won't work in environments with deactivated JavaScript. If you are unsure whether your users may have deactivated JavaScript, it is a good practice to hide all PageObjects Form with CSS and force them via JavaScript to be visible again.

The JavaScript code is inserted with every form. If you have more than one form on a single page, the code is added also multiple times—but there will be no interferences between the forms and scripts.

If the form submission was successful a message will be shown instead of the form fields: Everything within the <form> tag will be replaced with the configured message string surrounded by a <span> tag.

HTML example of a form after submission (system generated)

<div class="fx_po_contactform" id="fx_po_contactform_UNIQUE-FORM-ID">
    <form id="fx_contactform_request_UNIQUE-FORM-ID">
        <span class="fx_po_form_feedback fx_po_contactform_feedback">FEEDBACK MESSAGE</span>
    </form>
</div>

Validation and errors

The form input is validated on server side. For email addresses and phone numbers the syntax of the input string is also validated. Errors are displayed within an <ul> tag above the field where the wrong or missing input has occurred.

HTML example of an error markup (system generated)

<div>
    <label for="cms_page_object_contact_form_request_email">Email address</label>
    <ul>
        <li>This is not a valid email address</li>
    </ul>
    <input id="cms_page_object_contact_form_request_email" name="cms_page_object_contact_form_request[email]" maxlength="150" value="dfsdf" type="email">
</div>
​This PageObject renders as block element.

​Demo content

Available parameters:

  • title: [string] Optional, default is “Contact form”.
  • fields: [string[]] Object with field names as keys and labels as values. Available field names are `name`, `company`, `email`, `phone`, `message`, `privacyCheckbox`.
    The default configuration is
    { "name": "Name", "email": "Email", "message": "Message" }
  • placeholderInsteadOfLabels: [bool] False if labels shall be used, true if placeholders shall be used.
  • submit: [string] Label of the submit button. Optional, default is “Submit form”.

Configuration example

{{ fx_page.slot("SLOT_NAME", _context, {"content": [
   {"type": "contactform"}
] }) }}
​For more details how to implement demo content please refer to the Demo Content Documentation.