HTML & CSS Guide

book reader icon
4 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.

<style>
/* 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;
}
</style>

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

<style>
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
</style>

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.

Embed your own fonts in Landing Pages

To embed your own fonts in your landing pages, go to the media section and upload the font you want to include by clicking the button Upload font

Upload font
Upload font

Please note that the following fonts formats are accepted woff, woff2, ttf and eot

All uploaded font files are listed in the media section. To use the font in your landing page please open the font tab by clicking the pen icon of the corresponding font. 

Upload font
Upload font

In the tab you can choose between a source link and the url link. To copy the font link click on the copy icon

Font link to copy
Font link to copy

Go to the landing page you have created, then open the branding section of the landing page and insert the link in the Custom CSS field as shown in the screenshot below. Save the input.

Paste font link in the branding section
Paste font link in the branding 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

Images

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="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>
Caution: Please always use the link to embed from YouTube //youtube.com/embed/1234 and do not use the link from the adress bar //youtube.com/watch?v=1234

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="//player.vimeo.com/video/44454530"></iframe>
</div>

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.
</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="https://www.google.com/maps/embed?pb=!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>
</div>

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.

<script>alert('hello');</script>

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.

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

Optional Form Fields

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">
  • 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.

<script>
    $(function() {
        const urlParams = new URLSearchParams(window.location.search);
        $('input[name=lng]').val(urlParams.get('lng'));
        $('input[name=lat]').val(urlParams.get('lat'));
        $('input[name=accuracy]').val(urlParams.get('accuracy'));
    });
</script>

Call-2-Actions

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 4 months ago