With this version of the LeadSurvey, we’ve added a full screen background and keyboard shortcuts.

1. Place the script inside an HTML Element

<script>
// this block of code is optional.
hide_steps=false; // hide the Question #
hide_previous=false; // hide the Previous button
hide_progress_bar=false; // hide the Progress bar
show_check = false; // disable check icon on option radio and checkboxes
</script>
<script src="<https://msg.everypages.com/surveys/js/TypeformScript2.0.js>" id="jstp" step="Question"></script>

2. And place the styles inside the Custom CSS

@import url('<https://msg.everypages.com/surveys/styles/base/Typeform2.0.css>');
/* Place Your Root Var Colors Below this */

You can also change the description of the step by changing the step attribute (see screenshots below).

Full-Screen when Embed:

Add this to the end of the embed code prior to pasting it.

Advanced Customizations:

You can now customize your survey form easily using this main root var code:

#_builder-form{ /* this overrides the default colors in the base css */
  --form-main-bg: url('<https://msg.everypages.com/surveys/images/gymfitness.jpg>');
  --form-overlay-bg: rgba(0, 0, 0, 0.6);
  --footer-bg: #333333;
  --form-font: 'Poppins', sans-serif;
  --step-number-color: #ffffff;
  /* survey form error field */
  --alert-bg: #ffffff;
  --alert-color: #f94a4a;
  --alert-icon-bg: #f94a4a;
  --alert-icon-color: #ffffff;
  /* progress bar */
  --progress-bar: rgb(255 255 255 / 80%);
  --progress-bar-item-bg: #ffffff;
  --progress-bar-active-item-bg: #333333;
  --progress-bar-active-item-border: #ffffff;
  /* radio button &amp; checkbox fields */
  --option-label: #ffffff;
  --option-bg: rgba(255, 255, 255, 0.2);
  --option-border: rgba(255, 255, 255, 0.01);
  --option-active-label: #ffffff;
  --option-active-bg: rgba(255, 255, 255, 0.2);
  --option-active-border: #ffffff;
  /* selected option indicator */
  --option-indicator-color: #333333;
  --option-indicator-bg: #ffffff;
  --option-indicator-border: #cccccc;
  --option-indicator-active-color: #ffffff;
  --option-indicator-active-bg: #000000;
  --option-indicator-active-border: #000000;
  /* form label and input field */
  --form-label-color: #ffffff;
  --form-input-color: #ffffff;
  --form-input-border: #ffffff;
  /* next &amp; previous button */
  --button-bg: transparent;
  --button-color: #ffffff;
  --button-divider: rgba(255, 255, 255, .80);
  --button-hover-bg: rgba(0, 0, 0, 0.20);
  --button-hover-color: #ffffff;
}

Once you’ve customized your colors, etc, paste your customized code from MagicCSS here: