MadKudu Docs

Home

Customizing the CSS Code on a MadKudu Smart Form

MadKudu Smart Form allows you to personalize your existing forms based on who your leads are.

MadKudu qualifies your leads in real-time as they input their email address. Leads who are found to be a good fit for sales are offered a free sales consultation. Leads who are not qualified continue with the self-service onboarding.

Getting started

1. Let’s make sure you have all you need.

If you don’t have a Smart Form yet, you can create one following these instructions.

2. Customizing the Smart Form

To customize the modal, add your CSS code to the Customization of your existing page section.

For example:

var styles = `
  .madkudu_modal__overlay {
      background: #3c97da;
      opacity: 0.9;
  }
  button.madkudu_modal__accept {
      background: #245376;
      border: 1px solid #245376;
      font-size: 16px;
  }
  button.madkudu_modal__accept:hover {
      background: #2E6A97;
      border-color: #245376;
  }
  .madkudu_modal__cancel {
      color: #eee;
      text-decoration: none;
      background-color: transparent;
      font-size: 16px;
  }
  button.madkudu_modal__cancel:hover {
      background-color: transparent;
      border-color: transparent;
      text-decoration: underline;
      color: white;
  }
  .madkudu_modal__title {
      text-transform: none;
      letter-spacing: 0px;
      font-family: "Roboto Slab", "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 39px;
  }
  .madkudu_modal__subtitle {
      font-size: 25px;  
  }
  .madkudu_modal__box {
      top: 25%;
      transform: translate(-50%, 0%);
      max-width: 720px;
  }
  .madkudu_modal__box_parent {
      overflow: scroll;
  }
`

3. Load the CSS styles

In the same section, add the below code to load the modifications:

var load_style = function (styles) {
  console.log('load_style')
  // see here for explanations: http://jonraasch.com/blog/javascript-style-node
  var css = document.createElement('style')
  css.type = 'text/css';
  if (css.styleSheet) css.styleSheet.cssText = styles;
  else css.appendChild(document.createTextNode(styles));
  document.getElementsByTagName('head')[0].appendChild(css);
};

load_style(styles);

4. Preview your changes

Use the preview functionality to test the Fastlane functionality.
Warning, while using Fastlane in preview mode does not impact your production form, any meetings booked in preview mode will be recorded as actual demos booked. Make sure to remove those meetings afterwards or let your sales team know.

When possible we recommend testing with a staging calendar to avoid any confusion.

#1. Click “Preview” and follow the instructions if you haven’t installed the MadKudu Chrome web extension yet.

#2. Enter the email of a lead that is obviously a fit for the sales team to generate the modal pop-up. Note: you may have to submit the form to show the modal depending on how your form is set up.

#3. See the new modal style!