Custom Screens in Aliveforms

In Aliveforms, logic units and custom properties can be used to create custom screens, for example, custom welcome screen.

Set up

Let's say we want to have a custom welcome screen. So, on screen 0, we add custom properties

• welcome_screen : true
• button_text : Start
• info_text : Approx 1 minute

Then we setup logic to handle these props.

Using Events

We can use event handling or special functions. If there are more than one logic units requiring special function on same screen, it is better to use $.Handle for those.

Inspector in our friend

Inspect elements to perform DOM manipulation.

Input Type: Execute JavaScript
Screen Index: -1

Execute JavaScript | -1

$.RegisterErrorHandler();

let form = $.HackForm()
let len = form.length;

for (let i = 0; i < len; i++) {
  let scr = form[i];
  if (scr?.customProps?.welcome_screen) {
    $.Handle(`screen_${i}_on_enter`, function() {
      appendWelcomeButton(scr?.customProps?.button_text, scr?.customProps?.info_text);
    })
  }
}

function appendWelcomeButton(btnText = null, infoText = null) {
  const div = document.createElement('div');
  const el = document.createElement('button');
  el.innerHTML = btnText ?? "Start";
  const classes = ['primary-setup', 'btn', 'br-setup', 'bc-setup'];
  el.classList.add(...classes);
  el.addEventListener('click', function() {
    $.PressNext();
  })
  div.classList.add('mt-2')
  div.appendChild(el)
  const sm = document.createElement('small');
  sm.innerHTML = `<br> ${infoText ?? 'Takes approx. 1 minute'}`;
  sm.style.fontSize = '0.7rem';
  div.appendChild(sm)
  setTimeout(function() {
    let fta =  document.querySelector('.form_text_area')
    fta.classList.add('flex-column')
    fta.appendChild(div);
  }, 300)

}