Skip to content

Home

Jump to bottom
Chris Norfolk edited this page Sep 10, 2018 · 27 revisions

Getting Started

This guide documents the process of implementing the Quiddi Affiliate Form. The implementation utilises a HTML import and Web Components to embed the form in your web page.

Version:

All forms are currently on version 0.1 and can be subjected to potential changes and bug removals

Concepts

Before proceeding with this guide there are a number of concepts the designer and developer need to be aware of.

Design

The Flexy Form is a lightweight mobile-first web component that is designed to be a standalone, distraction free web application.

To ensure a distraction free user experience it is recommended that the form is the only element included on the page.

HTML Imports

HTML imports is a technology that allows you to include HTML documents within other HTML documents. This has a number of benefits, including the ability to create a bundle of HTML, CSS, and JavaScript code that can be shared with other applications on the web.

The Flexy Form HTML import comes complete with all the necessary assets to get it working and only requires one additional Javascript file to initialise and embed the form on the page.

HTML imports provide a much cleaner way to load self-contained components into your web pages.

How to Set Up Your Page

Setting up your site to host the embedded form requires the inclusion of three elements to be added to the desired page/s: -

  • HTML Import Link (document head)
  • Custom HTML Element (document body)
  • Javascript File (before the closing body tag)

basic html import setup

1. HTML Import Link

The import link contains the URL of the affiliate form and should be placed in the head of the page.

<link rel="import" href="https://form.dojono.co.uk/embed/pl-form-progress.html">

There are four versions of the form can be imported into your host page. Either with or without the progress bar and are available in English and Polish. The relevant file names are: -

  • en-form-progress.html
  • en-form-no-progress.html
  • pl-form-progress.html
  • pl-form-no-progress.html

2. Custom HTML Element

The custom HTML element should be placed within the body of the page and is constructed as:

<flexy-form></flexy-form>

There are three attributes that can be added to the element to provide customised branding of the form. This enables affiliates to customise and brand the form to match their website design: -

  • Brand - This is the name of your brand/site and will appear as the h1 tag of the landing page (if no logo is provided) and will also be used in the progress bar text.
  • Logo - URL to your logo image file (the max height of the displayed logo will be 80px so a height of 160px is recommended for the file ensuring that it displays correctly on retina devices). If the logo isn't provided the brand name will be used in its place (see above).
  • Colour - There are three alternative colour schemes to choose from:
    • green
    • turquoise
    • blue

These attributes can be added to the flexy-form element as follows:

<flexy-form brand="MY BRAND" logo="/assets/img/logo.svg" colour="turquoise"></flexy-form>

N.B. You can also create your own custom css, which is covered in Custom CSS

3. Javascript

There is only one javascript file that is required to embed the form and it needs to be placed before the closing </body> tag. The script will detect the browsers ability to render HTML imports and load any additional polyfills required.

  <script src="https://form.dojono.co.uk/assets/js/affiliate-form.js"></script>
</body>

Custom CSS

Overriding the default form styling can be achieved by adding a custom local css stylesheet to the head of the page. The stylesheet must be placed below the HTML import link as shown below.

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="import" href="https://form.dojono.co.uk/embed/pl-form-progress.html">
  <link rel="stylesheet" href="/assets/css/custom.css"> <!-- Link to your local stylesheet -->
</head>

To override the defined styles for individual elements use the #form-template selector to target the element you want to change.

body {
  background: white; }

#form-template .brand-title {
  color: #1e7145; }

#form-template .button-next {
  background-color: red; }
  #form-template .button-next:hover {
    background-color: #cc0000; }

#form-template .plus-minus-input {
  background: gray; }

#form-template .plus-minus-input .input-group-button .circle {
  color: white;
  background: black; }
Clone this wiki locally