Make the price blurry until they opt-in to collect leads
Hi there, @Resultat_Grabbarna and welcome to the Community 
We already have a similar request to hide the results until the form completion - Hide results until form completion. Feel free to upvote it!
While the feature isn’t available in the settings, it’s possible to achieve this with a custom code and I’ve shared it here 
By the way, I’ve slightly adjusted this code and here is the new version that will make the results blurred until the form completion:
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"] {
position: relative;
filter: blur(5px);
pointer-events: none;
user-select: none;
}
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
content: '${MESSAGE}';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
filter: none;
z-index: 10;
}
`;
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 ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings. Here is how the code works in my test widget:
Try it out and let me know if you like the result
Hey Max, I really liked that you made this for me, thank you so much!
Now I really like it, the only issue is that, I want them to book an appointment after revealing the price.
So now I need an extra CTA button to get them too book the appointment and pheraps even pay before hand if it’s possible.
1 Like
Great, you’re always welcome!
The payment option isn’t supported in our app now, but we do have plans to consider this idea - An option to add payment button. Please upvote this idea to not miss any updates
As for the 2nd CTA button, would you like to display right away or only after submitting the form? Do I get it right, that this button should redirect to a special booking page?
Probably after filling the form, I want them to unlock their price by filling in their information, then get to book an appointment.
It wouldn’t be logical for them book it before knowing the price.
1 Like
Got it, thanks! Here is a custom solution from our devs:
const WIDGET_ID = '27490e2f-9170-49ca-8a20-83b1e8539e91';
const MESSAGE = 'Se ditt pris nu!';
const NEW_BTN_CLASS = 'cta-btn-new';
const NEW_BTN_LABEL = 'test redirect';
const REDIRECT_URL = 'https://www.google.com';
const OPEN_IN_NEW_TAB = true;
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"] {
position: relative;
filter: blur(5px);
pointer-events: none;
user-select: none;
}
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
content: '${MESSAGE}';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255,255,255,0.8);
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
filter: none;
z-index: 10;
}
`;
document.body.append(style);
const waitForElem = selector =>
new Promise(resolve => {
const found = document.querySelector(selector);
if (found) return resolve(found);
const obs = new MutationObserver(() => {
const el = document.querySelector(selector);
if (el) {
obs.disconnect();
resolve(el);
}
});
obs.observe(document.body, { childList: true, subtree: true });
});
waitForElem(`[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`)
.then(() => {
style.remove();
return waitForElem('.cta__Container-sc-5102c37c-0.gAEjIi');
})
.then(cta => {
const originalBtn = cta.querySelector('button.ButtonBase__ButtonContainer-sc-c390884-3.jFaoaj');
const newBtn = originalBtn.cloneNode(true);
newBtn.classList.add(NEW_BTN_CLASS);
newBtn.removeAttribute('onclick');
const labelSpan = newBtn.querySelector('.ButtonBase__Ellipsis-sc-c390884-5');
if (labelSpan) labelSpan.textContent = NEW_BTN_LABEL;
newBtn.onclick = () => {
if (OPEN_IN_NEW_TAB) window.open(REDIRECT_URL, '_blank');
else window.location.href = REDIRECT_URL;
};
originalBtn.after(newBtn);
});
This scrip combines blurring the results and the 2nd CTA button, so you should replace your current script in the Custom JS code with this one.
In the 2nd and 5th line of the code, you should set the button text and redirect link. If you wish the link to be opened in the same tab, please replace true with false in the 6th line:
Please try it out and let me know how it worked 
Hey Max, I appreciate you helping me out.
I want the 2nd form to be just like the first form which is connected to the calculator so that when they book a time, I can also see what price they got.
Thanks in advance!
1 Like
Hi there, @Resultat_Grabbarna
Apologize for the delayed response!
Unfortunately, it’s impossible to create the 2nd form that will be opened right in the widget. I’ve added this idea to the Wishlist on your behalf and if it gets more votes, we’ll try to consider it in the future - Multiple forms in 1 widget