The Bahlsen Contact Form

This tool provides a centralised solution to embed a contact form into various brand websites of Bahlsen

The advantages of this centralisation are 1) a unique technical implementation, and 2) an easier and faster implementation of contact forms on the brand pages by 3) by keeping the flexibility of a custom styling and wording.

Solution

The contact form includes the form, texts, styling, validation and display of confirmations and error messages. On the brand websites everything is frontend code (HTML, CSS, and Javascript).
The data is sent via Javascript/AJAX to a central webhook server interface. Behind the webhook is the remaining functionality for sending e-mails or feeding the data directly into a third party system/ticket system.

Embedding

Each form (so each brand website) has its own integration urls to allow different configurations. But the embedding itself is the same for all. All that has to be done is to

  1. include a stylesheet (before all other stylesheet includes),
  2. include a javascript (before all other javascript includes), and
  3. write an empty html tag (at the position where the form should appear).

Stylesheet

<link rel="stylesheet" href="https://contactforms.bahcf.motor.report/MyBrandWebsite/app.min.css" />

Javascript

Please include this javascript before your website specific javascripts, specially if you are using jQuery. Only in that way, the jQuery noConflict mode works properly and the forms javascript won't interfere your websites javascripts.

As well please do not merge, compress or cache the forms javascript, because the forms will have an independent lifecycle and updates could occur independent from the websites update cycles.

<script src="https://contactforms.bahcf.motor.report/MyBrandWebsite/app.min.js"></script>

HTML-tag

Add a HTML-tag, where the form should appear:
<div id="bahlsengroup_contactform" class="bootstrap"></div>

Done!

Please note that the named urls above are (working) examples. To get the real links per website see Brand Websites.

Configuration

The contact form has some configuration options, which can be set before building the contact forms for usage on the brand websites.
Currently we support these options:

  • form.includeRecipientDonationsRequest: The topic for donation requests can be switched on or off.
  • form.includePrivacyCheckbox: A privacy note with a required checkbox, like needed in Poland, can be switched on or off.
  • form.containerSelector: If needed, the html-tag for embedding can be renamed.
  • form.errorMailTo: Usually the form sends the data by a webhook. In case a technical error occurs, the form generated a mailto link with the form data to supply the user a fallback. This option sets the email address to use.
  • datepicker.language / isoCountriesFile: The default localisation for the date picker and the country list can be set.
  • customLocalisation: Each form can get custom texts, which will be delivered ready to use with the embedding code.

Customisation

The contact form has some customisation options, which can be used while embedding the form.

Custom texts

If needed all texts can be overwritten on client side while embedding the form into a website.
Therefor a custom language json file is needed and has to be activated. See more at Localisation.

Custom styling

Due to the frontend technology and the complete embedding, all default styles can be overwritten. See more at Styling.

Technical insides

The form uses jQuery and the jQuery Validation Plugin. We use jQuery.noConflict() to avoid any interference with your website code.

The form uses Bootstrap. To avoid any interference with your website styles we use Isolated-Bootstrap.

All texts are managed by jQuery-i18next. So we have one global default text set, an option to overwrite any text of each form before delivery and another option to overwrite any text on embed time.

Living Example