Contact template - Steve

Name: NC-Websites CMS
Telephone: 0597 - 87 00 37

Een variant op de standaard contact pagina template van onze wel gewaardeerde collega Steven

Hoe te gebruiken?

Kopieer onderstaande code in je templates

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.

HTML
<?php

/** @var \Core\Config */
$config = Locator::get('Config');
?>
<div class="content-template-default content-subtemplate-contact">
	<section class="header">
		<nc-image-carousel name="header" ratio="1" loading="eager"></nc-image-carousel>
	</section>
	<div class="py-3"></div>
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-12 col-md-6 col-lg-6">
				<nc-module-output></nc-module-output>

				<div class="py-3"></div>

				<div class="contact-details">
					<nc-element name="contact-subtitle-01" attributes="class=subtitle" type="span" page="1" default="Contactgegevens"></nc-element>

					<div class="py-2"></div>

					<?= NCCMS::getView('sections/addresses', [
						'allowLinks' => true,
					]) ?>

					<?php if (!empty($config->contact['mail']) || !empty($config->contact['tel'])) { ?>
						<ul class="contact">
							<?php if (!empty($config->contact['mail'])) { ?>
								<li>
									<?= NCCMS::getView('cms/icon', 'fa-at fa-fw') ?>
									<a href="mailto:<?= $config->contact['mail'] ?>"><?= $config->contact['mail'] ?></a>
								</li>
							<?php } ?>

							<?php if (!empty($config->contact['tel'])) { ?>
								<li>
									<?= NCCMS::getView('cms/icon', 'fa-phone fa-fw') ?>
									<a href="tel:<?= $config->contact['tel'] ?>"><?= $config->contact['tel'] ?></a>
								</li>
							<?php } ?>
						</ul>
						<div class="py-3"></div>
					<?php } ?>

					<?php if (!empty($config->contact['btw']) || !empty($config->contact['iban']) || !empty($config->contact['kvk'])) { ?>
						<nc-element name="contact-subtitle-02" attributes="class=subtitle" type="span" page="1" default="Informatie"></nc-element>

						<div class="py-2"></div>

						<ul class="contact">
							<?php if (!empty($config->contact['kvk'])) { ?>
								<li>
									<?= NCCMS::getView('cms/icon', 'fa-building fa-fw mr-2') ?>
									<strong>KvK:</strong> &nbsp; <?= $config->contact['kvk'] ?>
								</li>
							<?php } ?>
							<?php if (!empty($config->contact['btw'])) { ?>
								<li>
									<?= NCCMS::getView('cms/icon', 'fa-badge-percent fa-fw mr-2') ?>
									<strong>BTW:</strong> &nbsp; <?= $config->contact['btw'] ?>
								</li>
							<?php } ?>
							<?php if (!empty($config->contact['iban'])) { ?>
								<li>
									<?= NCCMS::getView('cms/icon', 'fa-money-check-dollar fa-fw mr-2') ?>
									<strong>IBAN:</strong> &nbsp; <?= $config->contact['iban'] ?>
								</li>
							<?php } ?>
						</ul>
					<?php } ?>

				</div>
				<div class="py-3"></div>

				<nc-element name="footer-subtitle-03" attributes="class=subtitle" type="span" page="1" default="Socials"></nc-element>
				<div class="py-2"></div>
				<?php if (!empty($config->contact['socials'])) { ?>
					<ul class="contact-socials">
						<?php foreach ($config->contact['socials'] as $name => $link) { ?>
							<?php if (!empty($link)) { ?>
								<li>
									<a class="text-decoration-none" class="<?= $name ?>" href="<?= $link ?>" target="_blank" rel="noopener" title="<?= \Util\CaseStyles::kebabToName($name) ?> link">
										<i class="fab fa-fw fa-lg fa-<?= $name ?>"></i>
									</a>
								</li>
							<?php } ?>
						<?php } ?>
					</ul>
				<?php } ?>
			</div>

			<div class="col-12 col-sm-12 col-md-6 offset-lg-1 col-lg-5">
				<div class="formbox">
					<nc-element name="contact-title" attributes="class=formtitle" type="h2" default="Neem contact met ons op"></nc-element>

					<div class="py-2"></div>

					<nc-text name="contact-content"></nc-text>

					<nc-form name="contact-form" default="Contactaanvraag"></nc-form>
				</div>
			</div>
		</div>
	</div>
	<?php if (
		(array_key_exists('iframe', $config->contact['address']) &&
			!empty($config->contact['address']['iframe'])) ||
		(array_key_exists('iframe', $config->contact['addressSecondary']) &&
			!empty($config->contact['addressSecondary']['iframe'])) ||
		(array_key_exists('iframe', $config->contact['addressTertiary']) &&
			!empty($config->contact['address']['addressTertiary']))
	) { ?>
		<section class="contact-google-map">
			<div class="py-3"></div>
			<?= NCCMS::getView('sections/addresses-iframe') ?>
		</section>
	<?php } ?>
