Skip to content

Instantly share code, notes, and snippets.

@jpalala

jpalala/talk-proposal-submission.php

Created September 27, 2025 10:31
Show Gist options
  • Save jpalala/15ab7a0b359685b7b3976a6c73eecd7d to your computer and use it in GitHub Desktop.
Save jpalala/15ab7a0b359685b7b3976a6c73eecd7d to your computer and use it in GitHub Desktop.
Download ZIP
talk submission
Raw
talk-proposal-submission.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meetup Proposal & Sponsorship Form (jQuery)</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
.form-row {
display: flex;
gap: 20px;
}
.form-col {
flex: 1;
}
/* We'll use jQuery's .hide() and .show() which handles display: none */
.hidden-initial {
display: none;
}
.radio-group label {
display: inline;
margin-right: 20px;
font-weight: normal;
}
.submit-btn {
background-color: #5cb85c;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 10px;
}
.submit-btn:hover {
background-color: #4cae4c;
}
.error {
color: red;
margin-top: 10px;
padding: 10px;
border: 1px solid red;
background-color: #ffeeee;
border-radius: 4px;
}
.success {
color: green;
margin-top: 10px;
padding: 20px;
border: 1px solid green;
background-color: #e6ffe6;
border-radius: 4px;
}
.submission-details {
border-top: 2px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.submission-details h2 {
color: #337ab7;
}
.submission-details p {
margin-bottom: 8px;
}
.submission-details strong {
display: inline-block;
width: 150px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>Meetup Submission Form</h1>
<?php
// PHP SCRIPT START
$errors = [];
$submission_data = null;
$type = $_POST['submission_type'] ?? '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// --- General Contact Validation ---
$firstname = trim($_POST['firstname'] ?? '');
$lastname = trim($_POST['lastname'] ?? '');
$email = trim($_POST['email'] ?? '');
$number = trim($_POST['number'] ?? '');
if (empty($firstname)) $errors[] = "First Name is required.";
if (empty($lastname)) $errors[] = "Last Name is required.";
if (empty($email)) $errors[] = "Email is required.";
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = "A valid Email is required.";
if (empty($number)) $errors[] = "Contact Number is required.";
if ($type === 'talk') {
// --- Talk Proposal Validation ---
$talk_title = trim($_POST['talk_title'] ?? '');
$talk_description = trim($_POST['talk_description'] ?? '');
$city = trim($_POST['city'] ?? '');
$ok_with_zoom = $_POST['ok_with_zoom'] ?? 'No';
if (empty($talk_title)) $errors[] = "Talk Title is required for a Talk Proposal.";
if (empty($talk_description)) $errors[] = "Talk Description is required for a Talk Proposal.";
if (empty($city)) $errors[] = "City of Residence is required for a Talk Proposal.";
if (empty($errors)) {
$submission_data = [
'type' => 'Talk Proposal',
'First Name' => htmlspecialchars($firstname),
'Last Name' => htmlspecialchars($lastname),
'Email' => htmlspecialchars($email),
'Contact Number' => htmlspecialchars($number),
'City' => htmlspecialchars($city),
'Talk Title' => htmlspecialchars($talk_title),
'Talk Description' => htmlspecialchars($talk_description),
'Social Media Channels' => htmlspecialchars(trim($_POST['social_media'] ?? 'N/A')),
'OK with Zoom' => htmlspecialchars($ok_with_zoom),
];
}
} elseif ($type === 'sponsor') {
// --- Event Sponsorship Validation ---
$company_name = trim($_POST['company_name'] ?? '');
$company_description = trim($_POST['company_description'] ?? '');
$company_logo = trim($_POST['company_logo'] ?? '');
if (empty($company_name)) $errors[] = "Company Name is required for Sponsorship.";
if (empty($company_description)) $errors[] = "Company Description is required for Sponsorship.";
if (empty($errors)) {
$submission_data = [
'type' => 'Event Sponsorship',
'First Name' => htmlspecialchars($firstname),
'Last Name' => htmlspecialchars($lastname),
'Email' => htmlspecialchars($email),
'Contact Number' => htmlspecialchars($number),
'Company Name' => htmlspecialchars($company_name),
'Company Description' => htmlspecialchars($company_description),
'Company Logo (Link/Details)' => htmlspecialchars($company_logo ?: 'N/A'),
];
}
} else {
// Only enforce selection if there are other errors, otherwise assume initial load
if (count($_POST) > 1) { // Check if form was submitted
$errors[] = "Please select either 'Talk Proposal' or 'Sponsor an Event'.";
}
}
}
// Display Errors
if (!empty($errors)) {
echo '<div class="error"><strong>Error!</strong> Please correct the following issues:<ul>';
foreach ($errors as $error) {
echo "<li>$error</li>";
}
echo '</ul></div>';
}
// Display Submission Success
if ($submission_data) {
echo '<div class="success">✅ Thank you! Your ' . $submission_data['type'] . ' has been successfully submitted!</div>';
echo '<div class="submission-details">';
echo '<h2>Submitted ' . $submission_data['type'] . ' Details</h2>';
foreach ($submission_data as $key => $value) {
if ($key !== 'type') {
echo "<p><strong>$key:</strong> $value</p>";
}
}
echo '</div>';
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<div class="form-group">
<label for="submission_type">I want to:*</label>
<select name="submission_type" id="submission_type" required>
<option value="">-- Please Select --</option>
<option value="talk" <?php echo ($type == 'talk') ? 'selected' : ''; ?>>Propose a Talk</option>
<option value="sponsor" <?php echo ($type == 'sponsor') ? 'selected' : ''; ?>>Sponsor an Event</option>
</select>
</div>
<hr>
<h2>Contact Profile (Required)</h2>
<div class="form-row">
<div class="form-col form-group">
<label for="firstname">First Name*</label>
<input type="text" id="firstname" name="firstname" value="<?php echo htmlspecialchars($_POST['firstname'] ?? ''); ?>" required>
</div>
<div class="form-col form-group">
<label for="lastname">Last Name*</label>
<input type="text" id="lastname" name="lastname" value="<?php echo htmlspecialchars($_POST['lastname'] ?? ''); ?>" required>
</div>
</div>
<div class="form-row">
<div class="form-col form-group">
<label for="email">Email*</label>
<input type="email" id="email" name="email" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>" required>
</div>
<div class="form-col form-group">
<label for="number">Contact Number*</label>
<input type="tel" id="number" name="number" value="<?php echo htmlspecialchars($_POST['number'] ?? ''); ?>" required>
</div>
</div>
<div id="talk_fields" class="submission-section hidden-initial">
<hr>
<h2>Talk Proposal Details</h2>
<div class="form-group">
<label for="city">City of Residence*</label>
<input type="text" id="city" name="city" value="<?php echo htmlspecialchars($_POST['city'] ?? ''); ?>">
</div>
<div class="form-group">
<label for="talk_title">Talk Title*</label>
<input type="text" id="talk_title" name="talk_title" value="<?php echo htmlspecialchars($_POST['talk_title'] ?? ''); ?>">
</div>
<div class="form-group">
<label for="talk_description">Talk Description*</label>
<textarea id="talk_description" name="talk_description" rows="5"><?php echo htmlspecialchars($_POST['talk_description'] ?? ''); ?></textarea>
</div>
<div class="form-group">
<label for="social_media">Social Media Channels (e.g., Twitter handle, LinkedIn URL)</label>
<input type="text" id="social_media" name="social_media" value="<?php echo htmlspecialchars($_POST['social_media'] ?? ''); ?>">
</div>
<div class="form-group">
<label>Are you OK with presenting virtually (e.g., via Zoom)?</label>
<div class="radio-group">
<label>
<input type="radio" name="ok_with_zoom" value="Yes" <?php echo (!isset($_POST['ok_with_zoom']) || $_POST['ok_with_zoom'] == 'Yes') ? 'checked' : ''; ?>> Yes
</label>
<label>
<input type="radio" name="ok_with_zoom" value="No" <?php echo (isset($_POST['ok_with_zoom']) && $_POST['ok_with_zoom'] == 'No') ? 'checked' : ''; ?>> No
</label>
</div>
</div>
</div>
<div id="sponsor_fields" class="submission-section hidden-initial">
<hr>
<h2>Event Sponsorship Details</h2>
<div class="form-group">
<label for="company_name">Company Name*</label>
<input type="text" id="company_name" name="company_name" value="<?php echo htmlspecialchars($_POST['company_name'] ?? ''); ?>">
</div>
<div class="form-group">
<label for="company_description">Company Description*</label>
<textarea id="company_description" name="company_description" rows="5"><?php echo htmlspecialchars($_POST['company_description'] ?? ''); ?></textarea>
</div>
<div class="form-group">
<label for="company_logo">Company Logo (Link or details on file submission)</label>
<input type="text" id="company_logo" name="company_logo" value="<?php echo htmlspecialchars($_POST['company_logo'] ?? ''); ?>">
</div>
</div>
<button type="submit" class="submit-btn">Submit Proposal / Sponsorship</button>
</form>
</div>
<script>
$(document).ready(function() {
// Define all field IDs that need dynamic required status
const talkFields = $('#talk_fields').find('input[type="text"], textarea');
const sponsorFields = $('#sponsor_fields').find('input[type="text"], textarea');
/**
* Toggles the visibility of sections and sets required attributes.
* @param {string} type - 'talk', 'sponsor', or ''
*/
function toggleFields(type) {
// First, hide all specific sections and remove all dynamic required attributes
$('.submission-section').slideUp(200);
talkFields.removeAttr('required');
sponsorFields.removeAttr('required');
if (type === 'talk') {
$('#talk_fields').slideDown(400);
// Set required attributes for Talk fields
$('#city, #talk_title, #talk_description').attr('required', 'required');
} else if (type === 'sponsor') {
$('#sponsor_fields').slideDown(400);
// Set required attributes for Sponsor fields
$('#company_name, #company_description').attr('required', 'required');
}
}
// 1. Initial State Check (for page load/postback)
const initialType = $('#submission_type').val();
// If the page loaded with a selection (e.g., after an error), show the relevant section
if (initialType) {
$('#' + initialType + '_fields').show(); // Use show() to prevent initial slideDown flash
toggleFields(initialType);
}
// 2. Event Handler: Call toggleFields whenever the dropdown changes
$('#submission_type').on('change', function() {
toggleFields($(this).val());
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment