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

Рассчитайте индивидуальную стоимость. Выберите необходимые параметры и узнайте итоговую сумму.

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

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

На этом примере скрипт берет значения "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>