{"id":8,"date":"2026-05-07T06:48:09","date_gmt":"2026-05-07T06:48:09","guid":{"rendered":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/?page_id=8"},"modified":"2026-05-07T09:46:38","modified_gmt":"2026-05-07T09:46:38","slug":"e-form","status":"publish","type":"page","link":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/?page_id=8","title":{"rendered":"E-Form"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ground Rent Enquiry<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Ground Rent Details Form<\/title><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Ground Rent Details Form<\/title>\n\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n      font-family: Arial, sans-serif;\n    }\n\n    body {\n      background: #f4f7fb;\n      padding: 40px;\n      color: #333;\n    }\n\n    .architecture-box {\n      max-width: 850px;\n      margin: 0 auto 30px;\n      background: #ffffff;\n      padding: 25px;\n      border-radius: 10px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    }\n\n    .architecture-box h2 {\n      margin-bottom: 20px;\n      color: #1a3c6e;\n      text-align: center;\n    }\n\n    .workflow {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 12px;\n      font-weight: bold;\n      color: #1a3c6e;\n    }\n\n    .arrow {\n      font-size: 20px;\n      color: #555;\n    }\n\n    .form-container {\n      max-width: 850px;\n      margin: auto;\n      background: #fff;\n      padding: 35px;\n      border-radius: 10px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    }\n\n    h1 {\n      text-align: center;\n      margin-bottom: 25px;\n      color: #1a3c6e;\n    }\n\n    .toggle-question {\n      background: #eef4ff;\n      padding: 15px;\n      border-radius: 8px;\n      margin-bottom: 25px;\n      font-weight: bold;\n      cursor: pointer;\n      border: 1px solid #c7d8ff;\n      transition: 0.3s;\n    }\n\n    .toggle-question:hover {\n      background: #dce9ff;\n    }\n\n    .form-section {\n      display: none;\n    }\n\n    .form-group {\n      margin-bottom: 20px;\n    }\n\n    label {\n      display: block;\n      margin-bottom: 8px;\n      font-weight: bold;\n    }\n\n    input,\n    textarea {\n      width: 100%;\n      padding: 12px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      font-size: 15px;\n    }\n\n    .row {\n      display: flex;\n      gap: 20px;\n    }\n\n    .row .form-group {\n      flex: 1;\n    }\n\n    .buttons {\n      display: flex;\n      gap: 15px;\n      margin-top: 25px;\n      flex-wrap: wrap;\n    }\n\n    button {\n      padding: 12px 22px;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 15px;\n      font-weight: bold;\n      transition: 0.3s;\n    }\n\n    .submit-btn {\n      background: #1a73e8;\n      color: #fff;\n    }\n\n    .submit-btn:hover {\n      background: #0f5fd1;\n    }\n\n    .draft-btn {\n      background: #ff9800;\n      color: white;\n    }\n\n    .draft-btn:hover {\n      background: #e38800;\n    }\n\n    .clear-btn {\n      background: #d32f2f;\n      color: white;\n    }\n\n    .clear-btn:hover {\n      background: #b71c1c;\n    }\n\n    .success-message {\n      display: none;\n      margin-top: 25px;\n      padding: 18px;\n      background: #e8f5e9;\n      color: #2e7d32;\n      border-radius: 8px;\n      border: 1px solid #a5d6a7;\n      font-weight: bold;\n    }\n\n    @media (max-width: 768px) {\n      .row {\n        flex-direction: column;\n      }\n    }\n  <\/style>\n<\/head>\n\n  <!-- Form Section -->\n  <div class=\"form-container\">\n\n    <h1>Ground Rent Details<\/h1>\n\n    <!-- Toggle Question -->\n    <div class=\"toggle-question\" onclick=\"toggleForm()\">\n      Is this related to Ground Rent Due ?\n    <\/div>\n\n    <!-- Hidden Form -->\n    <div class=\"form-section\" id=\"groundRentForm\">\n\n      <form id=\"enquiryForm\">\n\n        <!-- Name -->\n        <div class=\"row\">\n          <div class=\"form-group\">\n            <label>First Name<\/label>\n            <input type=\"text\" placeholder=\"Enter your first name\" required>\n          <\/div>\n\n          <div class=\"form-group\">\n            <label>Last Name<\/label>\n            <input type=\"text\" placeholder=\"Enter your last name\" required>\n          <\/div>\n        <\/div>\n\n        <!-- Lease Reference -->\n        <div class=\"form-group\">\n          <label>Lease Reference<\/label>\n          <input type=\"text\" placeholder=\"Enter lease reference\">\n        <\/div>\n\n        <!-- Address -->\n        <div class=\"form-group\">\n          <label>Address<\/label>\n          <textarea placeholder=\"Enter your full property address\"><\/textarea>\n        <\/div>\n\n        <div class=\"row\">\n          <div class=\"form-group\">\n            <label>Town<\/label>\n            <input type=\"text\" placeholder=\"Enter town\">\n          <\/div>\n\n          <div class=\"form-group\">\n            <label>Country<\/label>\n            <input type=\"text\" placeholder=\"Enter country\">\n          <\/div>\n\n          <div class=\"form-group\">\n            <label>Postcode<\/label>\n            <input type=\"text\" placeholder=\"Enter postcode\">\n          <\/div>\n        <\/div>\n\n        <!-- Contact Details -->\n        <div class=\"row\">\n          <div class=\"form-group\">\n            <label>Email<\/label>\n            <input type=\"email\" placeholder=\"Enter your email address\" required>\n          <\/div>\n\n          <div class=\"form-group\">\n            <label>Phone Number<\/label>\n            <input type=\"tel\" placeholder=\"Enter your phone number\">\n          <\/div>\n        <\/div>\n\n        <!-- Firm Name -->\n        <div class=\"form-group\">\n          <label>Name of the Firm<\/label>\n          <input type=\"text\" placeholder=\"Applicable if you are a solicitor\">\n        <\/div>\n\n        <!-- Buttons -->\n        <div class=\"buttons\">\n          <button type=\"submit\" class=\"submit-btn\">\n            Submit Enquiry\n          <\/button>\n\n          <button type=\"button\" class=\"draft-btn\" onclick=\"saveDraft()\">\n            Save Draft\n          <\/button>\n\n          <button type=\"reset\" class=\"clear-btn\">\n            Clear Form\n          <\/button>\n        <\/div>\n\n      <\/form>\n\n      <!-- Success Message -->\n      <div class=\"success-message\" id=\"successMessage\"><\/div>\n\n    <\/div>\n  <\/div>\n\n  <script>\n    \/\/ Show \/ Hide Form\n    function toggleForm() {\n      const formSection = document.getElementById(\"groundRentForm\");\n\n      if (formSection.style.display === \"block\") {\n        formSection.style.display = \"none\";\n      } else {\n        formSection.style.display = \"block\";\n      }\n    }\n\n    \/\/ Save Draft in Local Storage\n    function saveDraft() {\n      const formData = {\n        firstName: document.querySelectorAll(\"input\")[0].value,\n        lastName: document.querySelectorAll(\"input\")[1].value,\n        leaseRef: document.querySelectorAll(\"input\")[2].value\n      };\n\n      localStorage.setItem(\"groundRentDraft\", JSON.stringify(formData));\n\n      alert(\"Draft Saved Successfully!\");\n    }\n\n    \/\/ Form Submit\n    document.getElementById(\"enquiryForm\").addEventListener(\"submit\", function(e) {\n      e.preventDefault();\n\n      \/\/ Generate Unique Reference ID\n      const refId = \"GR-\" + Date.now();\n\n      \/\/ Success Message\n      document.getElementById(\"successMessage\").style.display = \"block\";\n\n      document.getElementById(\"successMessage\").innerHTML =\n        \"Thank you! Your enquiry has been submitted successfully.<br><br>\" +\n        \"Your Unique Reference ID is: <strong>\" + refId + \"<\/strong><br><br>\" +\n        \"A no-reply acknowledgement email will be sent to your registered email address.\";\n\n      \/*\n        BACKEND EMAIL LOGIC REQUIRED\n\n        Example Workflow:\n        1. Send form data to PHP \/ Node.js backend\n        2. Store in encrypted database\n        3. Trigger CRM workflow\n        4. Send acknowledgment email\n\n        Sample No-Reply Email:\n\n        Subject:\n        Ground Rent Enquiry Acknowledgement\n\n        Body:\n        Thank you for submitting your enquiry.\n\n        Reference ID: GR-XXXXXXX\n\n        This is an automated no-reply email.\n      *\/\n\n      \/\/ Reset form\n      document.getElementById(\"enquiryForm\").reset();\n    });\n  <\/script>\n\n<\/body>\n<\/html>\n<style>\n\n    body{\n        font-family: Arial, sans-serif;\n        background:#f5f5f5;\n        padding:40px;\n    }\n\n    .form-container{\n        max-width:700px;\n        margin:auto;\n        background:#fff;\n        padding:25px;\n        border-radius:10px;\n    }\n\n    h2{\n        margin-bottom:15px;\n        color:#222;\n    }\n\n    .question{\n        color:#0073aa;\n        font-size:18px;\n        font-weight:bold;\n        cursor:pointer;\n        margin-bottom:20px;\n    }\n\n    .question:hover{\n        text-decoration:underline;\n    }\n\n    .form-content{\n        display:none;\n        margin-top:10px;\n    }\n\n    .form-group{\n        margin-bottom:18px;\n    }\n\n    label{\n        display:block;\n        margin-bottom:6px;\n        font-weight:bold;\n    }\n\n    input,\n    textarea{\n        width:100%;\n        padding:10px;\n        border:1px solid #ccc;\n        border-radius:5px;\n        box-sizing:border-box;\n    }\n\n    textarea{\n        resize:vertical;\n    }\n\n    input[type=\"file\"]{\n        padding:6px;\n    }\n\n    .note{\n        font-size:12px;\n        color:#666;\n        margin-top:5px;\n    }\n\n    .submit-btn{\n        background:#28a745;\n        color:white;\n        border:none;\n        padding:12px 20px;\n        border-radius:5px;\n        cursor:pointer;\n        font-size:15px;\n    }\n\n    .submit-btn:hover{\n        background:#218838;\n    }\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"form-container\">\n\n    <h2>Ground Rent Details<\/h2>\n\n    <div class=\"question\" onclick=\"toggleForm()\">\n        Is this related to Ground Rent details ?\n    <\/div>\n\n    <div class=\"form-content\" id=\"groundRentForm\">\n\n        <form action=\"upload.php\" method=\"POST\" enctype=\"multipart\/form-data\">\n\n            <div class=\"form-group\">\n                <label>Customer Name<\/label>\n                <input type=\"text\" name=\"customer_name\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Email Address<\/label>\n                <input type=\"email\" name=\"email\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Invoice \/ Reference Number<\/label>\n                <input type=\"text\" name=\"invoice_no\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Upload Supporting File<\/label>\n\n                <input \n                    type=\"file\" \n                    name=\"attachment\"\n                    accept=\".pdf,.jpg,.jpeg,.png,.csv\"\n                    required\n                >\n\n                <div class=\"note\">\n                    Allowed files: PDF, JPG, PNG, CSV <br>\n                    Max size: 10MB\n                <\/div>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Remarks<\/label>\n                <textarea name=\"remarks\" rows=\"4\"><\/textarea>\n            <\/div>\n\n            <button type=\"submit\" class=\"submit-btn\">\n                Submit Details\n            <\/button>\n\n        <\/form>\n\n    <\/div>\n\n<\/div>\n\n<script>\n\nfunction toggleForm() {\n\n    var form = document.getElementById(\"groundRentForm\");\n\n    if(form.style.display === \"block\"){\n        form.style.display = \"none\";\n    } else {\n        form.style.display = \"block\";\n    }\n\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ground Rent Enquiry Ground Rent Details Form Ground Rent Details Form Ground Rent Details Is this related to Ground Rent Due ? First Name Last Name Lease Reference Address Town Country Postcode Email Phone Number Name of the Firm Submit Enquiry Save Draft Clear Form Ground Rent Details Is this related to Ground Rent details [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":3,"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/13"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"https:\/\/jovial-nightingale.212-227-14-34.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}