This website uses necessary cookies to ensure that our website is ideally usable. We do not use cookies that process personal data without your prior consent. Read our Cookie Policy

HTML & CSS Guide

book reader icon
3 Minutes
facebook logo gray
linkedin logo gray
mail logo gray
HTML & CSS Guide

When creating a Landing Page you can add any HTML or CSS code in your text area boxes. The following guide gives you some ideas about styling possibilities and how to embed multimedia content.

How to embed CSS

You can embed custom CSS in your landing pages, in the branding section or in the custom css fields. Here are some example CSS code snippets.

/* Change Background Color */
body {background:#000}

/* Background Gradient */
body {background: linear-gradient(to right, red , yellow)}

/* Embed Background Image */
body {background: url("/img/background-example.jpg") no-repeat}

/* Fullscreen Background Image */
body {

  background-image: url("/img/background-example.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

/* Change Heading Text Color */
h1 {color:#f4f !important}

/* Change Type Font */
div {
    font-family: "Times New Roman", Georgia, Serif;

Learn more about CSS in the W3 Schools CSS Tutorial

Style Landing Page elements

With your browser's inspector you can select an element in the landing page. After you have selected an element, the tag and the class of the element will be shown in the inspector window below.

In the branding section of a landing page, you can now define your own style for this element in the "Custom CSS" field. The following example shows how you can change the font size of the selected heading element h1.headline.

If you want to re-use your CSS code for other landing pages you can save the CSS code in a css template by clicking on the Add button.

Browser element inspector
Browser inspector

Embed Google Fonts

@import url('//');
body{font-family: 'Open Sans', sans-serif;}

Use @import directive always at the very beginning of your css. Learn more about Google Fonts

Please note that in Europe since the 25th of May 2018 the new General Data Protection Regulation applies. If you integrate content from external servers (such as Google Fonts) on your landing pages, you should include a notice in your privacy policy with each service. You can put a personalized link to your privacy policy on every landing page in the GDPR section.

Always test your CSS Code

Before you insert CSS code into your page, always test it for correctness under the CSS Validator

How to embed multimedia elements


Media Library
Images in the media library can be embedded in any landing page

In the Media Library you can upload images or pdf documents. After uploading a file you can click on the pencil icon of the image and you will see an HTML snippet to embed the document on any of your landing pages e.g.

<img alt="qr icon" src="/img/qr-icon32.png"/>

YouTube Videos

Youtube video embedded
Embedded Youtube video on a landing page

Integrate videos from YouTube, Vimeo or any other video platform easily. The following code snippet shows how to embed a YouTube video via iFrame in your Landing Page. The video is automatically re-sized to the screen width.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//"></iframe>
Caution: Please always use the link to embed from YouTube // and do not use the link from the adress bar //

Vimeo Videos

Vimeo video frame embed
Embedded Vimeo video

The following code snippet shows how to embed a Vimeo video via iFrame in your Landing Page. The video is automatically re-sized to the screen width.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//"></iframe>

MP4 Videos

html video embed
Embedded MP4 Video

You can also use the HTML5 video tag to embed video in mp4 format

More info and additional parameters on HTML5 video embedding.

<video width="100%" controls>
  <source src="/resources/sample.mp4" type="video/mp4">
  Your browser does not support HTML5 video.

Google Maps

Google Maps embed
Embedded Google Maps

You can integrate a responsive iframe with a Google Maps location.

  1. Find your location on Google Maps and copy the "Share > Embed a map" HTML code (iframe).
  2. Use the following code on your landing pages to display the responsive Google Map.
<div class="google-maps">
    <iframe src="!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>

Embed JavaScript

You can include JavaScript code in text areas. However, make sure that you insert the code as one liner. Line Breaks will cause JavaScript errors.


Embed iFrames

Include iFrames e.g. in the "About me" section of your mobile business card.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Embed external Websites

If you want to include an external website in your custom landing page, you have to pull all external resources like js, css and images into your landing page. To do so there is a usefull tool on Github - Inliner

Custom forms

Lead Landing Page

To create a form on a landing page and send the data to our server you can create a lead landing page. 

Lead form register
Custom form to collect data

Retrieve form data

You can then query the transmitted form data for a landing page collectively under the menu item Leads or via the API. 

Leads download
Download leads

How to create a custom form with HTML & JavaScript

However, you can also create a form and send the form data easily to our server by using the following snippet on a custom landing page.

    $(function() {
        $('#submit').on('click', function() {
            $.post("/api/post", $("form").serialize()).done(
                function(data) {
                    alert('Thank you for registration!');
            return false;
    <label>Your Name</label>
    <input name="name">
    <label>Your E-Mail</label>
    <input name="email">    
    <a href="#" id="submit">Register</a>

Optional Form Fields

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="">
<input name="rewardurl" type="hidden" value="">
  • With the field notify you can enable or disable E-Mail notifications when a new lead was generated
  • With the field webhook you can set an external URL to which the new generated lead will be submitted
  • With the field rewardurl you can set an external URL that the user will receive per e-mail after subscribing
<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

The fields lng, lat and accuracy can be filled with the following JS snippet if the GPS function is activated.

    $(function() {
        const urlParams = new URLSearchParams(;


Add call-2-action
Add call-2-action button to a landing page

You can add call-2-action buttons on any landing page right from the landing page editor by clicking the Add icon. A call-2-action button may link to a web site, a PDF document, initiates a call or sends an e-mail. You can learn more in our What is a call-2-action (C2A) button tutorial.

Last update 7 months ago

Replace social icons on my QR Code Business Card

Upload the logos that you want to use in the media section and create a template from the branding section.

Replace social icons on my QR Code Business Card

What is a call-2-action (C2A) button?

Call-2-action buttons on a landing page offer a user a specific action e.g. initiate call or download a PDF that will be triggered when the button is pressed.

What is a call-2-action (C2A) button?