Conditional Logic to Replace Elfsight Form Submit Button

Ask the Community Customization
,
22

Thank you, Max.

I tested it and it works well initially, but if a customer goes back in the form after triggering the button, clicking the next button still opens the “Get Your Free Quote” page instead of behaving normally. I’ve recorded a screen capture to demonstrate the issue. Could this be a limitation of the JavaScript?

1 Like
23

Got it, thanks for sharing a screencast!

I really hope this behavior can be adjusted. Our devs will look into this and I’ll update you once it’s done :slightly_smiling_face:

1 Like
24

Hi @Michael_Surnak :waving_hand:

We’ve adjusted the script:

const widgetSelector =
  '.elfsight-app-17536663-c388-4d9c-900b-ac172987f487';

const newButtonLink =
  'https://k9poopertroopers.com.au/get-your-free-quote';

const originalTextMap = new WeakMap();
const patchedInputs = new WeakSet();
const boundButtons = new Set();

const rules = [
  {
    labelStartsWith:
      'What changes would you like to make to your service address/addresses?',
    inputSelector: 'input[value="Change a service address"]',
    buttonText: 'Get Your Free Quote'
  },
  {
    labelStartsWith:
      'How many service addresses would you like to add?',
    inputSelector: 'input[value="Just one"]',
    buttonText: 'Get Your Free Quote'
  },
  {
    labelStartsWith:
      'How many service addresses would you like to add?',
    inputSelector: 'input[value="Multiple"]',
    buttonText: 'Get Your Free Quote'
  }
];

function getActiveRule(container) {
  for (const rule of rules) {
    const field = [...container.querySelectorAll('[class*="FormFieldLayout__Container-sc"]')]
      .find(f => {
        const labelEl = f.querySelector('[class*="FormFieldLayout__Label-sc"]');
        return (
          labelEl &&
          labelEl.textContent
            .trim()
            .toLowerCase()
            .startsWith(rule.labelStartsWith.toLowerCase())
        );
      });

    if (!field) continue;

    const input = field.querySelector(rule.inputSelector);
    if (input && input.checked) {
      return rule;
    }
  }

  return null;
}

function patchStep(container) {
  const buttonEl = container.querySelector(
    'button[aria-label="Submit Change Request"]'
  );

  if (!buttonEl) return;

  const buttonLabel =
    buttonEl.querySelector('[class*="ButtonBase__Ellipsis-sc"]') ||
    buttonEl;

  if (!originalTextMap.has(buttonEl)) {
    originalTextMap.set(buttonEl, buttonLabel.textContent);
  }

  function syncButtonText() {
    const activeRule = getActiveRule(container);

    if (activeRule) {
      buttonLabel.textContent = activeRule.buttonText;
    } else {
      buttonLabel.textContent =
        originalTextMap.get(buttonEl) ?? buttonLabel.textContent;
    }
  }

  if (!boundButtons.has(buttonEl)) {
    boundButtons.add(buttonEl);

    buttonEl.addEventListener(
      'click',
      e => {
        const activeRule = getActiveRule(container);
        if (!activeRule) return;

        e.preventDefault();
        e.stopPropagation();
        window.open(newButtonLink, '_blank');
      },
      true
    );
  }

  rules.forEach(rule => {
    const field = [...container.querySelectorAll('[class*="FormFieldLayout__Container-sc"]')]
      .find(f => {
        const labelEl = f.querySelector('[class*="FormFieldLayout__Label-sc"]');
        return (
          labelEl &&
          labelEl.textContent
            .trim()
            .toLowerCase()
            .startsWith(rule.labelStartsWith.toLowerCase())
        );
      });

    if (!field) return;

    const input = field.querySelector(rule.inputSelector);
    if (!input) return;

    if (!patchedInputs.has(input)) {
      patchedInputs.add(input);
      input.addEventListener('change', syncButtonText);
    }
  });

  syncButtonText();
}

const waitForWidget = setInterval(() => {
  const container = document.querySelector(widgetSelector);
  if (container) {
    patchStep(container);
    setInterval(() => patchStep(container), 300);
    clearInterval(waitForWidget);
  }
}, 300);

Could you please test your widget once again and let me know if any issues appear on your end?

1 Like
25

IT WORKS! Thank you Max, I wasn’t sure if it was possible. Thank you to you and the team!

2 Likes
26

Perfect, you’re always welcome :wink:

1 Like
27

Hi Max,

I recently updated my form widget installed on this page from “Success message” to “Redirect to URL” on submission—that way I can track submissions better with Facebook Pixel/GTM. Since making this change, the custom JavaScript that modifies the form button to be “Join Our Waiting List” (linking to K9 Pooper Troopers – Join Our Waiting List ) when selecting “No” to the first question no longer works.

Do you have any idea why this might be happening? Sorry to bother you and the team about this again!

Thanks,
Michael

1 Like
28

Hi there, @Michael_Surnak :waving_hand:

This script is pretty complex, so changes in the settings might shake things up a bit. But no worries, our devs will adjust the script and I’ll update you once it’s done :wink:

1 Like
29

Thank you Max :slight_smile:

1 Like
30

Thank you for waiting!

We’ve adjusted the script and it’s working fine now. Please check it out :wink:

1 Like
31

Amazing. Thank you Max and the team!

2 Likes
32

No sweat!

We’re always here to help if any questions come up :wink:

1 Like