Калькулятор расчета стоимости сайта

Калькулятор стоимости онлайн, выберите необходимые параметры и узнайте итоговую сумму.

Поля отмеченные (*) - обязательны для заполнения!

Предлагаем создание онлайн калькулятора стоимости по техническому заданию заказчика. Для заказа отправьте запрос на контакты, указанные на сайте.

Как реализован скрипт

На этом примере скрипт берет значения "value" из списков формы (RSForm) и методом сложения выводит общую сумму. Калькулятор работает как с компонентом формы, так и если вставить просто кодом. Для этого вам надо добавить в дополнительные атрибуты формы значение:

onchange="calc()"

При этом значения такие как: category, shablon, zapolnenie, design и другие вы можете заменить на ваши.

Исходный код HTML

<div id="calc-summa-text">Стоимость разработки сайта: <span id="result">0</span> $.</div>

<form method="post" id="userForm" class="formResponsive" action="">

<p><span class="red">*</span> Название организации</p>
<input type="text" value="" size="20" name="form[company]" id="company" class="rsform-input-box" />

<p><span class="red">*</span> Контактное лицо</p>
<input type="text" value="" size="20" name="form[name]" id="name" class="rsform-input-box" />

<p><span class="red">*</span> Телефон для связи</p>
<input type="text" value="" size="20" name="form[phone]" id="phone" class="rsform-input-box" />

<p><span class="red">*</span> Электронная почта</p>
<input type="text" value="" size="20" name="form[email]" id="email" class="rsform-input-box" />

<p><span class="red">*</span> Выберите категорию сайта</p>
<select name="form[category][]" id="category" onchange="calc()" class="rsform-select-box"><option value="0">выбрать из списка...</option><option value="100">Сайт визитка - 100$</option><option value="200">Корпоративный сайт - 200$</option><option value="270">Интернет магазин (каталог) - 270$</option></select>

<p>Количество уникальных шаблонов</p>
<select name="form[shablon][]" id="shablon" onchange="calc()" class="rsform-select-box"><option value="0">1 - шаблон сайта - 0$</option><option value="50">2 - шаблон сайта - 50$</option><option value="75">3 - шаблон сайта - 75$</option><option value="100">4 - шаблон сайта - 100$</option><option value="125">5 - шаблон сайта - 125$</option></select>

<p>Заполнение страниц</p>
<select name="form[zapolnenie][]" id="zapolnenie" onchange="calc()" class="rsform-select-box"><option value="0">5 &ndash; страниц - 0$</option><option value="10">10 &ndash; страниц - 10$</option><option value="40">25 &ndash; страниц - 40$</option><option value="90">50 &ndash; страниц - 90$</option><option value="190">100 &ndash; страниц - 190$</option></select>

<p>Логотип и фирменный стиль</p>
<select name="form[createlogo][]" id="createlogo" onchange="calc()" class="rsform-select-box"><option value="0">Фирменный стиль имеется - 0$</option><option value="70">Необходимо разработать - 70$</option></select>

<p><span class="red">*</span>Направление дизайна сайта</p>
<select name="form[design][]" id="design" onchange="calc()" class="rsform-select-box"><option value="0">выбрать из списка...</option><option value="50">Классический стиль сайта - 50$</option><option value="60">Ретро-стиль дизайна - 60$</option><option value="60">Дизайн сайтов в стиле &laquo;гранж&raquo; - 60$</option><option value="100">Мультипликационный (рисованный) дизайн - 100$</option><option value="70">Журнальный дизайн сайтов - 70$</option></select>

<p>Количество языков контента</p>
<select name="form[language][]" id="language" onchange="calc()" class="rsform-select-box"><option value="0">1 - язык сайта - 0$</option><option value="20">2 - языка сайта - 20$ (за каждые 10 стр.)</option><option value="60">3 - языка сайта - 60$ (за каждые 10 стр.)</option></select>

<p>Написание контента для сайта</p>
<select name="form[contentsite][]" id="contentsite" onchange="calc()" class="rsform-select-box"><option value="0">Не требуется - 0$</option><option value="20">Продающий текст - 1000 знаков - 20$</option><option value="35">Продающий текст - 2000 знаков - 35$</option><option value="78">Продающий текст - 4000 знаков - 78$</option><option value="40">Копирайт - 4000 знаков - 40$</option><option value="75">Копирайт - 8000 знаков - 75$</option><option value="100">Копирайт - 10000 знаков - 100$</option><option value="32">Рерайт - 4000 знаков - 32$</option><option value="64">Рерайт - 8000 знаков - 64$</option><option value="80">Рерайт - 10000 знаков - 80$</option><option value="60">Seo текст - 4000 знаков - 60$</option><option value="120">Seo текст - 8000 знаков - 120$</option><option value="150">Seo текст - 10000 знаков - 150$</option></select>

<p>Адаптация под мобильные устройства</p>
<select name="form[mobile][]" id="mobile" onchange="calc()" class="rsform-select-box"><option value="0">выбрать из списка...</option><option value="70">Адаптация основного шаблона - 70$</option><option value="150">Отдельный мобильный сайт - 150$</option></select>

<p>Укажите списком адреса сайтов или страниц, которые Вам нравятся по дизайну либо по другим параметрам.</p>
<textarea cols="50" rows="5" name="form[lovesite]" id="lovesite" class="rsform-text-box"></textarea>

<p>Опишите Ваши пожелания в свободной форме.</p>
<textarea cols="50" rows="5" name="form[dopinfo]" id="dopinfo" class="rsform-text-box"></textarea>

<button type="submit" name="form[send]" id="send" class="rsform-submit-button" >Отправить заявку с выбранными параметрами</button>

<input type="hidden" name="form[formId]" value="4"/>
</form>

JS код

<script type="text/javascript">
function calc() {
	var category = document.getElementById("category");
	var shablon = document.getElementById("shablon");
	var zapolnenie = document.getElementById("zapolnenie");
	var createlogo = document.getElementById("createlogo");
	var design = document.getElementById("design");
	var language = document.getElementById("language");         
	var contentsite = document.getElementById("contentsite");
	var mobile = document.getElementById("mobile");  

	var price = 0;
	price += parseInt(category.options[category.selectedIndex].value);
	price += parseInt(shablon.options[shablon.selectedIndex].value);
	price += parseInt(zapolnenie.options[zapolnenie.selectedIndex].value);
	price += parseInt(createlogo.options[createlogo.selectedIndex].value);
	price += parseInt(design.options[design.selectedIndex].value);
	price += parseInt(language.options[language.selectedIndex].value); 
	price += parseInt(contentsite.options[contentsite.selectedIndex].value);  
	price += parseInt(mobile.options[mobile.selectedIndex].value);  

	result.innerHTML = price;
	}
</script>