</div>

CSS
.content-subtemplate-contact .contact-addresses i {
	margin: 0 1rem 0 0 !important;
	min-width: 25px
}

.content-subtemplate-contact .contact-details .contact-address-title {
	color: var(--primary);
	font-weight: 400;
	margin-bottom: .5rem
}

.content-subtemplate-contact ul.contact {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0
}

.content-subtemplate-contact ul.contact li {
	align-items: center;
	color: var(--primary);
	display: flex;
	flex-direction: row;
	margin: 0 0 1rem
}

.content-subtemplate-contact ul.contact li:last-child {
	margin: 0
}

.content-subtemplate-contact ul.contact li i {
	color: var(--secondary);
	font-size: 1.25rem;
	margin: 0 1rem 0 0;
	min-width: 23px
}

.content-subtemplate-contact ul.contact li a {
	color: var(--primary);
	position: relative;
	text-decoration: none
}

.content-subtemplate-contact ul.contact li a:focus,
ul.contact li a:hover {
	color: var(--secondary)
}

.content-subtemplate-contact ul.contact li a:before {
	background: var(--secondary);
	bottom: -4px;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transition: width .4s ease;
	width: 0
}

.content-subtemplate-contact ul.contact li a:focus:before,
ul.contact li a:hover:before {
	width: 100%
}

.content-subtemplate-contact ul.contact li a address,
ul.contact li address {
	margin-bottom: 0 !important
}

.content-subtemplate-contact .subtitle {
	font-size: 1.5rem;
}

body:not([data-editor-mode="content"], [data-editor-mode="layout"]) .content-subtemplate-contact .contact-details i[class^="fa"] {
	color: var(--primary);
}

/* [SOCIALS] */
.content-subtemplate-contact ul.contact-socials {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.25rem;
}

.content-subtemplate-contact ul.contact-socials li {
	margin: 0 0.25rem 0 0;
	font-size: 1.75rem;
}

.content-subtemplate-contact ul.contact-socials li:last-child {
	margin: 0;
}

.content-subtemplate-contact ul.contact-socials li a {
	transition: opacity 0.3s;
}

.content-subtemplate-contact ul.contact-socials li a:hover,
.content-subtemplate-contact ul.contact-socials li a:focus {
	opacity: 0.75;
}

.content-subtemplate-contact ul.contact-socials li a.facebook {
	color: #1877f2;
}

.content-subtemplate-contact ul.contact-socials li a.facebook:hover,
.content-subtemplate-contact ul.contact-socials li a.facebook:focus {
	color: #1877f2;
}

.content-subtemplate-contact ul.contact-socials li a.instagram {
	color: #c32aa3;
}

.content-subtemplate-contact ul.contact-socials li a.instagram:hover,
.content-subtemplate-contact ul.contact-socials li a.instagram:focus {
	color: #c32aa3;
}

.content-subtemplate-contact ul.contact-socials li a.tiktok {
	color: #ff0050;
}

.content-subtemplate-contact ul.contact-socials li a.tiktok:hover,
.content-subtemplate-contact ul.contact-socials li a.tiktok:focus {
	color: #ff0050;
}

.content-subtemplate-contact ul.contact-socials li a.linkedin {
	color: #0a66c2;
}

.content-subtemplate-contact ul.contact-socials li a.linkedin:hover,
.content-subtemplate-contact ul.contact-socials li a.linkedin:focus {
	color: #0a66c2;
}

.content-subtemplate-contact ul.contact-socials li a.twitter {
	color: #1da1f2;
}

