This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
skoobi
Hi. I've built my own webform on a page within partials and am looking to either clear the form after it has successfully sent or hide the form. I'd rather hide it but clearing it would be good.
Heres these code for the page and partial::
url = "/contact"
layout = "default"
title = "Bookings and Contact"
meta_title = ""
==
<?php
function onStart()
{
$this['showForm'] = true;
}
function onSend()
{
$rules = ['full_name' => 'required', 'email' => 'required|email', 'spam' => 'required'];
$validator = Validator::make(Input::all(), $rules);
if ($validator->fails()) {
$this['result'] = 'Please make sure you have filled in the form correctly';
} else {
if(Input::get('spam') == 8) {
Mail::send('contact::form', Input::all(), function($message) {
$message->to('email@email.com', 'Something cool');
$message->from('email@email.com', 'Something cool');
$message->subject('Web-form submission!');
$message->replyTo(Input::get('email'), Input::get('full_name'));
});
$this['result_success'] = 'Your enquiry has been sent! We will get in touch with you shortly...';
} else {
$this['result'] = 'Anti spam is incorrect!!! ';
}
}
}
?>
==
<div class="w-full bg-no-repeat bg-cover bg-fixed sm:bg-cover md:bg-contain lg:bg-contain bg-center"
style="background-image: url('{{ url('storage/app/media/header.svg') }}')">
<div class="py-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto bg-white bg-opacity-75">
<h2 class="text-3xl sm:text-3xl md:text-4xl lg:text-5xl font-subtitle font-semibold text-grade-blue tracking-wide text-center">
Parent/Student General Enquiries
</h2>
{% if showForm %}
{% partial "contact-form" %}
{% endif %}
</div>
</div>
</div>
</div>
<form data-request="onSend"
data-request-update="result: '#result'"
data-request-flash
class=" mx-0 px-0 sm:mx-0 sm:px-0 md:mx-10 md:px-10 lg:mx-10 lg:px-10 mt-5">
<p class="mb-5">
<span class="text-red-600 text-sm">* required fields</span>
</p>
{% partial "result" %}
{{ form_token() }}
<div id="form">
<div>
<label for="subjects" class="block text-sm font-medium text-gray-700">
Subjects
</label>
<select id="subjects"
name="subjects"
class="mt-1 block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-grade-pink
focus:border-grade-pink sm:text-sm rounded-md">
<option value="not selected" selected>
Please Select
</option>
<option value="Biology">
Biology
</option>
<option value="Chemistry">
Chemistry
</option>
<option value="Physics">
Physics
</option>
<option value="Combined Science">
Combined Science
</option>
</select>
</div>
<div class="mt-5">
<label for="options" class="block text-sm font-medium text-gray-700">
Options
</label>
<select id="options"
name="options"
class="mt-1 block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-grade-pink
focus:border-grade-pink sm:text-sm rounded-md">
<option value="not selected" selected>
Please Select
</option>
<option value="Online Tuition">
Online Tuition
</option>
<option value="In-person Tuition">
In-person Tuition
</option>
<option value="Home Schooling">
Home Schooling
</option>
</select>
</div>
<div class="mt-5">
<label for="levels" class="block text-sm font-medium text-gray-700">
Levels
</label>
<select id="levels"
name="levels"
class="mt-1 block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-grade-pink
focus:border-grade-pink sm:text-sm rounded-md">
<option value="not selected" selected>
Please Select
</option>
<option value="KS3">
KS3
</option>
<option value="KS4 (GCSE)">
KS4 (GCSE)
</option>
<option value="Higher / Foundation">
Higher / Foundation
</option>
<option value="Year 11 Study Leave ">
Year 11 Study Leave
</option>
</select>
</div>
<div class="mt-5">
<label for="full_name" class="block text-sm font-medium text-gray-700">
Full Name <span class="text-red-600 text-sm">*</span>
</label>
<div class="mt-1">
<input type="text" name="full_name" id="full_name" class="mt-1 pl-3 pr-10 py-2 shadow-sm border focus:ring-grade-pink
focus:border-grade-pink block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="Joe Bloggs">
</div>
</div>
<div class="mt-5">
<label for="email" class="block text-sm font-medium text-gray-700">
Email <span class="text-red-600 text-sm">*</span>
</label>
<div class="mt-1">
<input type="email" name="email" id="email"
class="mt-1 pl-3 pr-10 py-2 shadow-sm border focus:ring-grade-pink focus:border-grade-pink block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="you@example.com">
</div>
</div>
<div class="mt-5">
<label for="enquiry" class="block text-sm font-medium text-gray-700">Your Enquiry</label>
<div class="mt-1">
<textarea rows="5" name="enquiry" id="enquiry"
class="mt-1 pl-3 pr-10 py-2 shadow-sm border focus:ring-grade-pink focus:border-grade-pink block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
</div>
</div>
<div class="mt-5">
<label for="hear_about_us" class="block text-sm font-medium text-gray-700">
Where did you hear about us
</label>
<select id="hear_about_us"
name="hear_about_us"
class="mt-1 block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-grade-pink
focus:border-grade-pink sm:text-sm rounded-md">
<option value="not selected" selected>
Please Select
</option>
<option value="Google">
Google
</option>
<option value="Linkedin">
Linkedin
</option>
<option value="Instagram">
Instagram
</option>
<option value="Twitter">
Twitter
</option>
<option value="Facebook">
Facebook
</option>
<option value="Recommendation">
Recommendation
</option>
<option value="Other">
Other
</option>
</select>
</div>
<div class="mt-5">
<label for="spam" class="block text-sm font-medium text-gray-700">
What is 5+3? <span class="text-red-600 text-sm">*</span>
</label>
<div class="mt-1">
<input type="text" name="spam" id="spam"
class="mt-1 pl-3 pr-10 py-2 shadow-sm border focus:ring-grade-pink focus:border-grade-pink block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="">
</div>
</div>
<button type="submit"
data-attach-loading
class="mt-5 flex justify-between items-center border border-transparent rounded-lg text-white bg-grade-blue px-4
py-2 hover:text-grade-blue hover:bg-white hover:border-grade-blue">
Send Enquiry
</button>
</div>
</form>
Any help or direction would be grateful...
Cheers
daftspunky
Hello, here is a working example.
pages/test.htm
url = "/test"
layout = "default"
==
<?php
function onStart()
{
$this['success'] = null;
}
function onSend()
{
// Validation pass
if (Input::get('spam') == 8) {
$this['success'] = true;
$this['message'] = 'Successful post';
}
// Validation failed
else {
$this['success'] = false;
$this['message'] = 'Anti spam wrong';
}
}
?>
==
<h2>
Parent/Student General Enquiries
</h2>
<div id="contactForm">
{% partial "contact-form" %}
</div>
partials/contact-form.htm
{% if message %}
<div style="color: {{ success ? 'green' : 'red' }}">
{{ message }}
</div>
{% endif %}
{% if not success %}
<form data-request="onSend"
data-request-update="'contact-form': '#contactForm'"
data-request-flash>
{{ form_token() }}
<div id="form">
<label for="spam">
What is 5+3?
</label>
<input type="text" name="spam" id="spam" placeholder="">
<button type="submit">
Send Enquiry
</button>
</div>
</form>
{% endif %}
1-2 of 2