FEATURE #1525: functional contact form template
This commit is contained in:
peter
@@ -144,6 +144,7 @@ footer a:hover {color: #46c1be;}
|
||||
#responsive-menu {display: none;}
|
||||
.top-bar-right .menu.hide-for-large {font-size: 1.5rem; position: absolute; right: 0; top: 25px;}
|
||||
#logo {width: 175px; height: auto;}
|
||||
.top-bar-right {margin-top: 0;}
|
||||
|
||||
.orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
|
||||
.orbit.header .orbit-slide {height: 600px}
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom Wristbands.cz</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700&subset=latin-ext,latin' rel='stylesheet'
|
||||
type='text/css'>
|
||||
<link href="@asset('foundation.min.css')" type="text/css" rel="stylesheet">
|
||||
<script src="@asset('vendor/jquery.min.js')" type="text/javascript"></script>
|
||||
<script src="@asset('foundation.min.js')" type="text/javascript"></script>
|
||||
<link href="@asset('layout.css')" type="text/css" rel="stylesheet">
|
||||
<link href="@asset('style.css')" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<ul class="menu">
|
||||
<li class="menu-text">
|
||||
<a href="{{route('page.index')}}">
|
||||
<img id="logo" src="@asset('images/cwbs_logo_medium.png')" alt="Custom Wristbands Logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<ul class="menu pull-right hide-for-large">
|
||||
<li>
|
||||
<a href="#" onclick="showResponsiveMenu()" id="show-menu">MENU<i class="fa fa-fw fa-2x fa-navicon"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="responsive-menu">
|
||||
<a href="#" id="unload-menu" class="hide-for-large" onclick="hideResponsiveMenu();"><i class="fa fa-fw fa-2x fa-mail-reply"></i></a>
|
||||
@widgetArea('mainMenu')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
@yield('content')
|
||||
</div>
|
||||
<footer class="large">
|
||||
<div class="row text-center">
|
||||
<ul class="menu social-icons">
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa fa-google-plus fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-instagram fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-pinterest-p fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@widgetArea('mainMenu')
|
||||
<div class="clearfix"></div>
|
||||
<hr>
|
||||
<p>
|
||||
@widgetArea('footer')
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
$ (function () {
|
||||
$ (document).foundation ();
|
||||
});
|
||||
|
||||
var menuHolder = document.getElementById('responsive-menu');
|
||||
|
||||
function showResponsiveMenu() {
|
||||
menuHolder.style.display="block";
|
||||
menuHolder.style.height = document.documentElement.clientHeight + 'px';
|
||||
menuHolder.style.height = window.innerHeight + 'px';
|
||||
menuHolder.style.height = '100%;';
|
||||
}
|
||||
|
||||
function hideResponsiveMenu() {
|
||||
menuHolder.style.display="none";
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
if(window.innerWidth >= 1023) {
|
||||
menuHolder.style.display="block";
|
||||
menuHolder.style.height = "auto";
|
||||
} else {
|
||||
hideResponsiveMenu();
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -159,21 +159,27 @@
|
||||
$ (document).foundation ();
|
||||
});
|
||||
|
||||
function showResponsiveMenu() {
|
||||
var menuHolder = document.getElementById('responsive-menu');
|
||||
var menuHolder = document.getElementById('responsive-menu');
|
||||
|
||||
function showResponsiveMenu() {
|
||||
menuHolder.style.display="block";
|
||||
menuHolder.style.height = document.documentElement.clientHeight + 'px';
|
||||
menuHolder.style.height = window.innerHeight + 'px';
|
||||
menuHolder.style.height = '100%;';
|
||||
|
||||
}
|
||||
function hideResponsiveMenu() {
|
||||
var menuHolder = document.getElementById('responsive-menu');
|
||||
|
||||
function hideResponsiveMenu() {
|
||||
menuHolder.style.display="none";
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
if(window.innerWidth >= 1023) {
|
||||
menuHolder.style.display="block";
|
||||
menuHolder.style.height = "auto";
|
||||
} else {
|
||||
hideResponsiveMenu();
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
@extendVisitor('defaultLayout')
|
||||
@section('content')
|
||||
<div class="grey-wrapper p-b-0">
|
||||
<div class="row column text-center m-b-25 show-for-large">
|
||||
<h2>Kontakt</h2>
|
||||
</div>
|
||||
<div class="medium-12 large-6 column columns p-lr-0 contact-detail">
|
||||
<div class="column text-right large-12 medium-6 p-lr-0">
|
||||
<h2 class="hide-for-large">Kontakt</h2>
|
||||
<p class="contact-p green-text"><b>{{$page->module_settings->companyName}}</b></p>
|
||||
<p class="contact-p">
|
||||
{!! nl2br($page->module_settings->address) !!}
|
||||
<br>
|
||||
<br>
|
||||
-<br>
|
||||
tel.: {{$page->module_settings->phone}}<br>
|
||||
e-mail: <a href="mailto:{{$page->module_settings->email}}">{{$page->module_settings->email}}</a></p>
|
||||
<br>
|
||||
</div>
|
||||
<iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.cz/maps/place/50°04'29.''N+14°23'34.8''E" style="border:0" allowfullscreen="" frameborder="0" height="250" width="100%"></iframe>
|
||||
</div>
|
||||
<div class="large-6 column green-wrapper p-25" id="contact-form">
|
||||
<div class="column large-12 medium-8 medium-centered p-lr-0 p-lr-50-sm">
|
||||
<h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
|
||||
<form id="form-{{$page->id}}">
|
||||
{!! csrf_field() !!}
|
||||
<div class="column medium-6">
|
||||
<input class="rounded large" placeholder="jméno a příjmení" name="name" type="text">
|
||||
<input class="rounded large" placeholder="e-mail" name="email" type="text">
|
||||
</div>
|
||||
<div class="column medium-6">
|
||||
<input class="rounded large" placeholder="telefon" name="phone" type="text">
|
||||
<input class="rounded large" placeholder="počet kusů" name="pieces" type="text">
|
||||
</div>
|
||||
<div class="column medium-12">
|
||||
<textarea class="rounded large" placeholder="zpráva" name="message"></textarea>
|
||||
</div>
|
||||
<div class="column medium-4">
|
||||
<input class="rounded large" placeholder="2+5=?" type="text" name="intCaptcha">
|
||||
</div>
|
||||
<div class="column medium-6 right">
|
||||
<a href="#" class="button expanded long secondary rounded" id="formSend">ODESLAT</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('#formSend').click(function() {
|
||||
this.value = 'Odesílám...';
|
||||
$.ajax({
|
||||
url: "{{route('email.send', ['formId' => $page->id])}}",
|
||||
method: 'post',
|
||||
data: $('#form-{{$page->id}}').serialize()
|
||||
}).done(function(resp) {
|
||||
if(resp.status == true) {
|
||||
alert('Úspešne ste nám odoslali správu. Odpovieme Vám čo najskôr!');
|
||||
window.top.location.reload();
|
||||
} else {
|
||||
alert(resp.message);
|
||||
}
|
||||
this.value="ODESLAT";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user