.content-subtemplate-contact ul.contact-socials li a.twitter:hover,
.content-subtemplate-contact ul.contact-socials li a.twitter:focus {
	color: #1da1f2;
}

.content-subtemplate-contact ul.contact-socials li a.pinterest {
	color: #bd081c;
}

.content-subtemplate-contact ul.contact-socials li a.pinterest:hover,
.content-subtemplate-contact ul.contact-socials li a.pinterest:focus {
	color: #bd081c;
}

.content-subtemplate-contact ul.contact-socials li a.youtube {
	color: #ff0000;
}

.content-subtemplate-contact ul.contact-socials li a.youtube:hover,
.content-subtemplate-contact ul.contact-socials li a.youtube:focus {
	color: #ff0000;
}

.content-subtemplate-contact ul.contact-socials li a.google {
	color: #ff0000;
}

.content-subtemplate-contact ul.contact-socials li a.google:hover,
.content-subtemplate-contact ul.contact-socials li a.google:focus {
	color: #ff0000;
}

.content-subtemplate-contact .formbox {
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
	padding: 1rem;
	position: relative;
	z-index: 1
}

.content-subtemplate-contact .formbox .formtitle {
	color: var(--primary);
}

.content-subtemplate-contact .formbox form .form-group {
	align-content: center;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: .5rem
}

.content-subtemplate-contact .formbox form label,
.content-subtemplate-contact .formbox form legend {
	color: var(--primary);
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	height: 100%;
	line-height: 1rem;
	margin: 0;
	padding: .5rem 0;
	text-align: left;
	width: 100%
}

.content-subtemplate-contact .formbox form .form-group small {
	font-size: .75rem;
	font-weight: 600
}

.content-subtemplate-contact .formbox form .input-wrapper label {
	color: var(--primary);
	display: inline-block;
	font-size: 1rem;
	margin: 0 0 0 .5rem;
	width: auto
}

.content-subtemplate-contact .formbox form .input-wrapper label small {
	color: var(--primary);
	font-size: .75rem;
	margin: 0 0 0 .25rem
}

.content-subtemplate-contact .formbox form input,
.content-subtemplate-contact .formbox form textarea {
	background-color: #f0f0f0;
	border-color: #f0f0f0;
	box-shadow: none !important;
	color: #000;
	font-size: 1.15rem;
	font-weight: 400;
	outline: none;
	padding: 1.25rem !important
}

.content-subtemplate-contact .formbox form select {
	background-color: #f0f0f0;
	border-color: #f0f0f0;
	display: block;
	font-size: 1rem;
	padding: .5rem;
	width: 100%
}

.content-subtemplate-contact .formbox form input:focus,
.content-subtemplate-contact .formbox form input:hover,
.content-subtemplate-contact .formbox form select.focus-visible,
.content-subtemplate-contact .formbox form select:hover,
.content-subtemplate-contact .formbox form textarea:hover {
	background-color: #fff;
	border-color: var(--success);
	box-shadow: none
}

.content-subtemplate-contact .formbox form input:focus,
.content-subtemplate-contact .formbox form input:hover,
.content-subtemplate-contact .formbox form select:focus-visible,
.content-subtemplate-contact .formbox form select:hover,
.content-subtemplate-contact .formbox form textarea:hover {
	background-color: #fff;
	border-color: var(--success);
	box-shadow: none
}

.content-subtemplate-contact div[data-partial=form] form textarea:hover {
	border-color: var(--primary)
}

.content-subtemplate-contact div[data-partial=form] form textarea:hover {
	border-color: var(--primary)
}

.content-subtemplate-contact .formbox form ::-moz-placeholder {
	color: #6c757d;
	font-size: .875em
}

.content-subtemplate-contact .formbox form ::placeholder {
	color: #6c757d;
	font-size: .875em
}

.content-subtemplate-contact .formbox form:-ms-input-placeholder {
	color: #6c757d;
	font-size: .875em
}

.content-subtemplate-contact .formbox form ::-ms-input-placeholder {
	color: #6c757d;
	font-size: .875em
}

@media only screen and (min-width: 768px) {
	.content-subtemplate-contact .formbox {
		padding: 2rem
	}
}