{"id":11044,"date":"2023-09-01T06:09:15","date_gmt":"2023-09-01T06:09:15","guid":{"rendered":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/?p=11044"},"modified":"2025-04-01T10:15:26","modified_gmt":"2025-04-01T10:15:26","slug":"how-to-create-calculator-via-form","status":"publish","type":"post","link":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/","title":{"rendered":"How to Create Calculator via Form"},"content":{"rendered":"\n<p>A website cost <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/recipe-portion-calculator\/\" target=\"_blank\" rel=\"noreferrer noopener\">calculator<\/a> allows users to estimate the price of developing a website based on their specific needs. This form is useful for freelancers, agencies, and businesses offering website development services. By selecting various options, users receive an estimated cost tailored to their project.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"contents\">Contents<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#fields-structure\">Form Fields Structure<\/a><\/li>\n\n\n\n<li><a href=\"#calculation\">Set Up Calculation<\/a><\/li>\n\n\n\n<li><a href=\"#build-form\">Build the Form<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#website-type\">Website type section<\/a><\/li>\n\n\n\n<li><a href=\"#website-basics\">Website basics section<\/a><\/li>\n\n\n\n<li><a href=\"#website-content\">Website content section<\/a><\/li>\n\n\n\n<li><a href=\"#testing-maintenance\">Testing and maintenance section<\/a><\/li>\n\n\n\n<li><a href=\"#go-live\">When do you want the website to go live? section<\/a><\/li>\n\n\n\n<li><a href=\"#total\">Total section<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#others\">Other Field and Form Actions<\/a><\/li>\n\n\n\n<li><a href=\"#results\">Check the Results<\/a><\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\" id=\"fields-structure\">Form Fields Structure<\/h2>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The form consists of the following sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Website type<\/strong> section that includes a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/select-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Select Field<\/strong><\/a> block where users can choose the type of website: \u201cEcommerce,\u201d \u201cBlog,\u201d \u201cPortfolio\u201d;<\/li>\n\n\n\n<li><strong>Website basics<\/strong> section that includes a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/range-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Range Field<\/strong><\/a> block which defines the number of pages (minimum \u201c10,\u201d maximum \u201c25\u201d) and a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/checkbox-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Checkbox Field<\/strong><\/a> block with additional features like:\n<ul class=\"wp-block-list\">\n<li>\u201dResponsive Design\u201d;<\/li>\n\n\n\n<li>\u201cPremium Theme\u201d;<\/li>\n\n\n\n<li>\u201cPremium Plugins\u201d;<\/li>\n\n\n\n<li>\u201cImage Gallery\u201d;<\/li>\n\n\n\n<li>\u201cContact Form\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Website content<\/strong> section that includes a <strong>Checkbox Field<\/strong> block with the following options:\n<ul class=\"wp-block-list\">\n<li>\u201cSEO Keyword Analysis\u201d;<\/li>\n\n\n\n<li>\u201cSEO Copywriting\u201d;<\/li>\n\n\n\n<li>\u201cBasic website copy\u201d;<\/li>\n\n\n\n<li>\u201cCreative website copy\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Testing and maintenance<\/strong> section that includes a <strong>Checkbox Field<\/strong> block with the following options:\n<ul class=\"wp-block-list\">\n<li>\u201cPrelaunch support\u201d;<\/li>\n\n\n\n<li>\u201cBrowser Testing\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>When do you want the website to go live?<\/strong> section that includes a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/radio-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Radio Field<\/strong><\/a> block with the following options:\n<ul class=\"wp-block-list\">\n<li>&#8220;Any time soon&#8221;;<\/li>\n\n\n\n<li>&#8220;I don\u2019t know&#8221;;<\/li>\n\n\n\n<li>&#8220;ASAP!&#8221;;<\/li>\n\n\n\n<li>and a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/conditional-visibility\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Conditional Block<\/strong><\/a> that\u2019s triggered if the &#8220;ASAP!&#8221; option is selected, revealing a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/date-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Date Field<\/strong><\/a> block for users to specify the exact launch date.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Total <\/strong>section that includes a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/calculated-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Calculated Field<\/strong><\/a> block that summarizes the selection of website options using a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/advanced-math-calculations\/\" target=\"_blank\" rel=\"noreferrer noopener\">calculation formula<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/action-button-field\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Action Button<\/strong><\/a> block that will allow users to finalize and submit their cost estimation request.<\/li>\n<\/ul>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"calculation\">Set Up Calculation<\/h2>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>For each option in the form, we will assign a calculation value that is used in the final formula:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>%website-type% + (%pages_counter% *20) + %basics% + %content% + %testing% + %release_date%<\/code><\/pre>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"build-form\">Build the Form<\/h2>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Go to <strong><em>WordPress Dashboard &gt; JetFormBuilder<\/em><\/strong>, click the \u201c<strong>Add New Form<\/strong>\u201d button to create a new form and name it <strong>Website Price Calculator<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form-retina.png 2x\" alt=\"creating a form\" \/><\/figure>\n\n\n\n<p>Upon default, the newly created form contains a <a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/welcome-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Welcome Block<\/strong><\/a>;<strong> <\/strong>feel free to remove it.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"website-type\">Website type section<\/h3>\n\n\n<p>Click on the \u201c<strong>+<\/strong>\u201d to open the block inserter. In the search field, type \u201cheading\u201d to find the <strong>Heading<\/strong> block. Then, drag it onto the form editor. Finally, type \u201cselect\u201d to find the <strong>Select Field<\/strong> block and drag it onto the form editor.<\/p>\n\n\n\n<p>In the <strong>Select Field <\/strong>block settings, go to the <strong>General<\/strong> section and set the <strong>FORM FIELD NAME<\/strong> value to \u201cwebsite-type.\u201d Then click on the \u201c<a href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/multi-optional-field-source-settings\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Manage items<\/strong><\/a>\u201d button to open the <strong>Edit Manual Options<\/strong> pop-up to add website options.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/website-type-section.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/website-type-section-retina.png 2x\" alt=\"website type section\" \/><\/figure>\n\n\n\n<p>As mentioned previously, this form field will contain three options: \u201cE-commerce,\u201d \u201cBlog,\u201d and \u201cPortfolio.\u201d For each value, we need to fill in the <strong>CALCULATE<\/strong> field. The amount will be calculated in the <strong>Total<\/strong> field at the end of this form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/website-type-section-options.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/website-type-section-options-retina.png 2x\" alt=\"website options\" \/><\/figure>\n\n\n\n<p>When done, click on the \u201c<strong>Update<\/strong>\u201d button. For more convenience, you can unite the <strong>Heading<\/strong> and <strong>Select Field<\/strong> blocks into a group.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"website-basics\">Website basics section<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Click on the \u201c<strong>+<\/strong>\u201d to open the block inserter. In the search field, type \u201cheading\u201d to find the <strong>Heading<\/strong> block. Then, drag it onto the form editor. Finally, type \u201crange\u201d to find the <strong>Range Field<\/strong> block and drag it onto the form editor.<\/p>\n\n\n\n<p>The <strong>Heading<\/strong> block will display the \u201cWebsite basics\u201d title. Now, go to the <strong>Range Field<\/strong> block settings to finetune it.<\/p>\n\n\n\n<p>In the <strong>General<\/strong> section, fill in the <strong>FIELD LABEL<\/strong> field with a relevant name. We\u2019ll use \u201cNumber of Pages ($20\/page),\u201d which will also notify the user of the price per page.<\/p>\n\n\n\n<p>In the <strong>Value<\/strong> section, fill in the <strong>DEFAULT VALUE<\/strong> field, which will indicate that the default number of pages is \u201c10.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/range-field-block-settings.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/range-field-block-settings-retina.png 2x\" alt=\"range field block settings\" \/><\/figure>\n\n\n\n<p>Scroll down to the <strong>Field<\/strong> section and fill in the next set of fields:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-second-part-of-the-range-field-block-settings.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-second-part-of-the-range-field-block-settings-retina.png 2x\" alt=\"the second part of the range field block settings\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MIN VALUE<\/strong> \u2014 this field corresponds to the <strong>DEFAULT VALUE<\/strong> field and is \u201c10\u201d;\u00a0<\/li>\n\n\n\n<li><strong>MAX VALUE<\/strong> \u2014 this field corresponds to the maximum number of pages the user may order. For instance, we will set it to \u201c25\u201d;<\/li>\n\n\n\n<li><strong>STEP<\/strong> \u2014 this field corresponds to the exact number of pages the user may order. We will set it to \u201c1.\u201d<\/li>\n<\/ul>\n\n\n\n<p>For more convenience, you can unite the <strong>Heading<\/strong> and <strong>Range Field<\/strong> blocks into a group.<\/p>\n\n\n\n<p>Now, go back to the block inserter and add a <strong>Checkbox Field<\/strong> block. It will display functional website options, which the user may order. After adding the block to the editor, go to the block&#8217;s settings and enter a unique <strong>FORM FIELD NAME<\/strong> value. We\u2019ll need it as well for the formula.<\/p>\n\n\n\n<p>Then click on the \u201c<strong>Manage items<\/strong>\u201d button to open the <strong>Edit Manual Options<\/strong> pop-up, where we can add website options.<\/p>\n\n\n\n<p>For each of your options, you need to fill in the <strong>CALCULATE<\/strong> field. The amount will be calculated in the <strong>Total<\/strong> field at the end of this form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-functional-options.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-functional-options-retina.png 2x\" alt=\"checkbox field editing manual options\" \/><\/figure>\n\n\n\n<p>When done, click on the \u201c<strong>Update<\/strong>\u201d button to save the changes.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"website-content\">Website content section<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>To speed up the process, you can duplicate the previous section. The <strong>Heading<\/strong> block will display the \u201cWebsite content\u201d title, and the <strong>Checkbox Field<\/strong> block\u2019s <strong>FORM FIELD NAME<\/strong> value is \u201ccontent\u201d.<\/p>\n\n\n\n<p>In the <strong>Checkbox Field<\/strong>, click the \u201c<strong>Manage items<\/strong>\u201d button to open the <strong>Edit Manual Options<\/strong> pop-up, where you can add content options.<\/p>\n\n\n\n<p>For each option, enter a value in the <strong>CALCULATE<\/strong> field. This amount will be included in the <strong>Total <\/strong>field at the end of the form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-content-options.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-content-options-retina.png 2x\" alt=\"checkbox field block content options\" \/><\/figure>\n\n\n\n<p>Once finished, click the \u201c<strong>Update<\/strong>\u201d button to save your changes.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"testing-maintenance\">Testing and maintenance section<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>For this section, you can also use two previous blocks. The <strong>Heading<\/strong> block will display the \u201cTesting and maintenance\u201d title, and the <strong>Checkbox Field<\/strong> block\u2019s <strong>FORM FIELD NAME<\/strong> value is \u201ctesting.\u201d<\/p>\n\n\n\n<p>In the <strong>Checkbox Field<\/strong>, click the \u201c<strong>Manage items<\/strong>\u201d button to open the <strong>Edit Manual Options<\/strong> pop-up, where we can add testing and maintenance options.<\/p>\n\n\n\n<p>Enter a value in the <strong>CALCULATE<\/strong> field for each option. This value will be added to the <strong>Total<\/strong> field at the end of the form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-testing-and-maintenance-options.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/checkbox-field-testing-and-maintenance-options-retina.png 2x\" alt=\"checkbox field block testing and maintenance section manual options\" \/><\/figure>\n\n\n\n<p>When you&#8217;re done, click the &#8220;<strong>Update<\/strong>&#8221; button to save progress.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"go-live\">When do you want the website to go live? section<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>For this section, we need to add a set of blocks, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading<\/strong> block;<\/li>\n\n\n\n<li><strong>Checkbox Field<\/strong> block;<\/li>\n\n\n\n<li><strong>Conditional Block<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Date Field<\/strong> block.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Checkbox Field<\/strong> block will display options grading the degrees of urgency, starting from the least urgent to the most urgent (\u201cASAP!\u201d). When the \u201cASAP!\u201d option is selected, it will trigger the <strong>Conditional Block<\/strong>, revealing the <strong>Date Field<\/strong> block where users may select the exact date when they need a website to go live.<\/p>\n\n\n\n<p>To display graded values, you can use other blocks, such as the <strong>Select Field<\/strong>, <strong>Radio Field<\/strong>, or <strong>Range Field<\/strong> block.<\/p>\n\n\n\n<p>After adding the <strong>Checkbox Field<\/strong> block, go to the <strong>General <\/strong>block settings and set the <strong>FORM FIELD NAME<\/strong> value to \u201crelease_date\u201d. Then click on the \u201c<strong>Manual items<\/strong>\u201d button to reveal the <strong>Edit Manual Options<\/strong> pop-up.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/select-field-release-date-urgency.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/select-field-release-date-urgency-retina.png 2x\" alt=\"select field release date edit manual options\" \/><\/figure>\n\n\n\n<p>We will add three options, including: \u201cAny time soon,\u201d \u201cI don&#8217;t know,\u201d and \u201cASAP!\u201d. For the \u201cASAP!\u201d option, we need to fill in the:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>VALUE<\/strong> \u2014 it will be used in the next block (<strong>Conditional Block<\/strong>);<\/li>\n\n\n\n<li><strong>CALCULATE<\/strong> \u2014 its value will be used in the final formula, since the urgency of website production requires additional spending.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>When you&#8217;re done, click the \u201c<strong>Update<\/strong>\u201d button to save your progress.&nbsp;Now, let\u2019s fine-tune the <strong>Conditional Block<\/strong>. Click the \u201c<strong>crossed arrows<\/strong>\u201d buttons to open the <strong>Conditional Logic<\/strong> pop-up.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/conditional-block.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/conditional-block-retina.png 2x\" alt=\"setting conditional logic\" \/><\/figure>\n\n\n\n<p>After that, feel free to apply the following set of settings:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/conditional-block-settings.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/conditional-block-settings-retina.png 2x\" alt=\"conditional logic popup\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WHICH FUNCTION NEED EXECUTE?<\/strong> \u2014 in this field, select the \u201cShow if\u2026\u201d option;<\/li>\n\n\n\n<li><strong>FIELD<\/strong> \u2014 in the dropdown, select the field that will trigger conditional logic. In our case, it\u2019s the \u201crelease_date\u201d field;<\/li>\n\n\n\n<li><strong>OPERATOR<\/strong> \u2014 in the dropdown select the value \u201cIn the list\u201d;<\/li>\n\n\n\n<li><strong>VALUE TO COMPARE<\/strong> \u2014 in this field, we need to enter the <strong>Checkbox Field<\/strong> \u201cASAP!\u201d option value, which is \u201casap\u201d.<\/li>\n<\/ul>\n\n\n\n<p>When done, click the \u201c<strong>Update<\/strong>\u201d button.&nbsp;Now we can add the <strong>Date Field<\/strong> block to the <strong>Conditional Block<\/strong>. Click on the \u201c<strong>+<\/strong>\u201d button, and then type date in the search field to add the <strong>Date Field<\/strong> block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/adding-date-field-block.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/adding-date-field-block-retina.png 2x\" alt=\"adding date field block\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"total\">Total section<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>This is the last section of the form. Feel free to add the following blocks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading<\/strong> block;<\/li>\n\n\n\n<li><strong>Calculated Field<\/strong> block.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Calculated Field<\/strong> block will include the formula that counts the final price of the website creation. Let\u2019s\u200b\u200b fine-tune the block.&nbsp;Click on the button with the \u201c<strong>wrench<\/strong>\u201d icon to add a set of fields to the block\u2019s input.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/calculated-field-block.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/calculated-field-block-retina.png 2x\" alt=\"calculated field\" \/><\/figure>\n\n\n\n<p>The final formula looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>%website-type% + (%pages_counter% *20) + %basics% + %content% + %testing% + %release_date%<\/code><\/pre>\n\n\n\n<p>Basically, we\u2019re summing up all the values of the selected options in six fields. The %pages_counter% field is multiplied by twenty (20) because creating each additional page costs $20.&nbsp;<\/p>\n\n\n\n<p>When done, click on the \u201c<strong>Publish<\/strong>\u201d button to publish your form.<\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"others\">Other Field and Form Actions<\/h3>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>If you want this calculator to act as a request form, you can add an <strong>Action Button<\/strong> block to allow users to submit the results.&nbsp;<\/p>\n\n\n\n<p>In order to save them in the <strong>Form Records<\/strong> section, which can be accessed via <strong><em>WordPress Dashboard &gt; JetFormBuilder &gt; Form Records <\/em><\/strong>path, you need to add the \u201cSave Form Record\u201d form action. To do so, go to the <strong>JetForm<\/strong> tab in the form settings, scroll down to <strong>Post Submit Actions<\/strong>, and click \u201c<strong>+ New Action<\/strong>.\u201d&nbsp;In the <strong>Add new action<\/strong> pop-up, find the \u201cSave Form Record\u201d form action and click on it.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/save-form-record.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/save-form-record-retina.png 2x\" alt=\"save form record form action\" \/><\/figure>\n\n\n\n<p>On the next screen, click the \u201c<strong>Update<\/strong>\u201d button.&nbsp; After adding the form action, update the form to save your progress.<\/p>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"results\">Check the Results<\/h2>\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Before we check the form, we need to add it to the page. To do so, click on the \u201c<strong>&lt;&lt;<\/strong>\u201d button in the upper right corner. It will trigger the <strong>Use the form<\/strong> pop-up, where you can choose how to add a form to the final page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/use-the-form-popup.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/use-the-form-popup-retina.png 2x\" alt=\"adding a form to the page\" \/><\/figure>\n\n\n\n<p>Now let\u2019s preview the form. In the form, we will select the following options:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-first-part-of-the-form-preview.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-first-part-of-the-form-preview-retina.png 2x\" alt=\"the first part of the form preview\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Website type<\/strong> \u2014 \u201cWooCommerce \u2014 $700\u201d;<\/li>\n\n\n\n<li><strong>Website basics<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Number of Pages ($20\/page) <\/strong>\u2014 \u201c15\u201d;<\/li>\n\n\n\n<li>\u201cPremium Theme \u2014 $150\u201d;<\/li>\n\n\n\n<li>\u201cPremium Plugins \u2014 $199\u201d;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Website content<\/strong> \u2014 \u201cCreative website copy \u2014 $1400\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-second-part-of-the-form-preview.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/the-second-part-of-the-form-preview-retina.png 2x\" alt=\"the second part of the form preview\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Testing and maintenance<\/strong> \u2014 \u201cPrelaunch support \u2014 $330\u201d;<\/li>\n\n\n\n<li><strong>When do you want the website to go live?<\/strong> \u2014 \u201cASAP!\u201d:\n<ul class=\"wp-block-list\">\n<li>\u201c11.03.2025.\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>If we click on the \u201c<strong>SEND REQUEST<\/strong>\u201d button, we\u2019ll receive a \u201cForm successfully submitted.\u201d notification, and we can go to <strong><em>WordPress Dashboard > JetFormBuilder > Form Records<\/em><\/strong> to see the form entry.<\/p>\n\n\n\n<p>Hover the form entry over and click on the \u201c<strong>View<\/strong>\u201d link.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/form-record.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/form-record-retina.png 2x\" alt=\"checking form entry\" \/><\/figure>\n\n\n\n<p>As you can see, all the form field options that we selected while filling out the form were fully stored.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/form-record-website-request-details.png\" srcset=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/form-record-website-request-details-retina.png 2x\" alt=\"form record website request details\" \/><\/figure>\n<\/div>\n\n\n\n<p>Following these steps, you can successfully create a cost calculator WordPress form using <em>JetFormBuilder<\/em>. This form will provide a seamless and interactive experience for users estimating website development costs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A website cost calculator allows users to estimate the price of developing a website based on their specific needs. This form is useful for freelancers, agencies, and businesses offering website development services. By selecting various options, users receive an estimated cost tailored to their project. Contents Form Fields Structure The form consists of the following&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"categories":[16],"tags":[],"class_list":["post-11044","post","type-post","status-publish","format-standard","hentry","category-cases"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock<\/title>\n<meta name=\"description\" content=\"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\" \/>\n<meta property=\"og:site_name\" content=\"FormBuilder\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.facebook.com\/crocoblock\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T06:09:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-01T10:15:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\" \/>\n<meta name=\"author\" content=\"Oksana Shapirenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MRcrocoblock\" \/>\n<meta name=\"twitter:site\" content=\"@MRcrocoblock\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oksana Shapirenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\"},\"author\":{\"name\":\"Oksana Shapirenko\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/9aa74011765d14498d8fece4ca3f0475\"},\"headline\":\"How to Create Calculator via Form\",\"datePublished\":\"2023-09-01T06:09:15+00:00\",\"dateModified\":\"2025-04-01T10:15:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\"},\"wordCount\":1758,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\",\"articleSection\":[\"Cases\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\",\"name\":\"How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\",\"datePublished\":\"2023-09-01T06:09:15+00:00\",\"dateModified\":\"2025-04-01T10:15:26+00:00\",\"description\":\"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.\",\"breadcrumb\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\",\"contentUrl\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png\",\"width\":600,\"height\":375},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Calculator via Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#website\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/\",\"name\":\"FormBuilder\",\"description\":\"Just another WordPress site\",\"publisher\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization\",\"name\":\"Crocoblock\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2021\/06\/JetFormBuilder-Preview.svg\",\"contentUrl\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2021\/06\/JetFormBuilder-Preview.svg\",\"width\":1,\"height\":1,\"caption\":\"Crocoblock\"},\"image\":{\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.facebook.com\/crocoblock\",\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/x.com\/MRcrocoblock\",\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.instagram.com\/mrcrocoblock\/\",\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.linkedin.com\/company\/crocoblock\/\",\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.pinterest.com\/crocoblock\/\",\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.youtube.com\/c\/Crocoblock\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/9aa74011765d14498d8fece4ca3f0475\",\"name\":\"Oksana Shapirenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/secure.gravatar.com\/avatar\/715977b4aaa25971be06db1b01886d163d57d34805dac6b4738c116091a1113a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/secure.gravatar.com\/avatar\/715977b4aaa25971be06db1b01886d163d57d34805dac6b4738c116091a1113a?s=96&d=mm&r=g\",\"caption\":\"Oksana Shapirenko\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock","description":"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock","og_description":"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.","og_url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/","og_site_name":"FormBuilder","article_publisher":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.facebook.com\/crocoblock","article_published_time":"2023-09-01T06:09:15+00:00","article_modified_time":"2025-04-01T10:15:26+00:00","og_image":[{"url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png","type":"","width":"","height":""}],"author":"Oksana Shapirenko","twitter_card":"summary_large_image","twitter_creator":"@MRcrocoblock","twitter_site":"@MRcrocoblock","twitter_misc":{"Written by":"Oksana Shapirenko","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#article","isPartOf":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/"},"author":{"name":"Oksana Shapirenko","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/9aa74011765d14498d8fece4ca3f0475"},"headline":"How to Create Calculator via Form","datePublished":"2023-09-01T06:09:15+00:00","dateModified":"2025-04-01T10:15:26+00:00","mainEntityOfPage":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/"},"wordCount":1758,"commentCount":0,"publisher":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization"},"image":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage"},"thumbnailUrl":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png","articleSection":["Cases"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/","name":"How to Create a Cost Calculator WordPress Form \u2014 JetFormBuilder | Crocoblock","isPartOf":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage"},"image":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage"},"thumbnailUrl":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png","datePublished":"2023-09-01T06:09:15+00:00","dateModified":"2025-04-01T10:15:26+00:00","description":"Create a WordPress website cost calculator with JetFormBuilder to estimate development costs based on user selections. Perfect for freelancers, agencies, and businesses.","breadcrumb":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#primaryimage","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png","contentUrl":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2025\/04\/create-a-form.png","width":600,"height":375},{"@type":"BreadcrumbList","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/features\/how-to-create-calculator-via-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Calculator via Form"}]},{"@type":"WebSite","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#website","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/","name":"FormBuilder","description":"Just another WordPress site","publisher":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#organization","name":"Crocoblock","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/logo\/image\/","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2021\/06\/JetFormBuilder-Preview.svg","contentUrl":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-content\/uploads\/2021\/06\/JetFormBuilder-Preview.svg","width":1,"height":1,"caption":"Crocoblock"},"image":{"@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.facebook.com\/crocoblock","https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/x.com\/MRcrocoblock","https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.instagram.com\/mrcrocoblock\/","https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.linkedin.com\/company\/crocoblock\/","https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.pinterest.com\/crocoblock\/","https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/www.youtube.com\/c\/Crocoblock\/"]},{"@type":"Person","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/9aa74011765d14498d8fece4ca3f0475","name":"Oksana Shapirenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/#\/schema\/person\/image\/","url":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/secure.gravatar.com\/avatar\/715977b4aaa25971be06db1b01886d163d57d34805dac6b4738c116091a1113a?s=96&d=mm&r=g","contentUrl":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/secure.gravatar.com\/avatar\/715977b4aaa25971be06db1b01886d163d57d34805dac6b4738c116091a1113a?s=96&d=mm&r=g","caption":"Oksana Shapirenko"}}]}},"_links":{"self":[{"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/posts\/11044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/comments?post=11044"}],"version-history":[{"count":37,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/posts\/11044\/revisions"}],"predecessor-version":[{"id":17583,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/posts\/11044\/revisions\/17583"}],"wp:attachment":[{"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/media?parent=11044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/categories?post=11044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/jetformbuilder.com\/wp-json\/wp\/v2\/tags?post=11044"}],"curies":[{"name":"wp","href":"https:\/\/blue-sea-697d.quartiers047.workers.dev:443\/https\/api.w.org\/{rel}","templated":true}]}}