KLforExpats - Insurance broker portal with a built-in lead management

[schwarzdesign]

We relaunched the website of German health insurance broker KLforExpats, who provide a service that is specifically tailored for expatriates in Germany. The website includes very extensive, completely custom-built forms for data entry and multiple custom interfaces for management and handling of requests. Concept, design, branding and development by schwarzdesign.

If you are moving to Germany and need health insurance, KLforExpats is the contact for you!

Read on below for some technical insights.

Features

• A beautful, streamlined website including an extensive knowledge area (Expert Corner)
• Custom-built forms for initial contact and data collection
• A central database of clients / leads
• An analytics dashboard that displays key performance indicators based on the lead database
• A client / lead template with multiple workflow-related actions
• Automatic generation of Trello cards for new leads using the Trello API

Notable modules

• Dashboard
• TrelloWire
• ProFields
• Hanna Code
• ListerPro
• Cacheable Placeholders
• Cache Control
• Automatically link page titles
• Unique Image Variations
• Regular shoutout to Tracy Debugger

Building custom forms based on ProcessWire fields

The forms on the site are built from scratch, which is a lot of work but opens up a lot of fine-tuning that isn't possible with form builder modules or services. There are a couple of interesting features of the form system we built. In particular, using built-in HTML5 features for form input and constraint validation makes developing simple, cross-browser and mobile-friendly forms a breeze.

• The forms make heavy use of modern input types and attributes. In particular, all date fields use the date input type, which is supported in all major browsers except Safari. This way, the forms come with good accessibility out of the box. A cleaner solution than using some rickety jQuery UI datepicker.
• Client-side validation is pure HTML5 as well. Since each form consists of multiple steps, the validation is triggered when the user tries to go to the next step. This is easily done by iterating through the inputs in the current step and calling reportValidity on them. The browser takes care of reporting errors – no need for a popup library.
• We use ProcessWire's field settings to generate field labels and validation attributes (like the required flag, minimum and maximum length settings etc.). This way, changes to the fields are always kept in sync between the frontend and the backend.
• For server-side validation, we used an open source library (rakit/validation). We added some custom rules to integrate it with ProcessWire's CSRF protection, a honeypot spam protection, and file uploads using WireUpload. This way, validation and error reporting can be done through a uniform interface.

Using custom page classes as data models

New leads are represented by ProcessWire pages. We ended up writing a lot of custom functionality for those pages – for example, automatically generating a vCard based on the contact information entered in the form. We used a custom page class as a nice way to group those methods and be able to call them from anywhere.

<?php
namespace schwarzdesign\Page;

use Processwire\Page;

class ClientPage extends Page
{
    /*** methods here */
}

Since each lead is a regular page, we used the regular page template to display all the data collected for this lead as well as to provide an interface to perform lead-related actions, like create form access keys, generate PDF protocols, etc. Since we use Twig as a templating layer, we ended up with a MVC-like approach, where the PHP-template is only used to call the appropriate methods of the ClientPage based on URL parameters.

---

You can read more on the process and the client-facing functionality on the KLforExpats project showcase on our website (in German).

 

[Sergio]

Nice project! Congratulations! Is there feedback from the client about Processwire? They knew it before this project?

On thing that I noted is that on Chrome / Windows 10, the font rendering a bit off, making it hard to read (especially the lower "a" and s). Could you check?

[schwarzdesign]

@Sergio Thanks! We suggested ProcessWire to the client, they were very happy with it ? Though they mostly interact with custom interfaces.

Thanks for the report! I checked on a Windows 10 device but can't replicate the rendering issue. The site uses Rubik, though locally installed versions of the font take precedence. Maybe you have an older version of the font installed on your Computer? I know there were a couple of issues with older versions of Rubik ...

[Sergio]

18 hours ago, schwarzdesign said:

Maybe you have an older version of the font installed on your Computer?

Good call. I checked and I had Rubik installed so I disabled it but the problem remained, maybe I need to restart the computer to work, but I can't do it right now. But I also checked again the website and the only problem appears to be on 300 font-weight. 400 or more are fine ( I changed it to 400 on the Body as a test, screenshot attached). 

[Sergio]

Actually, ignore that! After closing Chrome and opening it again the font-weight 300 is fine! So it was a cache on its end. The real problem seems to be my local Rubik version like you suspected!

[Jan Romero]

Please teach Mirja the difference between ´, ` and ’, or install Super Smartypants.