victorzen

Change "#lp-pom-button-21" for your button's id and change "left" for "right" accordingly.

<style>
#lp-pom-button-21 .label{
  text-align: left;
}
</style>

victorzen

Change "YourFieldName" for the field name in your form and change the information to your own language and prefered date format. This example is in French :) Set placement to "Head"

<script>
$(function() {
$( "#YourFieldName").datepicker({
    altField: "#datepicker",
    closeText: 'Fermer',
    prevText: 'Précédent',
    nextText: 'Suivant',
 currentText: 'Aujourd\'hui',

victorzen

<style>
.lp-pom-form-field input {
   font-family: 'Comic Sans MS' !important;
}
</style>

victorzen

First create the inline labels following the instructions here: http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields/#content7

Next, paste the following code in the Javascripts section, selecting 'Head' as the placement:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/derpoho/floatlabels.js/master/floatlabels.js"></script>

<script>
$(document).ready(function () {  

victorzen

Some services that integrate with Unbounce impose a maximum number of characters, including spaces, that you can add into a field.

For example MailChimp, Campaign Monitor, Constant Contact and Zoho CRM allow a maximum number of around 250 characters, while other services like AWeber have a limit of between 16 to 33, depending on the type of characters.

In order to avoid integration errors, you can limit the amount of characters allowed in your form fields by adding the following script to the Javascripts section of your page, selecting "Before Body End Tag" as the placement:

<script> 
$(document).ready(function(){

//Change 'email' for the ID of your form field and '10' for the max number of characters allowed. 

victorzen

Paste the following script in the Javascripts section of the page selecting 'Before Body End Tag' as the placement. You can change the mask to any phone number format you want:

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>

<script>
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
 * TS:0002-08-073

victorzen

Paste the following code in the Javascripts section of your page selecting 'Before Body End Tag' as the placement:

<script>
  $(function(){
    $(".lp-form-errors").click(function(){
      $(".lp-form-errors").fadeOut()
    }); 
    $('.lp-pom-form .lp-pom-button').click(function(){
 

victorzen

Change '#lp-pom-block-10' for the ID of the element you want to hide and make re-appear in both the javascript and the CSS. You can add multiple elements separating them by a comma ('#lp-pom-block-10, #lp-pom-button-75'). Change 5000 to adjust the timer, time is in milliseconds.

Javascript:

<script>
window.setTimeout(function () {
  $('#lp-pom-block-10').show();
  }, 5000);

victorzen

<script>
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-08-042
*/
  lp.jQuery(document).ready(function($) {
    
    //Change #lp-pom-box-01, etc. for the IDs of the boxes where you want the form fields to display.
 var boxes = ["#lp-pom-box-01",

victorzen

Javascript:

<script>
   lp.jQuery(document).ready(function($) {  
      $("select").addClass("notselected");       
      $("select").live('change', function() {
         $("select").removeClass("notselected")
      });
   });