Hide results until form completion

[Jerome1 (Jerome)]

We want to capture the Calculator user info before they get access to use the Results For instance, we are calculating the cost of vacancy for open positions as we are a staffing firm. We want to capture user name, company, email, phone, etc before the Results are shown to them.

[Max]

Hi @Jerome1

I completely get where you’re coming from, and I agree that it would be great to have such an option.

We’ll try to think this idea over and I’ll make sure to inform you here in case of any changes

Thanks a bunch for sharing your thoughts with us!

[Noah_Beard]

I am the web developer for a home remodeling company and want to capture more leads this way too. I was looking for this and was surprised they dont have this option yet…

[Max]

Hi there, @Noah_Beard

Many thanks for sharing your thoughts with us!

We also agree that it would be a nice option. Let’s hope the devs will be able to consider this idea. If any news comes up, we’ll promptly update you here

[Noah_Beard]

Thank you.

[user2869]

There should be an option where results aren’t show until all questions have been answered / inputs received.

[Kastri (Kastriot B Plakolli)]

I really miss this feature, I bought it on the calculator to generate more leads, but if you can’t hide the result to obtain contact information, then unfortunately you won’t generate as many leads as the calculator intended. Is there any timeframe for such an upgrade, i have been trying a couple of work arrounds but, the it seems like the JS code is not overwriting the CSS…

[Noah_Beard]

exactly.

[Max]

Hey there, guys, @Kastri, @user2869

A huge thank you for your feedback!

The timeline for this feature is still unclear, since we have a lot of requests with the higher priority now. However, if any news comes up, we’ll update you here right away

In the meantime, could you please describe how you envision showing results in this case? Should they appear in the widget after clicking on the Submit form button or you’d like to send them in email notifications?

[Kastri (Kastriot B Plakolli)]

Hi @Max

Thx for your respons.
The ideel way would be to appear in the widget after clicking on the Submit form button, this way the customers can get the information straigt away.

[Max]

@Kastri, Here is the solution from our devs:

const WIDGET_ID = WIDGET ID';
const MESSAGE = 'Place order to see the results';

const style = document.createElement('style');
style.innerHTML = `
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"] *,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"] * {
    display: none;
  }
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
    content: '${MESSAGE}';
  }
`;
document.body.append(style);

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });

waitForElem(
  `[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`
).then(() => style.remove());

The custom message should be set in the 2nd line of the code.

Replace WIDGET_ID in the 1st line of the code with ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings. Try it out and let me know how it worked

[Kastri (Kastriot B Plakolli)]

It works, i am going to work a bit on the layout, but the code hides the results, and only shows the results after clicking submit!

[Noah_Beard]

Could you make a code for me as well? I’m pretty much the same as Kastri where I dont want customers to see the total until they submit their info. So getting the estimate is an incentive for them giving up info.

[Kastri (Kastriot B Plakolli)]

You can use the same code mate, just change the widget ID = ‘a6dcdae5-8996-44d6-90f9-06d4948100ba’ to your widget.

[Noah_Beard]

Thank you sir.

[Marketing_BR]

Hi!

I’d like to request a feature for the Calculator widget: the ability to hide or blur the calculated values until the user completes the form. This would be incredibly helpful for lead generation purposes, ensuring users engage with the form before accessing the full result.

I’ve actually developed a workaround using JavaScript that achieves this behavior and would be happy to share it as a reference. However, having this as a built-in setting—perhaps as a checkbox like “Hide result until form is submitted”— would make the experience much more seamless for non-technical users.

[Max]

Welcome to the Community, @Marketing_BR

We already have such a request on the Wishlist, and I’ve added your comment there too

By the way, there is a custom solution for this case:

const WIDGET_ID = 'WIDGET ID';
const MESSAGE = 'Place order to see the results';

const style = document.createElement('style');
style.innerHTML = `
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"] *,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"] * {
    display: none;
  }
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
    content: '${MESSAGE}';
  }
`;
document.body.append(style);

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });

waitForElem(
  `[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`
).then(() => style.remove());

Replace WIDGET_ID in the 1st line of the code with the ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings

[Noah_Beard]

Max, this solution does not work. Hundreds of people have been asking for this feature for months and still no progress. This is the whole reason I got this app to be completely honest because I figured it would eventually have to come out. If it is so easy to make a custom solution, then just release it to everyone in an update. We’ve been waiting for months and everyone who uses the calculator widget says the same exact thing and probable all too got the app for this reason. Just make it, it would take your devs an hour or two out of their day to do so. Please.

[Max]

Hi there, @Noah_Beard

Thank you for the feedback!

I completely understand your excitement about this option and agree that it would be a great enhancement.

We’d really love to roll out new features faster, but with so many requests coming in, we have to prioritize them based on their complexity and community votes.

While this feature might seem straightforward, there’s actually a lot that goes into it. First, we design the feature, then pass it to development. Once the development is over, our team thoroughly tests it to catch any issues before release. All of this takes much time, as we want to make sure everything works smoothly for you

At the moment, there are a lot of requests with the higher priority level and our devs are focused on them now. If this request gets more votes, it might be prioritized sooner, but it’s still hard to give any predictions for now.

If any news comes up, we’ll promptly update you here!

As for the custom workaround I’ve shared before, I’ve checked it in my test widget and it’s working great:

Could you please double-check it? If it’s still not working in your widget, please send me a link to the page, where your widget is installed. I’ll gladly check it for you

Note: Keep in mind that the JS code works only upon widget’s installation, not in the preview mode.