Estimly - Flexible Estimator Template


Estimly - is a template that allows to create estimation questionnaires or various kind of forms. While building questionnaire templates you can map a certain cost to each possible option in each question as well as build a custom design. Once you create the Estimation template you'll get a link that you can share with your users so they could estimate how much a certain service or product would cost them. This for example can be used for web . development agencies so that their users could estimate costs of building a website, or let's say a consulting company and for many other use cases:


  • Fully responsive pages and user dashboard
  • Fully responsive Admin Dashboard for overall management
  • Flexible Estimate questionnaire and forms builder
  • Stripe subscription functionality
  • Design tab for all questionnaire builders
  • Standard Email Estimate Summaries

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Data Structure


Users are the Estimate Questionnaire builders who use the platform to create Questionnaire templates. This also stores the Super Admins information. They store the usual profile info (Photo, Name, EmailAddress, Username), logintimestamp to store when last the user logged in, subscribed to store whether or not the user is a subscribed user, questionnaires object to show the list of questionnaires the user has or has built and the admin field to show whether or not the user is an admin.


Questionnaire contains all the information about an Estimate Questionnaire Template. Title is the Estimate Template name, id is the 1st path to your questionnaire link. For example, hdiw3 might be the users id (1st path); the link to the questionnaire template will then be estimly.bubbleapps.io/form/hdiw3. Description is the description to the questionnaire template. Questions object is the list of questions in the questionnaire template. Responses object is the list of responses received from the questionnaire template. ProgressBar is a status to show whether or not progress should be shown when end users are answering questions to derive their estimates. RedirectLink and RedirectLinkStatus show whether or not a redirect link should be shown at the end of the estimate questionnaire. Theme object is the design information for the questionnaire template. CustomMessage1 and CustomMessage2 store the messages you wish for the user to see at the end of the template. Admin shows whether that particular template was created by an admin.


This stores the email of all customers who wish to subscribe to receive more information about Estimly.


This stores information about the design of each questionnaire. Name is what the design is called. Font is the font type of the text on the questionnaire. ButtonColor is the color of the buttons and links on the estimate page. QuestionColor and AnswerColor are the font colors of the questions and answers respectively. BackgroundBrightness determines the contrast of the BackgroundColor of BackgroundImage of the design. Status determines whether the design is a public design or private design.


This stores all the questions that are later sorted into various questionnaires. The type specifies whether the question is a single option, multiple option or shorttext answer. The title is the question. The serial specifies the order in which the question will appear on the form page. Description is a brief description of the question. Questionnaire object states which questionnaire the question belongs to. AvailableOptions objects stores the list of options in associated with the question.


This stores all options that are later sorted into various questionnaires. The title is the option name, description is a brief explanation of the option. Startprice and Endprice are the ranges for the estimate. When the end user selects the option, these fields will be added to the estimate fee.


This stores all the answers from the end user. The question and the selectedoption. If the question type was a shorttext, the shorttext field stores it.


This stores the estimate summary of the end user. The answers which consist of the question and selectedoption and the totalcoststart and totalcostend.



This is the main landing page of the template and contains basic information for new users to learn more about the Estimate platform. It has a header, hero, how it works section, free product templates available, pricing and the footer.


This contains the login form and allows users (questionnaire builders and admins) to login with their email and password. There is also a demo login.


This contains the sign up form and allows users (questionnaire builders and admins) to sign up to Estimly.


This is the user dashboard for questionnaire builders to manage their questionnaire templates, build new templates, design templates, share the questionnaire link and also view responses on the questionnaire. The interconnected groups are navigated by means of a router.

There are three main groups:


This contains the overview of the questionnaires available to the user or created by the user.


This contains sub groups to help handle profile, billing and settings of the current user. It also has a state to help navigate to the sub groups.


This group contains 3 main groups.


This contains the questionnaire builder, the design tab of the questionnaire and settings for that particular questionnaire.


This contains the link to the Estimate questionnaire and share buttons as well.


This contains all responses received for the questionnaire if any.


This is the page the end user sees and answers the questions provided in the dashboard to get an estimate. The page has 3 main groups in the Group Quote.


This is the view the user sees when the page loads


This contains the questions and options contained in the questionnaire being viewed by the end user


This contains the estimate summary of the end user and is shown when the questionnaire questions have been finished.


This is the page for the Admin of the Estimly Application to handle User Management, Templates Management.

Specific References


Navigation between tab on the dashboard and form page is powered by the custom state current on the element Dashboard menu and conditional statements on the sub page groups that make them visible when true.


The admin page is currently open to all logged in (Demo Login) visitors but with read-only access (they can't perform any actions). To have full access the user must have their current user's admin field set to yes. There is also a workflow that redirects users back to login or dashboard page if they don't have admin access but that workflow is disabled. Be sure to un-check the disable workflow on purchase of this template.

1. Go to admin page -> Workflow tab, locate the following event and uncheck the Disable workflow checkbox:

Document image
Document image

2. Go to Data -> App data -> All Users tab. Locate any user you would like to grant the admin rights to, and click to edit that user record. Set the Admin field to yes:

Document image

Note: Remember to hit the SAVE button.

Congrats! You have successfully granted the admin rights. Now you can use all the admin page and its features as an admin user.

Also, go to Design tab to locate the "Group wrapper" element, and simply delete it:

Document image
Document image

Stripe Subscriptions

This template uses Stripe for Subscription payments powered by Stripe.js plugin.

Stripe Setup:

Go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Retrieve 3 keys from the Stripe dashboard. They can be found on the Developers page or the Account(Settings) page. Those 3 keys are:

  1. Publishable Key (Starts with a 'pk' and is found in the developers page).
  2. Secret Key (Starts with an 'sk' and is found in the developers page)
  3. Client ID (Starts with a 'ca' and is found in the developers page)

Replace the copied API keys with the already existing API keys in the Stripe and Stripe.js plugin.

Ensure to use a live API key when your template goes live.

Random.org API

Once this template is purchased, you will need to set up your API key for the random string generator plugin.

Go to https://www.random.org/, create an account. You will be allowed to access once you have successfully verified your email address and activated your account.

Click on Your Account and then click on Account OverviewYou will see API Services. You click Create a new API Key to create a random string generator for your app.

Copy the API key and post it in the fields located below in the Plugins view.

Document image

Demo to preview the template