Newsletter form

Styling for the salesforce form.

Default

px

			
				<div class="layout layout-canvas-g">
	<div class="section">
		<div class="columns col1">
			<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper">
				<tbody>
					<tr>
						<td class="stylingblock-content-wrapper camarker-inner">
							<!---->
						</td>
					</tr>
				</tbody>
			</table>
			<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper">
				<tbody>
					<tr>
						<td class="stylingblock-content-wrapper camarker-inner">
							<h1 style="">Blijf op de hoogte</h1>
						</td>
					</tr>
				</tbody>
			</table>
			<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper">
				<tbody>
					<tr>
						<td class="stylingblock-content-wrapper camarker-inner">
							<form id="preferences_form" name="preferences_form" action="https://cloud.nieuws.kmska.be/pref_sbm_new?qs=a3ed9aee53959b17" method="POST">
								<fieldset class="group" id="name_fields" name="name_fields">
									<div class="row">
										<div class="form-group col-xs-4">
											<label for="FirstName">Voornaam</label>
											<input tabindex="1" class="form-control input-md" id="FirstName" name="FirstName" type="text" placeholder="Voornaam" value="" maxlength="40">
											<span class="help-block" id="help-fname"></span>
										</div>
										<div class="form-group col-xs-4">
											<label for="LastName">Achternaam</label>
											<input tabindex="2" class="form-control input-md" id="LastName" name="LastName" type="text" placeholder="Achternaam" value="" maxlength="80">
											<span class="help-block" id="help-lname"></span>
										</div>
									</div>
									<div class="row">
										<div class="col-xs-12 form-check-inline">
											<label class="form-check-label">
												<input type="radio" class="form-check-input" name="optEmail" value="HomeEmail" checked="checked">Privé
											</label>
											<label class="form-check-label">
												<input type="radio" class="form-check-input" name="optEmail" value="WorkEmail">Professioneel
											</label>
										</div>
									</div>
									<div class="row">
										<div id="HomeEmail" class="form-group col-xs-4">
											<label for="npe01__HomeEmail__c">E-mailadres (privé)</label>
											<input tabindex="3" class="form-control input-md" id="npe01__HomeEmail__c" name="npe01__HomeEmail__c" type="text" placeholder="E-mailadres (privé)" value="" maxlength="80">
											<span class="help-block" id="help-HomeEmail"></span>
										</div>
										<div id="WorkEmail" class="form-group col-xs-4" style="display:none">
											<label for="npe01__WorkEmail__c">E-mailadres (professioneel)</label>
											<input tabindex="4" class="form-control input-md" id="npe01__WorkEmail__c" name="npe01__WorkEmail__c" type="text" placeholder="E-mailadres (professioneel)" value="" maxlength="80">
											<span class="help-block" id="help-WorkEmail"></span>
										</div>
									</div>
								</fieldset>
								<fieldset class="group" id="preferences">
									<legend>Ik wil me inschrijven voor</legend>
									<div class="checkbox">
										<label><input tabindex="5" type="checkbox" id="cbx_Digital_Newsletter__c" name="cbx_Digital_Newsletter__c">algemeen nieuws</label><br>
										<label><input tabindex="6" type="checkbox" id="cbx_Pref_Social__c" name="cbx_Pref_Social__c">activiteiten en evenementen</label><br>
										<label><input tabindex="7" type="checkbox" id="cbx_Pref_Family__c" name="cbx_Pref_Family__c">families</label><br>
										<label><input tabindex="8" type="checkbox" id="cbx_Pref_Science__c" name="cbx_Pref_Science__c">wetenschappelijk nieuws</label><br>
										<label><input tabindex="9" type="checkbox" id="cbx_Pref_Educational__c" name="cbx_Pref_Educational__c">onderwijs</label><br>
										<label><input tabindex="10" type="checkbox" id="cbx_Digital_Newsletter__c" name="cbx_Magazine__c">Zaal Z magazine</label><br>
									</div>
								</fieldset>
								<div id="address_data" style="display:none">
									<div class="row">
										<div class="col-xs-12 form-check-inline">
											<label class="form-check-label">
												<input type="radio" class="form-check-input" name="optAddress" value="HomeMailing" checked="checked">Privé
											</label>
											<label class="form-check-label">
												<input type="radio" class="form-check-input" name="optAddress" value="WorkMailing">Professioneel
											</label>
										</div>
									</div>
									<fieldset class="group" id="address_fields" name="address_fields">
										<div class="row">
											<div class="form-group col-xs-4">
												<label for="MailingStreet">Straat en huisnummer</label>
												<input tabindex="12" class="form-control input-md" id="MailingStreet" name="MailingStreet" type="text" placeholder="Straat en huisnummer" value="" maxlength="40">
												<span class="help-block" id="help-MailingStreet"></span>
											</div>
											<div class="form-group col-xs-4">
												<label for="MailingPostalCode">Postcode</label>
												<input tabindex="13" class="form-control input-md" id="MailingPostalCode" name="MailingPostalCode" type="text" placeholder="Postcode" value="" maxlength="80">
												<span class="help-block" id="help-MailingPostalCode"></span>
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-4">
												<label for="MailingCity">Gemeente</label>
												<input tabindex="14" class="form-control input-md" id="MailingCity" name="MailingCity" type="text" placeholder="Gemeente" value="" maxlength="80">
												<span class="help-block" id="help-MailingCity"></span>
											</div>
											<div class="form-group col-xs-4">
												<label for="MailingCountry">Land</label>
												<input tabindex="15" class="form-control input-md" id="MailingCountry" name="MailingCountry" type="text" placeholder="Land" value="" maxlength="80">
												<span class="help-block" id="help-MailingCountry"></span>
											</div>
										</div>
									</fieldset>
									<fieldset class="group" id="address_fields_aff" name="address_fields_aff" style="display:none">
										<div id="AccountNameRow" class="row">
											<div class="form-group col-xs-8">
												<label for="Account_Name_aff">Bedrijf</label>
												<input tabindex="11" class="form-control input-md" id="Account_Name_aff" name="Account_Name_aff" type="text" placeholder="Bedrijf" value="" maxlength="40">
												<span class="help-block" id="help-Account_Name"></span>
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-4">
												<label for="MailingStreet_aff">Straat en huisnummer</label>
												<input tabindex="12" class="form-control input-md" id="MailingStreet_aff" name="MailingStreet_aff" type="text" placeholder="Straat en huisnummer" value="" maxlength="40">
												<span class="help-block" id="help-MailingStreet_aff"></span>
											</div>
											<div class="form-group col-xs-4">
												<label for="MailingPostalCode_aff">Postcode</label>
												<input tabindex="13" class="form-control input-md" id="MailingPostalCode_aff" name="MailingPostalCode_aff" type="text" placeholder="Postcode" value="" maxlength="80">
												<span class="help-block" id="help-MailingPostalCode_aff"></span>
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-4">
												<label for="MailingCity_aff">Gemeente</label>
												<input tabindex="14" class="form-control input-md" id="MailingCity_aff" name="MailingCity_aff" type="text" placeholder="Gemeente" value="" maxlength="80">
												<span class="help-block" id="help-MailingCity_aff"></span>
											</div>
											<div class="form-group col-xs-4">
												<label for="MailingCountry_aff">Land</label>
												<input tabindex="15" class="form-control input-md" id="MailingCountry_aff" name="MailingCountry_aff" type="text" placeholder="Land" value="" maxlength="80">
												<span class="help-block" id="help-MailingCountry_aff"></span>
											</div>
										</div>
									</fieldset>
								</div>
								<!-- submit button -->
								<div class="l-grid__col">
									<button tabindex="16" class="webform-button--submit button button--primary js-form-submit form-submit c-button l-form__submitc-button--with-icon u-margin-left-1x" type="submit" id="edit-actions-submit" name="op" value="Bevestigen">
										<span class="c-button__text">INSCHRIJVEN➔</span>
									</button>
									&nbsp;&nbsp;
								</div>
								<input type="hidden" id="contact" name="contact" value="">
								<input type="hidden" id="preferredLanguage" name="preferredLanguage" value="Nederlands">
								<input type="hidden" id="Account_Name" name="Account_Name" value="">
								<input type="hidden" id="Account_Type" name="Account_Type" value="">
								<input type="hidden" id="Account_Type_aff" name="Account_Type_aff" value="">
								<input type="hidden" id="RecAff" name="RecAff" value="">
								<input type="hidden" id="PrefEml" name="PrefEml" value="">
								<input type="hidden" id="PrimAff" name="PrimAff" value="">
							</form>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>