Implement custom conditional logic for Submit button

[Richy_Smart]

Hey Max!

I see there might be a way to create conditional logic for the submit button, and I’d love to expand on that. What I’d like to do is send users to different URLs depending on whether a specific logic condition is triggered.

In my case, there’s only one condition that needs to redirect to a different URL—the rest should just follow the standard submit action.

Is this currently possible within Elfsight, or is there a workaround to achieve it? Here’s a link to the form I’m trying to work on https://richysmart.com/101media-preview

Thanks in advance!

[Max]

Hi there and welcome aboard, @Richy_Smart

Do I get it right that if this condition is met, users should be redirected to the link A, and if not - to the link B?

[Richy_Smart]

Simply put, yes, that is correct!

[Max]

Got it!

I’ve forwarded your request to the devs and will update you once I have any news

[Max]

Hey there, @Richy_Smart

Glad to say that our devs came up with a custom solution for you:

const redirectLinks = {
  3: "https://www.google.com",
  4: "https://www.youtube.com",
};

const widgetId = YOUR_WIDGET_ID;

const watchWidget = () => {
  const selector = `.elfsight-app-${widgetId}`;
  const widget = document.querySelector(selector);

  if (!widget) return;

  const getHandleSubmit = (redirectLink) => () => {
    const newWindow = window.open("", "_blank");
    newWindow.location.href = redirectLink || newWindow.location.href;
  };

  const submitHandlers = Object.keys(redirectLinks).reduce((acc, key) => {
    acc[key] = getHandleSubmit(redirectLinks[key]);
    return acc;
  }, {});

  let currentSubmitHandler = () => {};

  const observer = new MutationObserver(() => {
    const form = widget.querySelector("form");
    const submitMarker = widget.querySelector([
      "[class^='SubmitMessage__Container']",
    ]);
    
    if (submitMarker) {
      currentSubmitHandler();
    }

    if (!form) return;

    const stepsTextContent = widget.querySelector(
      '[class^="FormLayout__Steps"]'
    )?.textContent;

    if (stepsTextContent) {
      const step = stepsTextContent.match(/\d+/);
      currentSubmitHandler = submitHandlers[step];
    }
  });

  observer.observe(widget, { childList: true, subtree: true });
};

watchWidget();

In the 2nd line of the code, you should set the redirect link for the Submit button that appears on the 3rd step. Similarly, in the 4th line, set the link for the button that appears on the 4th step:

In the 5th line, please replace YOUR_WIDGET_ID with the ID of your widget:

Once this done, add the resulted code to the Custom JS field on the Settings tab of your widget’s settings.

Note: JS codes don’t function in the widget editor, so you’ll see the code in action on your website

Give it a shot and let me know if you like the result

[Richy_Smart]

PERFECT, that worked! Thanks for the quick turnaround!

I have a follow up request if possible. I have some buttons I created in the 4th step. Would it be possible to implement an override if a button is selected before the submission? For reference, I used data-values on the buttons.

const buttonRedirects = {
    tier_2: "https://yahoo.com",
    tier_5:   "https://pizzahut.com",
    tier_other:   "https://apple.com"
  };

[Max]

Could you please send me a link to the page, where your widget is installed? I’ll be happy to check it for you

[Richy_Smart]

Yes, here you go! 101media-preview

[Max]

Thanks! I’ve passed it on to the devs and will update you once the code is adjusted

[Max]

Thank you for waiting!

Here is the final JS code for your use case:

const widgetEl = widget;

const redirectLinks = {
  3: "https://www.google.com",
  4: "https://www.youtube.com",
};

const tipLinks = {
  2: "https://www.example.com/tip2",
  5: "https://www.example.com/tip5", 
  other: "https://www.example.com/other",
};

const finalStep = 4;
const widgetId = /*PASS_YOUR_WIDGET_ID_HERE*/;

const watchWidget = () => {
  const selector = `.elfsight-app-${widgetId}`;
  const widgetContainer = document.querySelector(selector);

  if (!widgetContainer) return;

  let redirectLink = redirectLinks[3];
  let tipChousen = false;

  const handleSubmit = () => {
    tipChousen = false;
    const newWindow = window.open("", "_blank");
    if (newWindow) {
      newWindow.location.href = redirectLink || newWindow.location.href;
    }
  }

  const handleTipButtonClick = (value) => {
    redirectLink = tipLinks[value];
  };

  const observer = new MutationObserver(() => {
    const form = widgetContainer.querySelector("form");

    if (!form) return;

    const stepsTextContent = widgetContainer.querySelector('[class^="FormLayout__Steps"]')?.textContent;

    const step = stepsTextContent.match(/\d+/) || finalStep;
    const isFinalStep = step == finalStep;

    if (!isFinalStep || !tipChousen) {
      redirectLink = redirectLinks[step];
    }

    if (isFinalStep) {
      const buttons = widgetContainer.querySelectorAll('.pay-bttn');

      buttons.forEach(button => {
        button.addEventListener('click', (e) => {
          tipChousen = true;
          const value = e.target.getAttribute('data-value');
          handleTipButtonClick(value);
        });
      });
    }

    widgetEl.on("submit", handleSubmit);
  });

  observer.observe(widgetContainer, { childList: true, subtree: true });
};

watchWidget();

Please check it out and let me know if you like the result

[Richy_Smart]

@Max

u

Hey! I am acutally having issues with the pop-up on return/submit is repeating several time.

[Max]

Hi there, @Richy_Smart

Could you please elaborate on the issue you’re experiencing and provide me with a screenshot of it?

[Richy_Smart]

Don’t worry, I switched from submitting/returning to a popup to redirecting instead.

const handleSubmit = () => {
  const url = redirectLink || tipLinks.other || window.location.href;
  const delayMs = 2000; // 2 second delay before redirect

  setTimeout(() => {
    if (window.top) {
      window.top.location.href = url;   // redirect the parent/top window
    } else {
      window.location.href = url;       // fallback, just in case
    }
  }, delayMs);

  tipChosen = false; // reset for next submit
};

This also helped with potential pop-up blocks from the browser.

[Max]

Glad to know that you’ve found a solution that works for you!

If anything else comes up, we’re always here to help