{"id":173,"date":"2017-10-30T05:07:06","date_gmt":"2017-10-30T05:07:06","guid":{"rendered":"http:\/\/optimalstudia.com\/?page_id=173"},"modified":"2026-01-07T10:28:32","modified_gmt":"2026-01-07T10:28:32","slug":"join-the-class","status":"publish","type":"page","link":"https:\/\/test.optimalonline.id\/?page_id=173","title":{"rendered":"Contact"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)\">Contact Us<\/h1>\n\n\n\n<div class=\"custom-contact-form\">\n    <form id=\"contactForm\" method=\"POST\">\n        <div style=\"margin-bottom: 15px;\">\n            <label>Nama:<\/label><br>\n            <input type=\"text\" name=\"nama\" style=\"width:100%\" required>\n        <\/div>\n        <div style=\"margin-bottom: 15px;\">\n            <label>Nomor Telepon (WhatsApp):<\/label><br>\n            <input type=\"tel\" name=\"telepon\" style=\"width:100%\" required>\n        <\/div>\n        <div style=\"margin-bottom: 15px;\">\n            <label>Pertanyaan:<\/label><br>\n            <textarea name=\"pertanyaan\" style=\"width:100%; height:100px;\" required><\/textarea>\n        <\/div>\n        <button type=\"submit\" name=\"kirim_pesan\" style=\"background-color: #25d366; color: white; padding: 10px 20px; border: none; cursor: pointer;\">Kirim Pesan<\/button>\n    <\/form>\n    <div id=\"responseMessage\" style=\"display:none; margin-top: 20px; padding: 15px; background-color: #e7f3fe; border-left: 6px user-solid #2196F3;\">\n        Terimakasih telah menghubungi kami. Kami akan membalas pesan anda melalui pesan whatsapp.\n    <\/div>\n<\/div>\n\n\n<style>\n\/* Container Utama Formulir *\/\n.custom-form-container {\n    max-width: 100%;\n    margin: 0px auto;\n    padding: 30px;\n    background-color: #f6f6f6;\n    border-radius: 12px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n}\n\n\/* Label Input *\/\n.form-group label {\n    display: block;\n    font-weight: 600;\n    color: #333;\n    font-size: 1em;\n}\n\n\/* Styling Input dan Textarea *\/\n.form-group input[type=\"text\"],\n.form-group input[type=\"tel\"],\n.form-group textarea {\n    width: 100%;\n    padding: 12px 15px;\n    margin-bottom: 20px;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    font-size: 1em;\n    transition: border-color 0.3s ease, box-shadow 0.3s ease;\n    box-sizing: border-box; \/* Memastikan padding tidak merusak lebar *\/\n}\n\n\/* Efek Fokus saat Input diklik *\/\n.form-group input:focus,\n.form-group textarea:focus {\n    border-color: #0073aa; \/* Warna khas WordPress *\/\n    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);\n    outline: none;\n}\n\n\/* Ukuran khusus untuk Pesan\/Textarea *\/\n.form-group textarea {\n    height: 120px;\n    resize: vertical;\n}\n\n\/* Styling Tombol Kirim *\/\n#submit-btn {\n    width: 100%;\n    padding: 14px;\n    background-color: #0073aa;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n}\n\n#submit-btn:hover {\n    background-color: #005177;\n}\n\n#submit-btn:disabled {\n    background-color: #ccc;\n    cursor: not-allowed;\n}\n\n\/* Styling Pesan Feedback *\/\n#form-feedback {\n    padding: 12px;\n    border-radius: 6px;\n    text-align: center;\n    font-size: 14px;\n    font-weight: 500;\n}\n<\/style>\n<div class=\"custom-form-container\">\n    <form id=\"myCustomForm\">\n        <div class=\"form-group\">\n            <label>Nama:<\/label><br>\n            <input type=\"text\" name=\"user_name\" required>\n        <\/div>\n        <div class=\"form-group\">\n            <label>Nomor whatsapp:<\/label><br>\n            <input type=\"tel\" name=\"user_phone\" required>\n        <\/div>\n        <div class=\"form-group\">\n            <label>Pesan:<\/label><br>\n            <textarea name=\"user_message\" required><\/textarea>\n        <\/div>\n        <button type=\"submit\" id=\"submit-btn\">Kirim Pertanyaan<\/button>\n    <\/form>\n    <div id=\"form-feedback\" style=\"display:none; margin-top:10px;\"><\/div>\n<\/div>\n<script>\ndocument.getElementById('myCustomForm').addEventListener('submit', function(e) {\n    e.preventDefault();\n    \n    const feedback = document.getElementById('form-feedback');\n    const btn = document.getElementById('submit-btn');\n    const formData = new FormData(this);\n    formData.append('action', 'send_custom_form');\n\n    btn.innerText = 'Mengirim...';\n    btn.disabled = true;\n\n    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {\n        method: 'POST',\n        body: formData\n    })\n    .then(res => res.json())\n    .then(data => {\n        feedback.style.display = 'block';\n        feedback.innerText = data.data;\n        feedback.style.color = data.success ? 'green' : 'red';\n        if(data.success) document.getElementById('myCustomForm').reset();\n        btn.innerText = 'Kirim Pesan';\n        btn.disabled = false;\n    });\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contact Us Nama: Nomor Telepon (WhatsApp): Pertanyaan: Kirim Pesan Terimakasih telah menghubungi kami. Kami akan membalas pesan anda melalui pesan whatsapp. Nama: Nomor whatsapp: Pesan: Kirim Pertanyaan<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-173","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/pages\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":32,"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":1803,"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=\/wp\/v2\/pages\/173\/revisions\/1803"}],"wp:attachment":[{"href":"https:\/\/test.optimalonline.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}