Deutsch
English
Español
Português
ItalianoHTML & 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.
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.
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
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
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
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
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
You can integrate a responsive iframe with a Google Maps location.
- Find your location on Google Maps and copy the "Share > Embed a map" HTML code (iframe).
- 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.
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.
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
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.
