<!-- wp:html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Volunteer Registration – Vista Initiative</title>
  <style>
    .volunteer-container {
      font-family: Arial, sans-serif;
      background: #f7f7f7;
      padding: 40px;
    }

    .volunteer-container form {
      max-width: 700px;
      background: white;
      padding: 30px;
      margin: auto;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .volunteer-container h2 {
      text-align: center;
      color: #0073e6;
      margin-bottom: 30px;
    }

    .volunteer-container .form-group {
      margin-bottom: 20px;
    }

    .volunteer-container label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
    }

    .volunteer-container input,
    .volunteer-container textarea,
    .volunteer-container select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 15px;
    }

    .volunteer-container textarea {
      height: 100px;
      resize: vertical;
    }

    .volunteer-container button {
      background-color: #0073e6;
      color: white;
      border: none;
      padding: 12px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .volunteer-container button:hover {
      background-color: #005bb5;
    }

    /* Honeypot hidden field */
    .volunteer-container .hidden-field {
      display: none;
    }
  </style>
</head>
<body>

<div class="volunteer-container">
  <h2>Volunteer Registration Form</h2>
  
  <form action="submit_form.php" method="POST" id="volunteerForm">
    <!-- Honeypot field (Spam Bot Trap) -->
    <div class="hidden-field">
      <label for="website">Website</label>
      <input type="text" id="website" name="website">
    </div>

    <div class="form-group">
      <label for="fullname">Full Name *</label>
      <input type="text" id="fullname" name="fullname" required>
    </div>

    <div class="form-group">
      <label for="email">Email Address *</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
      <label for="phone">Phone Number *</label>
      <input type="tel" id="phone" name="phone" pattern="[0-9+]+" required>
    </div>

    <div class="form-group">
      <label for="location">Your Location</label>
      <input type="text" id="location" name="location">
    </div>

    <div class="form-group">
      <label for="area">Area of Interest</label>
      <select id="area" name="interest">
        <option value="">-- Select --</option>
        <option value="Health">Health</option>
        <option value="Education">Education</option>
        <option value="WASH">WASH</option>
        <option value="Child Protection">Child Protection</option>
        <option value="Nutrition">Nutrition</option>
        <option value="Others">Others</option>
      </select>
    </div>

    <div class="form-group">
      <label for="message">Tell Us Why You Want to Volunteer</label>
      <textarea id="message" name="motivation"></textarea>
    </div>

    <button type="submit">Submit Application</button>
  </form>
</div>

</body>
</html>

<!-- /wp:html -->

<!-- wp:group {"metadata":{"categories":["biz-flick-lite"],"patternName":"biz-flick-lite/faq","name":"FAQ"},"style":{"spacing":{"padding":{"right":"20px","left":"20px","top":"70px","bottom":"70px"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:70px;padding-right:20px;padding-bottom:70px;padding-left:20px"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1.5","fontStyle":"normal","fontWeight":"700","textTransform":"uppercase","letterSpacing":"1px"}},"fontSize":"sml-medium"} -->
<p class="has-text-align-center has-sml-medium-font-size" style="font-style:normal;font-weight:700;letter-spacing:1px;line-height:1.5;text-transform:uppercase">Help &amp; Guidance</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"lineHeight":"1.2"},"elements":{"link":{"color":{"text":"var:preset|color|primary"}}},"spacing":{"padding":{"bottom":"50px"},"margin":{"top":"5px","bottom":"0"}}},"textColor":"primary"} -->
<h2 class="wp-block-heading has-text-align-center has-primary-color has-text-color has-link-color" style="margin-top:5px;margin-bottom:0;padding-bottom:50px;line-height:1.2">Answers to Common Questions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">📩 <strong>Need assistance or want to learn more?</strong><br>Reach out to us at <strong><a>info@vistainitiative.org</a></strong> — we're here to support your vision every step of the way.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->