form

by Sushil Dhakal

HTML

<section id="template-calculator-wrap">
	<div class="calculator-margin">
		<h1>Paket-Konfigurator für Ihren Hotel oder Restaurant Webauftritt</h1>
		<div class="red-bar"></div>
		<h2>We create a unique process for each client to ensure that business objectives are met, success is achieved and users are happy.</h2>

		<div class="calculator-total-wrap">
			<div class="row">
				<div class="col-md-6 col-sm-6 col-xs-6 calc-total1">
					<h1><span>CHF</span> 4’850.-</h1>
					<h3>Erstellung einmalig</h3>
				</div>

				<div class="col-md-6 col-sm-6 col-xs-6 calc-total2">
					<h1><span>CHF</span> 2’975.-</h1>
					<h3>Unterhalt jährlich</h3>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6 col-sm-6">
				<div class="price-col-title-wrap">
					<h4>Immer enthalten</h4>
					<h3><span>CHF</span> <span id="immer-total">0</span>.-</h3>
				 	  <input type="checkbox" id="c1" class="immer" value="50" name="cc" onclick="return false" checked/>
				      <label for="c1"><span> </span> Installation Wordpress</label> <br/>
				      
				      <input type="checkbox" id="c2" class="immer" value="50" name="cc"/>
				      <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br/>

				      <input type="checkbox" id="c3" class="immer" value="50" name="cc"/>
				      <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br/>

				      <input type="checkbox" id="c4" class="immer" value="50" name="cc"/>
				      <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br/>

				      <input type="checkbox" id="c5" class="immer" value="50" name="cc"/>
				      <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br/>

				      <input type="checkbox" id="c6" class="immer" value="50" name="cc"/>
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br/>
		      </div>

		      <div...

CSS

input#gform_submit_button_1 {
    text-indent: 0px;
    background: #da2321 !important;
    height: auto;
	}
	h3.gform_title {
    display: none;
	}
	label.gfield_label {
    display: none !important;
	}
	input#input_1_1 , textarea#input_1_3 , input#input_1_2 , input#input_1_4 , input#input_1_5{
    background: #fff !important;
	}
	.gform_footer.top_label {
    text-align: center;
	}
	.template-form-wrapper {
    max-width: 1100px;
    margin: 0px auto;
	}
	div#content {
    background: #e8e4e5;
	}
	article#post-550 {
    display: none;
	}
	textarea#input_1_3 {
    padding-left: 30px;
    padding-top: 10px;

JavaScript

var inputs = document.getElementsByClassName('immer'),
	        total  = document.getElementById('immer-total');
	
	 for (var i=0; i < inputs.length; i++) {
	        inputs[i].onchange = function() {
	            var add = this.value * (this.checked ? 1 : -1);
	            total.innerHTML = parseFloat(total.innerHTML) + add
	        }
	    }

	 var dazuinputs = document.getElementsByClassName('dazu'),
	        totalDazu  = document.getElementById('dazu-total');
	 for (var i=0; i < dazuinputs.length; i++) {
	        dazuinputs[i].onchange = function() {
	            var add = this.value * (this.checked ? 1 : -1);
	            totalDazu.innerHTML = parseFloat(totalDazu.innerHTML) + add
	        }
	    }