I recently saw Request a Website – High Five Studio RFP this contact form and then I tried to find how to do it, anyone have any step by step guide how this form is working?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
I recently saw Request a Website – High Five Studio RFP this contact form and then I tried to find how to do it, anyone have any step by step guide how this form is working?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Samrat,
The basic design is simple enough.
The buttons appear to be heavily styled radio buttons, so you can Google “webflow style radio buttons as buttons”, or something similar. There should be a lot of posts in this forum regarding options there.
The calculation is done with a script that’s watching for radio-button changes, and then it does the calculation and posts the result.
Okay Maybe I can style it though but how to find the script for that calculation how they did it calculation and then put it to the form field as un-editable
They just used basic javascript to do the math they wanted. It will depend entirely on what you’re trying to calculate in your page, and how that quoting business logic works… e.g. if this is on than add 20%, etc.
Once you have your result, you can just write it into any element you want. for example if you have a text item;
<p id="quoteAmt">( calculating... )</p>
Then jQuery changes that with $("#quoteAmt").html("$2,300.00")
.
If you’re not familiar with scripting, and don’t want to learn, there are a lot of companies that provide pricing and quoting calculator builders. You build it on their site and embed it into yours, and it will look great. No code.
I’m able to clone one project and it has everything just I need to send show the final calculated amount in the form and send the form with that final calculated field, Anyone wants to help me?
Here is the read-only link
https://preview.webflow.com/preview/budget-661276?utm_medium=preview_link&utm_source=designer&utm_content=budget-661276&preview=66b45a348db5135471d910de0f7c80fd&workflow=preview