Calculator: How to hide results until the form is submitted

Tips & Discussions Pro Tips
1

Want to hide calculation results until the form in your Calculator widget is submitted? We’ve got it covered :wink:

To implement it, just add the script below to the Custom JS field on the Settings tab of your widget’s settings:

widget.submissionForm.on("submit", () => {
  const widgetBg = util.findElement(".es-widget-background-container");
  if (widgetBg) {
    widgetBg.setAttribute("results-revealed", "true");
  }
});

And this code should be added to the Custom CSS field on the Settings tab of your widget’s settings:

.es-widget-background-container:not([results-revealed="true"]) [class*="results__Content-sc"]>[class*="result-primary__PrimaryContainer-sc"],
.es-widget-background-container:not([results-revealed="true"]) [class*="results__Content-sc"]>[class*="result-secondary__SecondaryContainer-sc"] {
  display: none;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.es-widget-background-container:not([results-revealed="true"]) [class*="results__Content-sc"]:before {
  content: 'Place order to see the results';
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  white-space: nowrap;
}

This video shows it in action:


If you’d like to have this feature as an option in the settings, please upvote this ide on the Wishlist :slightly_smiling_face: - Hide results until form completion


Guys, was this solution helpful to you? Share your feedback in the comments :backhand_index_pointing_down:

2

Is there a way to display the message only once? Currently, it shows it for every calculation line, which is a bit repetitive.

3

Hi there and welcome to the Community, @user33410 :waving_hand:

I’ve just tested your widget and the custom message is displayed only once:

image
image1239×971 82.2 KB

When the form is submitted, all results are displayed correctly:

image
image1135×935 87.9 KB


Could you please elaborate on what you mean under this? A screenshot of the issue would be much appreaciated :folded_hands:

If the issue occurs only on the page, where the widget is installed, please send me a link to this page :slightly_smiling_face: