{"id":2,"date":"2025-06-29T06:44:55","date_gmt":"2025-06-29T06:44:55","guid":{"rendered":"https:\/\/ikapeksi.com\/?page_id=2"},"modified":"2025-08-11T11:07:38","modified_gmt":"2025-08-11T04:07:38","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/ikapeksi.com\/ja\/sample-page\/","title":{"rendered":"Sample Page"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ccf469 e-flex e-con-boxed e-con e-parent\" data-id=\"8ccf469\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-95ce54c e-con-full e-flex e-con e-child\" data-id=\"95ce54c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b22dcf5 e-con-full e-flex e-con e-child\" data-id=\"b22dcf5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d1a9ae elementor-widget elementor-widget-html\" data-id=\"0d1a9ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Form Pendaftaran<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            background-color: #def8fc;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            padding: 20px;\n            min-height: 100vh;\n        }\n\n        .form-container {\n            max-width: 600px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n        }\n\n        .form-header {\n            background: #5bdcf0;\n            color: white;\n            padding: 30px;\n            text-align: center;\n        }\n\n        .form-header h2 {\n            font-size: 28px;\n            margin-bottom: 8px;\n            font-weight: 600;\n        }\n\n        .form-header p {\n            opacity: 0.9;\n            font-size: 16px;\n        }\n\n        .form-body {\n            padding: 40px;\n        }\n\n        .form-group {\n            margin-bottom: 25px;\n        }\n\n        .form-group label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 600;\n            color: #333;\n            font-size: 14px;\n        }\n\n        .required {\n            color: #e74c3c;\n        }\n\n        .form-group input,\n        .form-group select {\n            width: 100%;\n            padding: 14px 16px;\n            border: 2px solid #e1e8ed;\n            border-radius: 8px;\n            font-size: 16px;\n            transition: all 0.3s ease;\n            background: #fafafa;\n        }\n\n        .form-group input:focus,\n        .form-group select:focus {\n            outline: none;\n            border-color: #667eea;\n            background: white;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .submit-btn {\n            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n            color: white;\n            border: none;\n            padding: 16px 32px;\n            font-size: 18px;\n            font-weight: 600;\n            border-radius: 8px;\n            cursor: pointer;\n            width: 100%;\n            transition: all 0.3s ease;\n            margin-top: 20px;\n        }\n\n        .submit-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);\n        }\n\n        .submit-btn:active {\n            transform: translateY(0);\n        }\n\n        .submit-btn:disabled {\n            background: #cccccc;\n            cursor: not-allowed;\n            transform: none;\n            box-shadow: none;\n        }\n\n        .loading {\n            display: none;\n            text-align: center;\n            margin-top: 20px;\n        }\n\n        .loading-spinner {\n            border: 3px solid #f3f3f3;\n            border-top: 3px solid #667eea;\n            border-radius: 50%;\n            width: 30px;\n            height: 30px;\n            animation: spin 1s linear infinite;\n            margin: 0 auto 10px;\n        }\n\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        .message {\n            padding: 15px;\n            border-radius: 8px;\n            margin-top: 20px;\n            display: none;\n        }\n\n        .message.success {\n            background: #d4edda;\n            color: #155724;\n            border: 1px solid #c3e6cb;\n        }\n\n        .message.error {\n            background: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n        }\n\n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            body {\n                padding: 10px;\n            }\n\n            .form-header {\n                padding: 25px 20px;\n            }\n\n            .form-header h2 {\n                font-size: 24px;\n            }\n\n            .form-body {\n                padding: 30px 20px;\n            }\n\n            .form-group {\n                margin-bottom: 20px;\n            }\n\n            .form-group input,\n            .form-group select {\n                padding: 12px 14px;\n                font-size: 16px; \/* Prevent zoom on iOS *\/\n            }\n\n            .submit-btn {\n                padding: 14px 24px;\n                font-size: 16px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .form-header h2 {\n                font-size: 22px;\n            }\n\n            .form-header p {\n                font-size: 14px;\n            }\n\n            .form-body {\n                padding: 20px 15px;\n            }\n\n            .form-group input,\n            .form-group select {\n                padding: 12px;\n            }\n        }\n\n        \/* Tablet Landscape *\/\n        @media (min-width: 768px) and (max-width: 1024px) {\n            .form-container {\n                max-width: 500px;\n            }\n        }\n\n        \/* Desktop *\/\n        @media (min-width: 1024px) {\n            .form-container {\n                max-width: 600px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"form-container\">\n        <div class=\"form-header\">\n            <h2>Form Pendaftaran<\/h2>\n            <p>Silakan lengkapi data diri Anda<\/p>\n        <\/div>\n        \n        <div class=\"form-body\">\n            <form id=\"registrationForm\" action=\"\">\n                <div class=\"form-group\">\n                    <label for=\"namaLengkap\">Nama Lengkap <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"namaLengkap\" name=\"namaLengkap\" placeholder=\"Masukkan nama lengkap dan Gelar Anda\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"noWhatsApp\">Nomor WhatsApp <span class=\"required\">*<\/span><\/label>\n                    <input type=\"tel\" id=\"noWhatsApp\" name=\"noWhatsApp\" placeholder=\"Contoh: 08123456789\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"asalDPD\">Asal DPD <span class=\"required\">*<\/span><\/label>\n                    <select id=\"asalDPD\" name=\"asalDPD\" required>\n                        <option value=\"\">Pilih Asal DPD<\/option>\n                        <option value=\"Aceh\">Aceh<\/option>\n                        <option value=\"Sumatera Utara\">Sumatera Utara<\/option>\n                        <option value=\"Sumatera Barat\">Sumatera Barat<\/option>\n                        <option value=\"Riau\">Riau<\/option>\n                        <option value=\"Kepulauan Riau\">Kepulauan Riau<\/option>\n                        <option value=\"Jambi\">Jambi<\/option>\n                        <option value=\"Sumatera Selatan\">Sumatera Selatan<\/option>\n                        <option value=\"Bangka Belitung\">Bangka Belitung<\/option>\n                        <option value=\"Bengkulu\">Bengkulu<\/option>\n                        <option value=\"Lampung\">Lampung<\/option>\n                        <option value=\"DKI Jakarta\">DKI Jakarta<\/option>\n                        <option value=\"Jawa Barat\">Jawa Barat<\/option>\n                        <option value=\"Banten\">Banten<\/option>\n                        <option value=\"Jawa Tengah\">Jawa Tengah<\/option>\n                        <option value=\"DI Yogyakarta\">DI Yogyakarta<\/option>\n                        <option value=\"Jawa Timur\">Jawa Timur<\/option>\n                        <option value=\"Bali\">Bali<\/option>\n                        <option value=\"Nusa Tenggara Barat\">Nusa Tenggara Barat<\/option>\n                        <option value=\"Nusa Tenggara Timur\">Nusa Tenggara Timur<\/option>\n                        <option value=\"Kalimantan Barat\">Kalimantan Barat<\/option>\n                        <option value=\"Kalimantan Tengah\">Kalimantan Tengah<\/option>\n                        <option value=\"Kalimantan Selatan\">Kalimantan Selatan<\/option>\n                        <option value=\"Kalimantan Timur\">Kalimantan Timur<\/option>\n                        <option value=\"Kalimantan Utara\">Kalimantan Utara<\/option>\n                        <option value=\"Sulawesi Utara\">Sulawesi Utara<\/option>\n                        <option value=\"Gorontalo\">Gorontalo<\/option>\n                        <option value=\"Sulawesi Tengah\">Sulawesi Tengah<\/option>\n                        <option value=\"Sulawesi Barat\">Sulawesi Barat<\/option>\n                        <option value=\"Sulawesi Selatan\">Sulawesi Selatan<\/option>\n                        <option value=\"Sulawesi Tenggara\">Sulawesi Tenggara<\/option>\n                        <option value=\"Maluku\">Maluku<\/option>\n                        <option value=\"Maluku Utara\">Maluku Utara<\/option>\n                        <option value=\"Papua\">Papua<\/option>\n                        <option value=\"Papua Barat\">Papua Barat<\/option>\n                        <option value=\"Papua Tengah\">Papua Tengah<\/option>\n                        <option value=\"Papua Pegunungan\">Papua Pegunungan<\/option>\n                        <option value=\"Papua Selatan\">Papua Selatan<\/option>\n                        <option value=\"Papua Barat Daya\">Papua Barat Daya<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"tahunKepulangan\">Tahun Kepulangan <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"tahunKepulangan\" name=\"tahunKepulangan\" placeholder=\"Contoh: 2023\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"usahaSaatIni\">Usaha\/Pekerjaan Saat Ini <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"usahaSaatIni\" name=\"usahaSaatIni\" placeholder=\"Contoh: Wiraswasta, Pertanian, Karyawan, dll\" required>\n                <\/div>\n\n                <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n                    <span id=\"submitText\">Daftar Sekarang<\/span>\n                <\/button>\n\n                <div class=\"loading\" id=\"loading\">\n                    <div class=\"loading-spinner\"><\/div>\n                    <p>Memproses data...<\/p>\n                <\/div>\n\n                <div class=\"message\" id=\"message\"><\/div>\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"ja\"\/><\/form>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ URL Web App Google Apps Script\n        const WEBAPP_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbybE6RQ4GH5OnD70e5SHgsqjbse6yuO6fRNtwLhnRi5kW5sUJeIlnFP5iuU4wzdQKjfag\/exec';\n\n        document.getElementById('registrationForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n            \n            const submitBtn = document.getElementById('submitBtn');\n            const submitText = document.getElementById('submitText');\n            const loading = document.getElementById('loading');\n            const message = document.getElementById('message');\n            \n            \/\/ Reset message\n            message.style.display = 'none';\n            message.className = 'message';\n            \n            \/\/ Show loading\n            submitBtn.disabled = true;\n            submitText.textContent = 'Memproses...';\n            loading.style.display = 'block';\n            \n            \/\/ Collect form data\n            const formData = new FormData();\n            formData.append('namaLengkap', document.getElementById('namaLengkap').value);\n            formData.append('noWhatsApp', document.getElementById('noWhatsApp').value);\n            formData.append('asalDPD', document.getElementById('asalDPD').value);\n            formData.append('tahunKepulangan', document.getElementById('tahunKepulangan').value);\n            formData.append('usahaSaatIni', document.getElementById('usahaSaatIni').value);\n            \n            \/\/ Submit to Google Apps Script\n            fetch(WEBAPP_URL, {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                loading.style.display = 'none';\n                submitBtn.disabled = false;\n                submitText.textContent = 'Daftar Sekarang';\n                \n                if (data.success) {\n                    message.className = 'message success';\n                    message.textContent = data.message; \/\/ Pesan sudah dipersonalisasi dari server\n                    message.style.display = 'block';\n                    \n                    \/\/ Reset form\n                    document.getElementById('registrationForm').reset();\n                } else {\n                    message.className = 'message error';\n                    message.textContent = data.message;\n                    message.style.display = 'block';\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                loading.style.display = 'none';\n                submitBtn.disabled = false;\n                submitText.textContent = 'Daftar Sekarang';\n                \n                message.className = 'message error';\n                message.textContent = 'Terjadi kesalahan. Silakan coba lagi.';\n                message.style.display = 'block';\n            });\n        });\n\n        \/\/ Format nomor WhatsApp saat user mengetik\n        document.getElementById('noWhatsApp').addEventListener('input', function(e) {\n            let value = e.target.value.replace(\/\\D\/g, '');\n            e.target.value = value;\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-519f8ee e-con-full e-flex e-con e-child\" data-id=\"519f8ee\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Form Pendaftaran Form Pendaftaran Silakan lengkapi data diri Anda Nama Lengkap * Nomor WhatsApp * Asal DPD * Pilih Asal DPDAcehSumatera UtaraSumatera BaratRiauKepulauan RiauJambiSumatera SelatanBangka BelitungBengkuluLampungDKI JakartaJawa BaratBantenJawa TengahDI YogyakartaJawa TimurBaliNusa Tenggara BaratNusa Tenggara TimurKalimantan BaratKalimantan TengahKalimantan SelatanKalimantan TimurKalimantan UtaraSulawesi UtaraGorontaloSulawesi TengahSulawesi BaratSulawesi SelatanSulawesi TenggaraMalukuMaluku UtaraPapuaPapua BaratPapua TengahPapua PegununganPapua SelatanPapua Barat Daya Tahun Kepulangan * Usaha\/Pekerjaan Saat Ini * Daftar Sekarang Memproses data&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":18,"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/pages\/2\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/ikapeksi.com\/ja\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}