{"id":1078,"date":"2026-07-29T18:46:15","date_gmt":"2026-07-29T10:46:15","guid":{"rendered":"https:\/\/sevenseaskaraoke.com\/?page_id=1078"},"modified":"2026-08-02T21:20:47","modified_gmt":"2026-08-02T13:20:47","slug":"song-request","status":"publish","type":"page","link":"https:\/\/sevenseaskaraoke.com\/index.php\/song-request\/","title":{"rendered":"Song Request"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n\n \n\n Song Request Form<\/title>\n\n <!-- Google Font -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\"\n rel=\"stylesheet\"\n >\n\n <!-- Font Awesome -->\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\n >\n\n <style>\n\n \/* =====================================================\n RESET\n ===================================================== *\/\n\n .song-request-page,\n .song-request-page * {\n box-sizing: border-box;\n }\n\n .song-request-page {\n margin: 0;\n padding: 0;\n font-family: 'Inter', sans-serif;\n }\n\n\n \/* =====================================================\n IMPORTANT FONT AWESOME FIX\n ===================================================== *\/\n\n .song-request-page i.fa-solid {\n font-family: \"Font Awesome 6 Free\" !important;\n font-weight: 900 !important;\n font-style: normal !important;\n display: inline-block;\n line-height: 1;\n }\n\n .song-request-page i.fa-brands {\n font-family: \"Font Awesome 6 Brands\" !important;\n font-weight: 400 !important;\n font-style: normal !important;\n display: inline-block;\n line-height: 1;\n }\n\n\n \/* =====================================================\n BODY\n ===================================================== *\/\n\n .song-request-page {\n background: #edf4ff;\n padding: 40px 15px;\n min-height: 100vh;\n }\n\n\n \/* =====================================================\n CONTAINER\n ===================================================== *\/\n\n .song-request-page .container {\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n }\n\n\n \/* =====================================================\n CARD\n ===================================================== *\/\n\n .song-request-page .card {\n width: 100%;\n background: #ffffff;\n border-radius: 20px;\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n }\n\n\n \/* =====================================================\n HEADER\n ===================================================== *\/\n\n .song-request-page .header {\n background: linear-gradient(\n 135deg,\n #0048ff,\n #00a6ff\n );\n\n color: #ffffff;\n padding: 35px;\n text-align: center;\n }\n\n .song-request-page .header h1 {\n margin: 0 0 8px;\n padding: 0;\n\n color: #ffffff;\n\n font-family: 'Inter', sans-serif;\n font-size: 34px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .song-request-page .header h1 i {\n margin-right: 10px;\n color: #ffffff;\n }\n\n .song-request-page .header p {\n margin: 0;\n padding: 0;\n\n color: #ffffff;\n\n opacity: 0.95;\n font-size: 16px;\n line-height: 1.5;\n font-weight: 400;\n }\n\n\n \/* =====================================================\n FORM AREA\n ===================================================== *\/\n\n .song-request-page .form-area {\n padding: 35px;\n }\n\n\n \/* =====================================================\n SECTION TITLE\n ===================================================== *\/\n\n .song-request-page .section-title {\n margin: 0 0 20px;\n padding: 0;\n\n color: #0b5ed7;\n\n font-family: 'Inter', sans-serif;\n font-size: 22px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .song-request-page .section-title i {\n margin-right: 8px;\n color: #0b5ed7;\n }\n\n\n \/* =====================================================\n INPUT GROUP\n ===================================================== *\/\n\n .song-request-page .input-group {\n margin-bottom: 20px;\n }\n\n\n \/* =====================================================\n LABEL\n ===================================================== *\/\n\n .song-request-page label {\n display: block;\n\n margin: 0 0 8px;\n padding: 0;\n\n color: #333333;\n\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 500;\n line-height: 1.4;\n }\n\n .song-request-page label .required {\n margin-left: 2px;\n color: #e74c3c;\n }\n\n\n \/* =====================================================\n INPUT\n ===================================================== *\/\n\n .song-request-page input[type=\"text\"],\n .song-request-page input[type=\"tel\"] {\n\n width: 100%;\n height: 50px;\n\n margin: 0;\n padding: 0 18px;\n\n border: 1px solid #d8d8d8;\n border-radius: 12px;\n\n outline: none;\n\n background: #ffffff;\n\n color: #333333;\n\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 400;\n\n transition:\n border-color 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n .song-request-page input[type=\"text\"]::placeholder,\n .song-request-page input[type=\"tel\"]::placeholder {\n color: #aaaaaa;\n opacity: 1;\n }\n\n .song-request-page input[type=\"text\"]:focus,\n .song-request-page input[type=\"tel\"]:focus {\n\n border-color: #0d6efd;\n\n outline: none;\n\n box-shadow:\n 0 0 0 4px rgba(13, 110, 253, 0.15);\n }\n\n\n \/* =====================================================\n GRID\n ===================================================== *\/\n\n .song-request-page .grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n\n\n \/* =====================================================\n SONG BOX\n ===================================================== *\/\n\n .song-request-page .song-box {\n\n position: relative;\n\n margin-bottom: 20px;\n padding: 20px;\n\n background: #f8fbff;\n\n border: 1px solid #dce8ff;\n border-radius: 15px;\n }\n\n\n \/* =====================================================\n SONG TITLE\n ===================================================== *\/\n\n .song-request-page .song-title {\n\n margin: 0 0 18px;\n padding: 0;\n\n color: #0b5ed7;\n\n font-family: 'Inter', sans-serif;\n font-size: 18px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .song-request-page .song-title i {\n margin-right: 8px;\n color: #0b5ed7;\n }\n\n\n \/* =====================================================\n SONG ACTIONS\n ===================================================== *\/\n\n .song-request-page .song-actions {\n\n display: flex;\n gap: 12px;\n\n margin-bottom: 24px;\n }\n\n\n \/* =====================================================\n ADD SONG BUTTON\n ===================================================== *\/\n\n .song-request-page .btn-add-song {\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n gap: 8px;\n\n padding: 10px 20px;\n\n background: #e8f0fe;\n\n color: #0b5ed7;\n\n border: 1px dashed #0b5ed7;\n border-radius: 10px;\n\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 600;\n\n cursor: pointer;\n\n transition: 0.3s ease;\n }\n\n .song-request-page .btn-add-song:hover {\n\n background: #d4e4fd;\n\n transform: translateY(-1px);\n }\n\n .song-request-page .btn-add-song i {\n color: #0b5ed7;\n }\n\n\n \/* =====================================================\n REMOVE SONG BUTTON\n ===================================================== *\/\n\n .song-request-page .btn-remove-song {\n\n position: absolute;\n\n top: 12px;\n right: 12px;\n\n width: 28px;\n height: 28px;\n\n padding: 0;\n\n border: none;\n border-radius: 50%;\n\n background: rgba(231, 76, 60, 0.1);\n\n color: #e74c3c;\n\n cursor: pointer;\n\n font-size: 12px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition: 0.3s ease;\n }\n\n .song-request-page .btn-remove-song:hover {\n background: rgba(231, 76, 60, 0.2);\n }\n\n .song-request-page .btn-remove-song i {\n color: #e74c3c;\n }\n\n\n \/* =====================================================\n WHATSAPP SUBMIT BUTTON\n ===================================================== *\/\n\n .song-request-page .btn-submit {\n\n width: 100%;\n height: 55px;\n\n padding: 0 20px;\n\n border: none;\n border-radius: 14px;\n\n background: linear-gradient(\n 135deg,\n #25D366,\n #128C7E\n );\n\n color: #ffffff;\n\n font-family: 'Inter', sans-serif;\n font-size: 18px;\n font-weight: 600;\n\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n gap: 10px;\n\n transition: 0.3s ease;\n }\n\n .song-request-page .btn-submit:hover {\n\n transform: translateY(-2px);\n\n box-shadow:\n 0 10px 25px rgba(37, 211, 102, 0.35);\n }\n\n .song-request-page .btn-submit:active {\n transform: translateY(0);\n }\n\n .song-request-page .btn-submit i {\n\n color: #ffffff;\n\n font-size: 20px;\n }\n\n\n \/* =====================================================\n FOOTER\n ===================================================== *\/\n\n .song-request-page .footer {\n\n margin-top: 25px;\n\n color: #888888;\n\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 400;\n\n line-height: 1.6;\n\n text-align: center;\n }\n\n\n \/* =====================================================\n TOAST\n ===================================================== *\/\n\n .song-request-page .toast {\n\n position: fixed;\n\n bottom: 30px;\n left: 50%;\n\n padding: 14px 28px;\n\n border-radius: 12px;\n\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n\n z-index: 99999;\n\n opacity: 0;\n\n transform:\n translateX(-50%)\n translateY(100px);\n\n transition:\n all 0.4s\n cubic-bezier(0.16, 1, 0.3, 1);\n\n pointer-events: none;\n\n box-shadow:\n 0 8px 24px rgba(0, 0, 0, 0.15);\n }\n\n .song-request-page .toast.show {\n\n opacity: 1;\n\n transform:\n translateX(-50%)\n translateY(0);\n }\n\n .song-request-page .toast.error {\n\n background: #ffffff;\n\n border: 1px solid #fecaca;\n\n color: #dc2626;\n }\n\n .song-request-page .toast.success {\n\n background: #ffffff;\n\n border: 1px solid #bbf7d0;\n\n color: #16a34a;\n }\n\n\n \/* =====================================================\n MOBILE\n ===================================================== *\/\n\n @media (max-width: 768px) {\n\n .song-request-page {\n\n padding: 12px 8px;\n\n background: #edf4ff;\n }\n\n .song-request-page .card {\n\n border-radius: 16px;\n\n box-shadow:\n 0 8px 20px rgba(0, 0, 0, 0.08);\n }\n\n .song-request-page .header {\n\n padding: 24px 16px;\n }\n\n .song-request-page .header h1 {\n\n font-size: 22px;\n }\n\n .song-request-page .header p {\n\n font-size: 13px;\n }\n\n .song-request-page .form-area {\n\n padding: 20px 14px;\n }\n\n .song-request-page .section-title {\n\n margin-bottom: 14px;\n\n font-size: 17px;\n }\n\n .song-request-page .grid {\n\n grid-template-columns: 1fr;\n\n gap: 12px;\n }\n\n .song-request-page .input-group {\n\n margin-bottom: 14px;\n }\n\n .song-request-page label {\n\n margin-bottom: 6px;\n\n font-size: 14px;\n }\n\n .song-request-page input[type=\"text\"],\n .song-request-page input[type=\"tel\"] {\n\n height: 48px;\n\n padding: 0 14px;\n\n border-radius: 10px;\n\n font-size: 16px;\n }\n\n .song-request-page .song-box {\n\n padding: 16px 12px;\n\n border-radius: 12px;\n\n margin-bottom: 14px;\n }\n\n .song-request-page .song-title {\n\n margin-bottom: 12px;\n\n font-size: 15px;\n }\n\n .song-request-page .btn-remove-song {\n\n width: 32px;\n height: 32px;\n\n top: 8px;\n right: 8px;\n\n font-size: 14px;\n }\n\n .song-request-page .btn-add-song {\n\n width: 100%;\n height: 46px;\n\n border-radius: 10px;\n\n font-size: 15px;\n }\n\n .song-request-page .btn-submit {\n\n height: 52px;\n\n border-radius: 12px;\n\n font-size: 16px;\n }\n\n .song-request-page .footer {\n\n margin-top: 18px;\n\n font-size: 12px;\n }\n\n .song-request-page .toast {\n\n width: 90%;\n\n bottom: 20px;\n\n padding: 12px 16px;\n\n font-size: 13px;\n }\n }\n\n <\/style>\n<\/head>\n\n\n<body>\n\n<div class=\"song-request-page\">\n\n <div class=\"container\">\n\n <div class=\"card\">\n\n\n <!-- =================================================\n HEADER\n ================================================== -->\n\n <div class=\"header\">\n\n <h1>\n <i class=\"fa-solid fa-music\" aria-hidden=\"true\"><\/i>\n Song Request\n <\/h1>\n\n <p>\n If your favorite song isn't in our system,\n feel free to send us your request and we'll\n try to add it for you!\n <\/p>\n\n <\/div>\n\n\n <!-- =================================================\n FORM\n ================================================== -->\n\n <div class=\"form-area\">\n\n\n <!-- CUSTOMER INFORMATION -->\n\n <h2 class=\"section-title\">\n\n <i\n class=\"fa-solid fa-user\"\n aria-hidden=\"true\"\n ><\/i>\n\n Customer Information\n\n <\/h2>\n\n\n <div class=\"grid\">\n\n <div class=\"input-group\">\n\n <label for=\"customerName\">\n\n Customer Name\n\n <span class=\"required\">*<\/span>\n\n <\/label>\n\n <input\n type=\"text\"\n id=\"customerName\"\n placeholder=\"Enter your name\"\n required\n >\n\n <\/div>\n\n\n <div class=\"input-group\">\n\n <label for=\"customerPhone\">\n Phone Number\n <\/label>\n\n <input\n type=\"tel\"\n id=\"customerPhone\"\n placeholder=\"0123456789\"\n >\n\n <\/div>\n\n <\/div>\n\n\n\n <!-- SONG REQUEST LIST -->\n\n <h2 class=\"section-title\">\n\n <!-- FIXED: fa-list-music \u2192 fa-list -->\n\n <i\n class=\"fa-solid fa-list\"\n aria-hidden=\"true\"\n ><\/i>\n\n Song Request List\n\n <\/h2>\n\n\n <div id=\"songList\">\n\n\n <!-- SONG REQUEST 1 -->\n\n <div\n class=\"song-box\"\n data-song=\"1\"\n >\n\n <div class=\"song-title\">\n\n <i\n class=\"fa-solid fa-compact-disc\"\n aria-hidden=\"true\"\n ><\/i>\n\n Song Request 1\n\n <\/div>\n\n\n <div class=\"grid\">\n\n <div>\n\n <label>\n\n Song Title\n\n <span class=\"required\">*<\/span>\n\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"title\"\n placeholder=\"Song Title\"\n >\n\n <\/div>\n\n\n <div>\n\n <label>\n Artist\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"artist\"\n placeholder=\"Artist Name\"\n >\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n <!-- =================================================\n ADD SONG\n ================================================== -->\n\n <div class=\"song-actions\">\n\n <button\n type=\"button\"\n class=\"btn-add-song\"\n id=\"btnAddSong\"\n onclick=\"addSong()\"\n >\n\n <i\n class=\"fa-solid fa-plus\"\n aria-hidden=\"true\"\n ><\/i>\n\n Add Another Song\n\n <\/button>\n\n <\/div>\n\n\n <!-- =================================================\n WHATSAPP\n ================================================== -->\n\n <button\n type=\"button\"\n class=\"btn-submit\"\n onclick=\"sendWhatsApp()\"\n >\n\n <i\n class=\"fa-brands fa-whatsapp\"\n aria-hidden=\"true\"\n ><\/i>\n\n Submit via WhatsApp\n\n <\/button>\n\n\n <!-- FOOTER -->\n\n <div class=\"footer\">\n\n Thank you for your song request!\n We'll do our best to add it for you\n\n <\/div>\n\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n <!-- TOAST -->\n\n <div\n class=\"toast\"\n id=\"toast\"\n ><\/div>\n\n<\/div>\n\n\n<script>\n\n \/* =========================================================\n SETTINGS\n ========================================================= *\/\n\n let songCount = 1;\n\n const maxSongs = 5;\n\n\n \/* =========================================================\n ADD SONG\n ========================================================= *\/\n\n function addSong() {\n\n if (songCount >= maxSongs) {\n\n showToast(\n 'Maximum 5 song requests allowed',\n 'error'\n );\n\n return;\n }\n\n\n songCount++;\n\n\n const songBox =\n document.createElement('div');\n\n\n songBox.className = 'song-box';\n\n songBox.setAttribute(\n 'data-song',\n songCount\n );\n\n\n songBox.innerHTML = `\n\n <button\n type=\"button\"\n class=\"btn-remove-song\"\n onclick=\"removeSong(this)\"\n title=\"Remove\"\n >\n\n <i\n class=\"fa-solid fa-xmark\"\n aria-hidden=\"true\"\n ><\/i>\n\n <\/button>\n\n\n <div class=\"song-title\">\n\n <i\n class=\"fa-solid fa-compact-disc\"\n aria-hidden=\"true\"\n ><\/i>\n\n Song Request ${songCount}\n\n <\/div>\n\n\n <div class=\"grid\">\n\n <div>\n\n <label>\n\n Song Title\n\n <span class=\"required\">*<\/span>\n\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"title\"\n placeholder=\"Song Title\"\n >\n\n <\/div>\n\n\n <div>\n\n <label>\n Artist\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"artist\"\n placeholder=\"Artist Name\"\n >\n\n <\/div>\n\n <\/div>\n `;\n\n\n document\n .getElementById('songList')\n .appendChild(songBox);\n\n\n songBox.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n });\n\n\n if (songCount >= maxSongs) {\n\n document\n .getElementById('btnAddSong')\n .style.display = 'none';\n }\n\n }\n\n\n \/* =========================================================\n REMOVE SONG\n ========================================================= *\/\n\n function removeSong(btn) {\n\n const songBox =\n btn.closest('.song-box');\n\n\n songBox.style.transition =\n 'all 0.3s ease';\n\n songBox.style.opacity = '0';\n\n songBox.style.transform =\n 'translateY(-10px)';\n\n\n setTimeout(() => {\n\n songBox.remove();\n\n songCount--;\n\n reNumberSongs();\n\n\n if (songCount < maxSongs) {\n\n document\n .getElementById('btnAddSong')\n .style.display = 'inline-flex';\n\n }\n\n }, 300);\n\n }\n\n\n \/* =========================================================\n RE-NUMBER SONGS\n ========================================================= *\/\n\n function reNumberSongs() {\n\n const boxes =\n document.querySelectorAll(\n '#songList .song-box'\n );\n\n\n boxes.forEach((box, i) => {\n\n box.setAttribute(\n 'data-song',\n i + 1\n );\n\n\n box.querySelector(\n '.song-title'\n ).innerHTML = `\n\n <i\n class=\"fa-solid fa-compact-disc\"\n aria-hidden=\"true\"\n ><\/i>\n\n Song Request ${i + 1}\n\n `;\n\n });\n\n }\n\n\n \/* =========================================================\n TOAST\n ========================================================= *\/\n\n function showToast(message, type) {\n\n const toast =\n document.getElementById('toast');\n\n\n toast.textContent = message;\n\n\n toast.className =\n 'toast ' + type + ' show';\n\n\n setTimeout(() => {\n\n toast.classList.remove('show');\n\n }, 3500);\n\n }\n\n\n \/* =========================================================\n SEND WHATSAPP\n ========================================================= *\/\n\n function sendWhatsApp() {\n\n const customerName =\n document\n .getElementById('customerName')\n .value\n .trim();\n\n\n const customerPhone =\n document\n .getElementById('customerPhone')\n .value\n .trim();\n\n\n \/* CUSTOMER NAME *\/\n\n if (!customerName) {\n\n showToast(\n 'Please enter your name',\n 'error'\n );\n\n\n document\n .getElementById('customerName')\n .focus();\n\n\n return;\n }\n\n\n \/* =====================================================\n COLLECT SONGS\n ===================================================== *\/\n\n const songBoxes =\n document.querySelectorAll(\n '#songList .song-box'\n );\n\n\n const songs = [];\n\n\n for (const box of songBoxes) {\n\n const title =\n box.querySelector(\n '[data-field=\"title\"]'\n )\n .value\n .trim();\n\n\n const artist =\n box.querySelector(\n '[data-field=\"artist\"]'\n )\n .value\n .trim();\n\n\n if (title) {\n\n songs.push({\n title: title,\n artist: artist\n });\n\n }\n\n }\n\n\n \/* NO SONG *\/\n\n if (songs.length === 0) {\n\n showToast(\n 'Please enter at least one song title',\n 'error'\n );\n\n\n document\n .querySelector(\n '[data-field=\"title\"]'\n )\n .focus();\n\n\n return;\n }\n\n\n \/* =====================================================\n DATE\n ===================================================== *\/\n\n const today = new Date();\n\n\n const date =\n today.getFullYear() +\n '-' +\n String(\n today.getMonth() + 1\n ).padStart(2, '0') +\n '-' +\n String(\n today.getDate()\n ).padStart(2, '0');\n\n\n \/* =====================================================\n WHATSAPP MESSAGE\n ===================================================== *\/\n\n let message =\n `*Song Request*\\n\\n`;\n\n\n message +=\n `*Customer:* ${customerName}\\n`;\n\n\n if (customerPhone) {\n\n message +=\n `*Phone:* ${customerPhone}\\n`;\n\n }\n\n\n message +=\n `*Date:* ${date}\\n`;\n\n\n message +=\n `\\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\\n`;\n\n\n songs.forEach((song, i) => {\n\n message +=\n `\\n*Song ${i + 1}*\\n`;\n\n\n message +=\n ` Title: ${song.title}\\n`;\n\n\n if (song.artist) {\n\n message +=\n ` Artist: ${song.artist}\\n`;\n\n }\n\n });\n\n\n message +=\n `\\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\\n`;\n\n\n message +=\n `Total: ${songs.length} song(s) requested`;\n\n\n \/* =====================================================\n GOOGLE SHEET\n ===================================================== *\/\n\n const scriptUrl =\n 'https:\/\/script.google.com\/macros\/s\/AKfycbwHCQKjgi2-ImbCMGxfhAAS095YCEg6QRa2BOsR1YY_DgDYIHzSI2C8NkCPPQ8IoVz5\/exec';\n\n\n fetch(scriptUrl, {\n\n method: 'POST',\n\n mode: 'no-cors',\n\n headers: {\n 'Content-Type': 'application\/json'\n },\n\n body: JSON.stringify({\n\n customerName:\n customerName,\n\n customerPhone:\n customerPhone,\n\n date:\n date,\n\n songs:\n songs\n\n })\n\n })\n .catch(err => {\n\n console.error(\n 'Error writing to Google Sheet:',\n err\n );\n\n });\n\n\n \/* =====================================================\n WHATSAPP NUMBER\n ===================================================== *\/\n\n const phone =\n '60123656038';\n\n\n const url =\n `https:\/\/wa.me\/${phone}?text=${encodeURIComponent(message)}`;\n\n\n window.open(\n url,\n '_blank'\n );\n\n\n showToast(\n 'Saved to Google Sheet & Opening WhatsApp...',\n 'success'\n );\n\n\n \/* =====================================================\n RESET FORM\n ===================================================== *\/\n\n setTimeout(() => {\n\n document\n .getElementById('customerName')\n .value = '';\n\n\n document\n .getElementById('customerPhone')\n .value = '';\n\n\n const songList =\n document.getElementById(\n 'songList'\n );\n\n\n songList.innerHTML = '';\n\n\n songCount = 0;\n\n\n addFirstSong();\n\n }, 1500);\n\n }\n\n\n \/* =========================================================\n RESET FIRST SONG\n ========================================================= *\/\n\n function addFirstSong() {\n\n songCount = 1;\n\n\n const songBox =\n document.createElement('div');\n\n\n songBox.className =\n 'song-box';\n\n\n songBox.setAttribute(\n 'data-song',\n 1\n );\n\n\n songBox.innerHTML = `\n\n <div class=\"song-title\">\n\n <i\n class=\"fa-solid fa-compact-disc\"\n aria-hidden=\"true\"\n ><\/i>\n\n Song Request 1\n\n <\/div>\n\n\n <div class=\"grid\">\n\n <div>\n\n <label>\n\n Song Title\n\n <span class=\"required\">*<\/span>\n\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"title\"\n placeholder=\"Song Title\"\n >\n\n <\/div>\n\n\n <div>\n\n <label>\n Artist\n <\/label>\n\n <input\n type=\"text\"\n class=\"song-input\"\n data-field=\"artist\"\n placeholder=\"Artist Name\"\n >\n\n <\/div>\n\n <\/div>\n\n `;\n\n\n document\n .getElementById('songList')\n .appendChild(songBox);\n\n\n document\n .getElementById('btnAddSong')\n .style.display = 'inline-flex';\n\n }\n\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Song Request Form Song Request If your favorite song isn’t in our system, feel free to send us your request […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1078","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/pages\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":17,"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/pages\/1078\/revisions"}],"predecessor-version":[{"id":1115,"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/pages\/1078\/revisions\/1115"}],"wp:attachment":[{"href":"https:\/\/sevenseaskaraoke.com\/index.php\/wp-json\/wp\/v2\/media?parent=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}