New contact form with friendlycaptcha
This commit is contained in:
Jorit Tijsen
22
resources/assets/sass/abstracts/_mixin.scss
vendored
22
resources/assets/sass/abstracts/_mixin.scss
vendored
@@ -63,3 +63,25 @@
|
||||
@include post_date;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-base {
|
||||
display: block;
|
||||
width: calc(100% - 78px);
|
||||
padding: 10px 39px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(to right, #0f259d, #5ba8f4);
|
||||
font-family: Nunito, serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 0.93;
|
||||
text-align: center;
|
||||
color: $text-inverted-color;
|
||||
margin-bottom: 10px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $text-inverted-color;
|
||||
}
|
||||
}
|
||||
|
||||
1
resources/assets/sass/base/_base.scss
vendored
1
resources/assets/sass/base/_base.scss
vendored
@@ -6,6 +6,7 @@
|
||||
@use "../components/cookie";
|
||||
@use "../components/list";
|
||||
@use "../components/banners";
|
||||
@use "../components/contact_form";
|
||||
|
||||
@use "../layout";
|
||||
|
||||
|
||||
39
resources/assets/sass/components/_button.scss
vendored
39
resources/assets/sass/components/_button.scss
vendored
@@ -1,40 +1,5 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/mixin" as *;
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
width: CALC(100% - 78px);
|
||||
padding: 10px 39px 10px 39px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(to right, #0f259d, #5ba8f4);
|
||||
font-family: Nunito, serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 0.93;
|
||||
text-align: center;
|
||||
color: $text-inverted-color;
|
||||
margin-bottom: 10px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $text-inverted-color;
|
||||
}
|
||||
|
||||
&.auto_width {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.fit_content {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&.btn_facebook_share {
|
||||
background-image: none;
|
||||
background-color: #0f259d;
|
||||
}
|
||||
&.btn_twitter_x_share {
|
||||
background-image: none;
|
||||
background-color: #5ba8f4;
|
||||
}
|
||||
@include btn-base;
|
||||
}
|
||||
|
||||
24
resources/assets/sass/components/_contact_form.scss
vendored
Normal file
24
resources/assets/sass/components/_contact_form.scss
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
@use "../abstracts/mixin" as *;
|
||||
|
||||
.contant-form {
|
||||
.form-group {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
label {
|
||||
width: 160px;
|
||||
}
|
||||
input, textarea {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.action_button {
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-control-file::file-selector-button {
|
||||
@include btn-base;
|
||||
width: fit-content;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
116
resources/views/contact.blade.php
Normal file
116
resources/views/contact.blade.php
Normal file
@@ -0,0 +1,116 @@
|
||||
@extends('layouts/full')
|
||||
|
||||
@section('title')
|
||||
Neem contact op
|
||||
@endsection
|
||||
|
||||
@section('breadcrumb')
|
||||
<ul class="bread_crumb">
|
||||
<li><a title="Home" href="/">Home</a></li>
|
||||
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
||||
<li><a title="NH Gooi" href="{{route('contact')}}">NH Gooi</a></li>
|
||||
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
||||
<li>Neem contact op</li>
|
||||
</ul>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="page_body">
|
||||
<div class="row ">
|
||||
<div class="col-12 col-md-6">
|
||||
<p>NH Gooi is de publieke streekomroep van Gooi en Vechtstreek. We houden je 24 uur per dag
|
||||
op de hoogte van al het nieuws, betrouwbaar en snel. Dat doen we via een eigen nieuws-
|
||||
app, onze website en social media, maar ook op radio en televisie. Daarnaast brengen we
|
||||
een gevarieerd aanbod van podcasts, radio- en televisieprogramma's.</p>
|
||||
|
||||
<p>Ons team van journalisten en programmamakers bestaat uit betaalde krachten, vrijwilligers
|
||||
en stagiaires. We vinden het belangrijk mensen op te leiden en een goede plek te bieden
|
||||
voor talent.</p>
|
||||
|
||||
<p>De redactie van NH Gooi is journalistiek onafhankelijk en wordt geleid door de chef redactie.</p>
|
||||
|
||||
<h3>Contactinformatie</h3>
|
||||
|
||||
<p>Neem contact op met NH Gooi, de streekomroep voor Gooi & Vechtstreek.</p>
|
||||
|
||||
<p>Wij zijn te ontvangen in heel Gooi en Eemland. <br>
|
||||
<a href="{{url('frequenties')}}" class="action_button">
|
||||
<span class="fa fa-list"></span>
|
||||
<span>Frequenties</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="page_margin_top">
|
||||
<b>NHGooi</b><br>
|
||||
Postbus 83<br>
|
||||
1270 AB Huizen<br>
|
||||
Tel: <a href="tel:+31356424776">035-6424774</a><br>
|
||||
KvK: 41194132<br>
|
||||
<br>
|
||||
|
||||
<b>Bezoekadres / Studio:</b><br>
|
||||
IJsselmeerstraat 3B<br>
|
||||
1271 AA Huizen<br><br>
|
||||
|
||||
<p>
|
||||
<b>NHGooi Radio</b><br>
|
||||
IJsselmeerstraat 3B<br/>
|
||||
1271 AA, Huizen<br/>
|
||||
studio: <a href="tel:+31356424776">035-6424776</a><br/>
|
||||
KvK: 41194132<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<h3>Contactformulier</h3>
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form class="contant-form" action="{{ route('contact.submit') }}" method="POST" enctype="multipart/form-data">
|
||||
{{ csrf_field() }}
|
||||
<div class="form-group">
|
||||
<label for="name">Naam</label>
|
||||
<input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Bericht</label>
|
||||
<textarea class="form-control" id="message" name="message" rows="5" required>{{ old('message') }}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="image">Afbeelding (optioneel)</label>
|
||||
<input type="file" class="form-control-file" id="image" name="image" accept="image/*">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="video">Video (optioneel)</label>
|
||||
<input type="file" class="form-control-file" id="video" name="video" accept="video/*">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
{!! FriendlyCaptcha::renderWidget() !!}
|
||||
</div>
|
||||
<button type="submit" class="btn action_button">Verstuur</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
{!! FriendlyCaptcha::renderWidgetScripts() !!}
|
||||
@endpush
|
||||
16
resources/views/emails/contact_submitted.blade.php
Normal file
16
resources/views/emails/contact_submitted.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contactformulier Bericht</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Nieuw bericht van {{ $data['name'] }}</h1>
|
||||
<p><strong>Email:</strong> {{ $data['email'] }}</p>
|
||||
<p><strong>Bericht:</strong></p>
|
||||
<p>{!! nl2br(e($data['message'])) !!}</p>
|
||||
|
||||
@if(isset($data['video_link']))
|
||||
<p><strong>Video Link:</strong> <a href="{{ $data['video_link'] }}">{{ $data['video_link'] }}</a></p>
|
||||
@endif
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user