{"id":1366,"date":"2026-06-08T06:40:58","date_gmt":"2026-06-08T06:40:58","guid":{"rendered":"https:\/\/awplife.com\/demo\/testimonial-premium\/?page_id=1366"},"modified":"2026-06-11T11:58:05","modified_gmt":"2026-06-11T11:58:05","slug":"testimonial-form","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/testimonial-premium\/testimonial-form\/","title":{"rendered":"Testimonial Feedback Form"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">    <!-- Direct assets injection to bypass page builders\/theme footer loading issues -->\n    <link rel=\"stylesheet\" href=\"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/css\/font-awesome.min.css\" \/>\n    <link rel=\"stylesheet\" href=\"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/css\/tml-frontend-bootstrap.css\" \/>\n\n    <!-- FLEXBOX WRAPPER -->\n    <div class=\"tml-frontend-sandbox-wrapper\"\n        style=\"font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif; margin:30px 0; background:#fdfdfd; display:flex; flex-direction:row; min-height:650px; position:relative; box-sizing:border-box;\">\n\n        <!-- LEFT SIDEBAR: ADVANCED CUSTOMIZATION TABS -->\n        <div class=\"tml-sandbox-sidebar\"\n            style=\"width:300px; flex-shrink:0; background:#ffffff; border-right:1px solid #edf1f7; padding:24px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; overflow-y:auto; max-height:850px; scrollbar-width:thin;\">\n            <div style=\"border-bottom:1px solid #f0f4fa; padding-bottom:15px; margin-bottom:10px;\">\n                <h3\n                    style=\"margin:0; font-size:18px; font-weight:800; color:#1e293b; display:flex; align-items:center; gap:8px;\">\n                    <i class=\"fa fa-pencil-square-o\" style=\"color:#2271b1;\"><\/i>\n                    Form Live Editor                <\/h3>\n                <p style=\"margin:5px 0 0 0; font-size:12px; color:#64748b; font-weight:500;\">\n                    Customize your submission form and watch it update live!                <\/p>\n            <\/div>\n\n            <form id=\"tml-frontend-form-customizer-form\"\n                style=\"display:flex; flex-direction:column; gap:10px; margin:0; padding:0; border:none; background:none;\">\n\n                <!-- SECTION 1: LAYOUT & DIMENSIONS -->\n                <div class=\"tml-accordion-item\"\n                    style=\"border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fafbfd;\">\n                    <div class=\"tml-accordion-header\"\n                        style=\"padding:12px 16px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:#334155; display:flex; align-items:center; justify-content:between; border-bottom:1px solid #f1f5f9;\">\n                        <span><i class=\"fa fa-th-large\" style=\"margin-right:8px; color:#2271b1;\"><\/i>\n                            Layout &amp; Dimensions<\/span>\n                        <i class=\"fa fa-chevron-down\" style=\"font-size:10px; color:#94a3b8; margin-left:auto;\"><\/i>\n                    <\/div>\n                    <div class=\"tml-accordion-content\"\n                        style=\"padding:16px; display:flex; flex-direction:column; gap:14px; background:#fff;\">\n\n                        <!-- Form Layout Style -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:8px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Form Layout<\/label>\n\n                            <input type=\"hidden\" name=\"form_layout\" id=\"tml-form-layout-input\"\n                                value=\"style_one\">\n\n                            <div style=\"display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;\">\n                                <!-- Style One (Vertical) -->\n                                <div class=\"tml-layout-card-option active\"\n                                    data-value=\"style_one\"\n                                    style=\"padding:12px 10px; border:2px solid #2271b1; background:#f0f7ff; border-radius:8px; cursor:pointer; text-align:center; transition:0.2s; box-shadow: 0 2px 4px rgba(34,113,177,0.15);\">\n                                    <div\n                                        style=\"display:flex; flex-direction:column; gap:4px; width:50px; margin:0 auto 8px auto;\">\n                                        <div\n                                            style=\"width:100%; display:flex; flex-direction:column; gap:2px; align-items:flex-start;\">\n                                            <div style=\"width:40%; height:4px; background:#94a3b8; border-radius:2px;\">\n                                            <\/div>\n                                            <div\n                                                style=\"width:100%; height:10px; border:1px solid #cbd5e1; border-radius:2px; background:#fafafa;\">\n                                            <\/div>\n                                        <\/div>\n                                        <div\n                                            style=\"width:100%; display:flex; flex-direction:column; gap:2px; align-items:flex-start; margin-top:2px;\">\n                                            <div style=\"width:30%; height:4px; background:#94a3b8; border-radius:2px;\">\n                                            <\/div>\n                                            <div\n                                                style=\"width:100%; height:10px; border:1px solid #cbd5e1; border-radius:2px; background:#fafafa;\">\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <span\n                                        style=\"font-size:12px; font-weight:700; color:#334155; display:block;\">Vertical<\/span>\n                                    <span\n                                        style=\"font-size:10px; color:#64748b; display:block; margin-top:2px;\">Style One<\/span>\n                                <\/div>\n\n                                <!-- Style Two (Horizontal) -->\n                                <div class=\"tml-layout-card-option \"\n                                    data-value=\"style_two\"\n                                    style=\"padding:12px 10px; border:2px solid #cbd5e1; background:#fff; border-radius:8px; cursor:pointer; text-align:center; transition:0.2s; box-shadow: none;\">\n                                    <div\n                                        style=\"display:flex; flex-direction:column; gap:4px; width:50px; margin:0 auto 8px auto;\">\n                                        <div style=\"width:100%; display:flex; align-items:center; gap:4px;\">\n                                            <div\n                                                style=\"width:30%; height:4px; background:#94a3b8; border-radius:2px; flex-shrink:0;\">\n                                            <\/div>\n                                            <div\n                                                style=\"width:70%; height:10px; border:1px solid #cbd5e1; border-radius:2px; background:#fafafa;\">\n                                            <\/div>\n                                        <\/div>\n                                        <div style=\"width:100%; display:flex; align-items:center; gap:4px; margin-top:2px;\">\n                                            <div\n                                                style=\"width:25%; height:4px; background:#94a3b8; border-radius:2px; flex-shrink:0;\">\n                                            <\/div>\n                                            <div\n                                                style=\"width:75%; height:10px; border:1px solid #cbd5e1; border-radius:2px; background:#fafafa;\">\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <span\n                                        style=\"font-size:12px; font-weight:700; color:#334155; display:block;\">Horizontal<\/span>\n                                    <span\n                                        style=\"font-size:10px; color:#64748b; display:block; margin-top:2px;\">Style Two<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Form Width -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Form Width (px)<\/label>\n                            <input type=\"number\" name=\"form_width\" value=\"680\"\n                                style=\"width:100%; height:36px; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:13px; box-sizing:border-box;\">\n                        <\/div>\n\n                        <!-- Form Top Spacing -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Top Margin (px)<\/label>\n                            <input type=\"number\" name=\"form_margin_top\" value=\"40\"\n                                style=\"width:100%; height:36px; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:13px; box-sizing:border-box;\">\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n                <!-- SECTION 1.5: FORM FIELDS -->\n                <div class=\"tml-accordion-item\"\n                    style=\"border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fafbfd;\">\n                    <div class=\"tml-accordion-header\"\n                        style=\"padding:12px 16px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:#334155; display:flex; align-items:center; justify-content:between; border-bottom:1px solid #f1f5f9;\">\n                        <span><i class=\"fa fa-list-ul\" style=\"margin-right:8px; color:#2271b1;\"><\/i>\n                            Form Fields<\/span>\n                        <i class=\"fa fa-chevron-down\" style=\"font-size:10px; color:#94a3b8; margin-left:auto;\"><\/i>\n                    <\/div>\n                    <div class=\"tml-accordion-content\"\n                        style=\"padding:16px; display:flex; flex-direction:column; gap:12px; background:#fff;\">\n\n                        <label\n                            style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:5px;\">\n                            Select Fields to Show                        <\/label>\n\n                        <div style=\"display:flex; flex-direction:column; gap:8px;\">\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" checked disabled style=\"margin:0;\">\n                                Name (Required)                                <input type=\"hidden\" name=\"active_fields[]\" value=\"name\">\n                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"designation\" checked style=\"margin:0;\">\n                                Designation                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"website\" checked style=\"margin:0;\">\n                                Website URL                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"category\" checked style=\"margin:0;\">\n                                Select Category                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" checked disabled style=\"margin:0;\">\n                                Review Text (Required)                                <input type=\"hidden\" name=\"active_fields[]\" value=\"content\">\n                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"image\" checked style=\"margin:0;\">\n                                Profile Image                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"video\" style=\"margin:0;\">\n                                Video Testimonial                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" checked disabled style=\"margin:0;\">\n                                Rating Stars (Required)                                <input type=\"hidden\" name=\"active_fields[]\" value=\"rating\">\n                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer;\">\n                                <input type=\"checkbox\" name=\"active_fields[]\" value=\"social\" style=\"margin:0;\">\n                                Social Profiles                            <\/label>\n\n                            <label\n                                style=\"display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#334155; cursor:pointer; margin-top:4px; padding-top:8px; border-top:1px dashed #e2e8f0;\">\n                                <input type=\"hidden\" name=\"recaptcha_enable\" value=\"no\">\n                                <input type=\"checkbox\" name=\"recaptcha_enable\" value=\"yes\"  checked='checked' style=\"margin:0;\">\n                                <input type=\"hidden\" name=\"recaptcha_site_key\" value=\"6Lc5ViMTAAAAAC0pP-ZIs4fwLZNG95B4fHMzHSZZ\">\n                                <input type=\"hidden\" name=\"recaptcha_secret_key\" value=\"6Lc5ViMTAAAAAEouGvdf1pq8gPJ4HgK-PBZgTVSr\">\n                                <input type=\"hidden\" name=\"recaptcha_label\" value=\"Spam Protection\">\n                                <span\n                                    style=\"font-weight:600; color:#1e293b;\">Enable reCAPTCHA v2<\/span>\n                            <\/label>\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n                <!-- SECTION 2: COLORS & STYLING -->\n                <div class=\"tml-accordion-item\"\n                    style=\"border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fafbfd;\">\n                    <div class=\"tml-accordion-header\"\n                        style=\"padding:12px 16px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:#334155; display:flex; align-items:center; justify-content:between; border-bottom:1px solid #f1f5f9;\">\n                        <span><i class=\"fa fa-paint-brush\" style=\"margin-right:8px; color:#2271b1;\"><\/i>\n                            Form Colors &amp; Styles<\/span>\n                        <i class=\"fa fa-chevron-down\" style=\"font-size:10px; color:#94a3b8; margin-left:auto;\"><\/i>\n                    <\/div>\n                    <div class=\"tml-accordion-content\"\n                        style=\"padding:16px; display:flex; flex-direction:column; gap:14px; background:#fff;\">\n\n                        <!-- Form Background Color -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Form BG Color<\/label>\n                            <input type=\"color\" name=\"form_bg\" value=\"#ffffff\"\n                                style=\"width:40px; height:28px; border:0; padding:0; cursor:pointer; background:transparent;\">\n                        <\/div>\n\n                        <!-- Label Color -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Label Color<\/label>\n                            <input type=\"color\" name=\"label_color\" value=\"#333333\"\n                                style=\"width:40px; height:28px; border:0; padding:0; cursor:pointer; background:transparent;\">\n                        <\/div>\n\n                        <!-- Input Background Color -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Input BG Color<\/label>\n                            <input type=\"color\" name=\"input_bg\" value=\"#ffffff\"\n                                style=\"width:40px; height:28px; border:0; padding:0; cursor:pointer; background:transparent;\">\n                        <\/div>\n\n                        <!-- Input Radius -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Input Border Radius (px)<\/label>\n                            <input type=\"number\" name=\"input_radius\" value=\"4\"\n                                style=\"width:100%; height:36px; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:13px; box-sizing:border-box;\">\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n                <!-- SECTION 3: SUBMIT BUTTON -->\n                <div class=\"tml-accordion-item\"\n                    style=\"border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fafbfd;\">\n                    <div class=\"tml-accordion-header\"\n                        style=\"padding:12px 16px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:#334155; display:flex; align-items:center; justify-content:between; border-bottom:1px solid #f1f5f9;\">\n                        <span><i class=\"fa fa-hand-pointer-o\" style=\"margin-right:8px; color:#2271b1;\"><\/i>\n                            Submit Button<\/span>\n                        <i class=\"fa fa-chevron-down\" style=\"font-size:10px; color:#94a3b8; margin-left:auto;\"><\/i>\n                    <\/div>\n                    <div class=\"tml-accordion-content\"\n                        style=\"padding:16px; display:flex; flex-direction:column; gap:14px; background:#fff;\">\n\n                        <!-- Button Text -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Button Text<\/label>\n                            <input type=\"text\" name=\"submit_text\" value=\"Submit Testimonial\"\n                                style=\"width:100%; height:36px; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:13px; box-sizing:border-box;\">\n                        <\/div>\n\n                        <!-- Button BG Color -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Button BG Color<\/label>\n                            <input type=\"color\" name=\"btn_bg_color\" value=\"#0073aa\"\n                                style=\"width:40px; height:28px; border:0; padding:0; cursor:pointer; background:transparent;\">\n                        <\/div>\n\n                        <!-- Button Text Color -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Button Text Color<\/label>\n                            <input type=\"color\" name=\"btn_text_color\" value=\"#ffffff\"\n                                style=\"width:40px; height:28px; border:0; padding:0; cursor:pointer; background:transparent;\">\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n                <!-- SECTION 4: BACKGROUND IMAGE -->\n                <div class=\"tml-accordion-item\"\n                    style=\"border:1px solid #f1f5f9; border-radius:10px; overflow:hidden; background:#fafbfd;\">\n                    <div class=\"tml-accordion-header\"\n                        style=\"padding:12px 16px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; color:#334155; display:flex; align-items:center; justify-content:between; border-bottom:1px solid #f1f5f9;\">\n                        <span><i class=\"fa fa-picture-o\" style=\"margin-right:8px; color:#2271b1;\"><\/i>\n                            Background Image<\/span>\n                        <i class=\"fa fa-chevron-down\" style=\"font-size:10px; color:#94a3b8; margin-left:auto;\"><\/i>\n                    <\/div>\n                    <div class=\"tml-accordion-content\"\n                        style=\"padding:16px; display:flex; flex-direction:column; gap:14px; background:#fff;\">\n\n                        <!-- Enable toggle switch -->\n                        <div class=\"tml-field-group\"\n                            style=\"display:flex; align-items:center; justify-content:space-between;\">\n                            <label\n                                style=\"font-size:13px; font-weight:600; color:#475569;\">Enable BG Image<\/label>\n                            <select name=\"bg_image_enable\"\n                                style=\"width:80px !important; min-width:80px !important; max-width:80px !important; height:32px !important; padding:2px 8px; border-radius:6px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:12px; background:#fff;\">\n                                <option value=\"no\"  selected='selected'>No<\/option>\n                                <option value=\"yes\" >Yes<\/option>\n                            <\/select>\n                        <\/div>\n\n                        <!-- Image Position -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Image Position<\/label>\n                            <select name=\"bg_image_position\"\n                                style=\"width:100% !important; max-width:100% !important; min-width:100% !important; height:36px !important; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:600; color:#334155; font-size:13px; background:#fff;\">\n                                <option value=\"left\"  selected='selected'>Left Side<\/option>\n                                <option value=\"right\" >Right Side<\/option>\n                                <option value=\"behind\" >Behind Form\n                                <\/option>\n\n                            <\/select>\n                        <\/div>\n\n                        <!-- Curated Preset Backgrounds -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:8px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Select Backdrop Preset<\/label>\n                            <div style=\"display:grid; grid-template-columns: repeat(2, 1fr); gap:8px;\">\n                                                                <div class=\"tml-form-bg-preset-item active\" data-url=\"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/img\/testimonial_backdrop.png\"\n                                    style=\"height:45px; border-radius:6px; border:2px solid #cbd5e1; cursor:pointer; background-image:url(https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/img\/testimonial_backdrop.png); background-size:cover; background-position:center; transition:0.2s;\">\n                                <\/div>\n                                <div class=\"tml-form-bg-preset-item\"\n                                    data-url=\"https:\/\/images.unsplash.com\/photo-1659356576109-194b3398f080?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    style=\"height:45px; border-radius:6px; border:2px solid #cbd5e1; cursor:pointer; background-image:url(https:\/\/images.unsplash.com\/photo-1659356576109-194b3398f080?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size:cover; background-position:center; transition:0.2s;\">\n                                <\/div>\n                                <div class=\"tml-form-bg-preset-item\"\n                                    data-url=\"https:\/\/images.unsplash.com\/photo-1659356581485-152348208da5?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    style=\"height:45px; border-radius:6px; border:2px solid #cbd5e1; cursor:pointer; background-image:url(https:\/\/images.unsplash.com\/photo-1659356581485-152348208da5?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size:cover; background-position:center; transition:0.2s;\">\n                                <\/div>\n                                <div class=\"tml-form-bg-preset-item\"\n                                    data-url=\"https:\/\/images.unsplash.com\/photo-1637589274742-8d4c152720a2?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    style=\"height:45px; border-radius:6px; border:2px solid #cbd5e1; cursor:pointer; background-image:url(https:\/\/images.unsplash.com\/photo-1637589274742-8d4c152720a2?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size:cover; background-position:center; transition:0.2s;\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Custom URL field -->\n                        <div class=\"tml-field-group\" style=\"display:flex; flex-direction:column; gap:5px;\">\n                            <label\n                                style=\"font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase;\">Custom Backdrop Image URL<\/label>\n                            <input type=\"text\" name=\"bg_image_url\" id=\"tml_form_bg_custom_url\"\n                                value=\"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/img\/testimonial_backdrop.png\"\n                                style=\"width:100%; height:36px; padding:0 10px; border-radius:8px; border:1px solid #cbd5e1; font-weight:500; color:#334155; font-size:12px; box-sizing:border-box;\">\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n            <\/form>\n        <\/div>\n\n        <!-- RIGHT CANVAS -->\n        <div class=\"tml-sandbox-canvas\"\n            style=\"flex-grow:1; min-width:0; padding:35px 50px; display:flex; flex-direction:column; position:relative; box-sizing:border-box; background:#f8fafc; border-radius:0 20px 20px 0; overflow:hidden;\">\n            <div\n                style=\"position:-webkit-sticky; position:sticky; top:40px; width:100%; display:flex; flex-direction:column; gap:20px;\">\n                <div\n                    style=\"border-bottom:1px solid #e2e8f0; padding-bottom:15px; display:flex; justify-content:space-between; align-items:center;\">\n                    <h4\n                        style=\"margin:0; font-size:15px; font-weight:800; color:#334155; text-transform:uppercase; letter-spacing:0.04em;\">\n                        <i class=\"fa fa-desktop\" style=\"color:#2271b1; margin-right:6px;\"><\/i>\n                        Form Interactive Preview Canvas                    <\/h4>\n                    <span\n                        style=\"font-size:11px; padding:4px 8px; border-radius:12px; background:rgba(34,113,177,0.1); color:#2271b1; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;\">\n                        Real-Time                    <\/span>\n                <\/div>\n\n                <!-- LOADING OVERLAY -->\n                <div id=\"tml-sandbox-loader\"\n                    style=\"display:none; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; background:rgba(248,250,252,0.85); z-index:99; align-items:center; justify-content:center; backdrop-filter:blur(3px); border-radius:12px; transition:0.2s;\">\n                    <div style=\"display:flex; flex-direction:column; align-items:center; gap:12px;\">\n                        <div\n                            style=\"width:38px; height:38px; border:3px solid rgba(34,113,177,0.1); border-top:3px solid #2271b1; border-radius:50%; animation:tml-sandbox-spin 0.6s linear infinite;\">\n                        <\/div>\n                        <span\n                            style=\"font-size:12px; font-weight:700; color:#2271b1; text-transform:uppercase; letter-spacing:0.05em;\">Applying Changes...<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- LIVE CANVAS TARGET -->\n                <div id=\"tml-sandbox-render-target\"\n                    style=\"width:100%; min-height:450px; background:#f8fafc; border-radius:16px; padding:20px; border:1px solid #e2e8f0; box-shadow:0 10px 25px rgba(0,0,0,0.02); display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; overflow:visible;\">\n                            <div class=\"tml-frontend-form-wrapper style_one\"\n        style=\"\">\n\n        \n        <div class=\"tml-form-content-wrap\">\n            <form id=\"tml-frontend-form\" method=\"post\" enctype=\"multipart\/form-data\">\n                <div id=\"tml-form-message\"><\/div>\n\n                <div id=\"tml-form-loader\" style=\"display:none; text-align:center; padding:30px 0;\">\n                    <i class=\"fa fa-spinner fa-spin\"\n                        style=\"font-size:40px; color:#0073aa;\"><\/i>\n                    <p style=\"margin-top:15px; font-weight:600; color:#555;\">\n                        Submitting your testimonial, please wait...                    <\/p>\n                <\/div>\n\n                <div class=\"tml-form-fields-container\">\n                                            <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_name\">Your Name *<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <input type=\"text\" name=\"tml_name\" id=\"tml_name\" required                                    placeholder=\"\"\n                                    class=\"form-control\">\n                            <\/div>\n                        <\/div>\n                    \n                    \n\n                                            <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_designation\">Designation<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <input type=\"text\" name=\"tml_designation\" id=\"tml_designation\"                                     placeholder=\"e.g. CEO, Manager\"\n                                    class=\"form-control\">\n                            <\/div>\n                        <\/div>\n                                                                <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_website\">Website URL<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <input type=\"url\" name=\"tml_website\" id=\"tml_website\"                                     placeholder=\"e.g. https:\/\/example.com\"\n                                    class=\"form-control\">\n                            <\/div>\n                        <\/div>\n                    \n\n                                            <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_category_id\">Select Category<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                                                <select name=\"tml_category_id\" id=\"tml_category_id\" class=\"form-control\"                                     style=\"width:100%; height:40px; cursor:pointer;\">\n                                    <option value=\"\">Select Category...<\/option>\n                                                                                                                        <option value=\"60\">Business                                            <\/option>\n                                                                                    <option value=\"57\">Creative                                            <\/option>\n                                                                                    <option value=\"50\">Customer Support                                            <\/option>\n                                                                                    <option value=\"56\">Design                                            <\/option>\n                                                                                    <option value=\"51\">Featured                                            <\/option>\n                                                                                    <option value=\"54\">Marketing                                            <\/option>\n                                                                                    <option value=\"53\">Tech                                            <\/option>\n                                                                                    <option value=\"71\">test                                            <\/option>\n                                                                                    <option value=\"66\">WordPress                                            <\/option>\n                                                                                                                <option value=\"new\">+ Create New Category...<\/option>\n                                <\/select>\n\n                                <div id=\"tml-new-category-wrapper\" style=\"display:none; margin-top:8px;\">\n                                    <input type=\"text\" name=\"tml_new_category_name\" id=\"tml_new_category_name\"\n                                        placeholder=\"Enter New Category Name\" class=\"form-control\">\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    \n\n\n                                            <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_review\">Your Review *<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <textarea name=\"tml_review\" id=\"tml_review\" rows=\"5\" required                                    placeholder=\"\"\n                                    class=\"form-control\" style=\"resize:vertical;\"><\/textarea>\n                            <\/div>\n                        <\/div>\n                    \n\n                                            <div class=\"tml-form-group\">\n                            <label\n                                    for=\"tml_image\">Profile Image<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <div style=\"display:flex; align-items:center; gap:16px;\">\n                                    <div style=\"flex:1;\">\n                                        <input type=\"file\" name=\"tml_image\" id=\"tml_image\" accept=\"image\/*\" class=\"form-control\"\n                                            style=\"padding:4px; height:auto; line-height:1.2;\">\n                                    <\/div>\n                                    <div style=\"flex-shrink:0;\">\n                                        <img decoding=\"async\" id=\"tml-image-preview\" src=\"\"\n                                            style=\"display:none; width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--tml-primary, #0073aa); box-shadow:0 2px 4px rgba(0,0,0,0.1);\">\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    \n                    \n                                            <div class=\"tml-form-group\">\n                            <label\n                                    style=\"display:block; margin-bottom:8px; font-weight:600; color:#333;\">Rating                                    *<\/label>                            <div class=\"tml-field-input-wrapper\">\n                                <div style=\"display:flex; align-items:center; gap:16px; margin-top:8px;\">\n                                    <input type=\"hidden\" name=\"tml_rating\" id=\"tml_rating\" value=\"5\">\n                                    <span class=\"tml-frontend-stars\" style=\"cursor: pointer; display: inline-flex; gap: 8px;\">\n                                        <i class=\"fa fa-star frontend-star\" data-val=\"1\"\n                                            style=\"font-size:32px; color:#ffb600; transition: transform 0.2s, color 0.2s;\"><\/i>\n                                        <i class=\"fa fa-star frontend-star\" data-val=\"2\"\n                                            style=\"font-size:32px; color:#ffb600; transition: transform 0.2s, color 0.2s;\"><\/i>\n                                        <i class=\"fa fa-star frontend-star\" data-val=\"3\"\n                                            style=\"font-size:32px; color:#ffb600; transition: transform 0.2s, color 0.2s;\"><\/i>\n                                        <i class=\"fa fa-star frontend-star\" data-val=\"4\"\n                                            style=\"font-size:32px; color:#ffb600; transition: transform 0.2s, color 0.2s;\"><\/i>\n                                        <i class=\"fa fa-star frontend-star\" data-val=\"5\"\n                                            style=\"font-size:32px; color:#ffb600; transition: transform 0.2s, color 0.2s;\"><\/i>\n                                    <\/span>\n                                    <span id=\"tml-frontend-rating-label\"\n                                        style=\"font-weight:600; color:#666; font-size:15px; user-select:none;\">5 Stars<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    \n                    \n                                            <div class=\"tml-form-group\">\n                            <label class=\"tml-recaptcha-label\">Spam Protection<\/label>\n                            <div class=\"tml-field-input-wrapper\">\n                                <div class=\"g-recaptcha\" data-sitekey=\"6Lc5ViMTAAAAAC0pP-ZIs4fwLZNG95B4fHMzHSZZ\"><\/div>\n                            <\/div>\n                        <\/div>\n                    \n                    <input type=\"hidden\" id=\"tml_nonce\" name=\"tml_nonce\" value=\"fc4a9b52ba\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/demo\/testimonial-premium\/wp-json\/wp\/v2\/pages\/1366\" \/>                    <input type=\"hidden\" name=\"tml_form_id\" value=\"global\">\n                    <input type=\"hidden\" name=\"action\" value=\"tml_submit_testimonial\">\n                    <input type=\"hidden\" name=\"secret_key\" value=\"6Lc5ViMTAAAAAEouGvdf1pq8gPJ4HgK-PBZgTVSr\">\n\n                    <div class=\"tml-form-group tml-form-buttons-group\"\n                        style=\"display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; padding-top:20px; border-top:1px solid #eee;\">\n                        <button type=\"submit\" id=\"tml-submit-btn\" class=\"btn btn-primary\"\n                            style=\"padding: 10px 20px; border:none; cursor:pointer; border-radius:4px; font-weight:600;\">Submit Testimonial<\/button>\n                        <button type=\"reset\" id=\"tml-reset-btn\" class=\"btn btn-secondary\"\n                            style=\"padding: 10px 20px; border:1px solid #ccc; cursor:pointer; background-color:#fff; color:#555; border-radius:4px; font-weight:600; transition:all 0.2s;\">Reset Form<\/button>\n                    <\/div>\n                <\/div>\n            <\/form>\n        <\/div><!-- .tml-form-content-wrap -->\n\n            <\/div>\n\n    <!-- Beautiful Video Recording Modal Popup -->\n    <div id=\"tml_video_modal\"\n        style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:999999; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; backdrop-filter:blur(5px); transition:opacity 0.3s ease;\">\n        <div\n            style=\"background:#1e1e1e; border-radius:12px; width:100%; max-width:500px; padding:24px; box-sizing:border-box; position:relative; box-shadow:0 20px 25px -5px rgba(0,0,0,0.3); border:1px solid #333; color:#fff; text-align:center;\">\n\n            <!-- Close Button -->\n            <button type=\"button\" id=\"tml_close_record_modal\"\n                style=\"position:absolute; top:15px; right:15px; background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; line-height:1; transition:color 0.2s; outline:none; box-shadow:none;\">&times;<\/button>\n\n            <!-- Modal Title -->\n            <h3 style=\"margin-top:0; margin-bottom:8px; font-size:18px; font-weight:700; color:#fff;\">Record Video\n                Testimonial<\/h3>\n            <p style=\"font-size:13px; color:#aaa; margin-bottom:20px; line-height:1.4;\">Allow camera access in your browser\n                to record your message.<\/p>\n\n            <!-- Video Screen Container -->\n            <div\n                style=\"background:#000; position:relative; width:100%; aspect-ratio:16\/9; border-radius:8px; overflow:hidden; margin-bottom:20px; border:1px solid #444; box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);\">\n                <!-- The actual camera stream video -->\n                <video id=\"tml_video_preview\" autoplay muted playsinline\n                    style=\"width:100%; height:100%; object-fit:cover; display:none;\"><\/video>\n\n                <!-- Video Placeholder Icon -->\n                <div id=\"tml_video_placeholder\"\n                    style=\"color:#666; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px;\">\n                    <i class=\"fa fa-video-camera\" style=\"font-size:48px; color:#555;\"><\/i>\n                    <span style=\"font-size:12px; font-weight:500;\">Camera Preview<\/span>\n                <\/div>\n\n                <!-- Recording REC Dot Badge -->\n                <div id=\"tml_recording_indicator\"\n                    style=\"position:absolute; top:15px; left:15px; display:none; align-items:center; gap:6px; background:rgba(224,36,36,0.9); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:0.5px; animation:tml-pulse 1.5s infinite;\">\n                    <span style=\"width:8px; height:8px; background:#fff; border-radius:50%; display:inline-block;\"><\/span>\n                    REC\n                <\/div>\n            <\/div>\n\n            <!-- Action Buttons inside Modal -->\n            <div style=\"display:flex; justify-content:center; gap:12px; flex-wrap:wrap;\">\n                <button type=\"button\" id=\"tml_start_record\"\n                    style=\"display:inline-flex; align-items:center; gap:8px; background:#e02424; color:#fff; border:none; padding:10px 20px; border-radius:30px; font-weight:600; cursor:pointer; font-size:14px; transition:all 0.2s; box-shadow:0 4px 6px rgba(224,36,36,0.2); outline:none;\">\n                    <i class=\"fa fa-circle\"><\/i> Start Recording\n                <\/button>\n                <button type=\"button\" id=\"tml_stop_record\"\n                    style=\"display:none; align-items:center; gap:8px; background:#fff; color:#111; border:none; padding:10px 20px; border-radius:30px; font-weight:600; cursor:pointer; font-size:14px; transition:all 0.2s; outline:none;\">\n                    <i class=\"fa fa-stop\"><\/i> Stop Recording\n                <\/button>\n                <button type=\"button\" id=\"tml_retake_record\"\n                    style=\"display:none; align-items:center; gap:8px; background:#444; color:#fff; border:none; padding:10px 20px; border-radius:30px; font-weight:600; cursor:pointer; font-size:14px; transition:all 0.2s; border:1px solid #555; outline:none;\">\n                    <i class=\"fa fa-refresh\"><\/i> Retake\n                <\/button>\n                <button type=\"button\" id=\"tml_save_record\"\n                    style=\"display:none; align-items:center; gap:8px; background:#22c55e; color:#fff; border:none; padding:10px 20px; border-radius:30px; font-weight:600; cursor:pointer; font-size:14px; transition:all 0.2s; box-shadow:0 4px 6px rgba(34,197,94,0.2); outline:none;\">\n                    <i class=\"fa fa-check\"><\/i> Save & Close\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        @keyframes tml-pulse {\n            0% {\n                opacity: 1;\n            }\n\n            50% {\n                opacity: 0.5;\n            }\n\n            100% {\n                opacity: 1;\n            }\n        }\n    <\/style>\n\n    <style>\n        .tml-frontend-form-wrapper {\n            width: 100% !important;\n            max-width:680px;\n            margin: 0 auto;\n            margin-top: 40px;\n            background:\n                #ffffff            ;\n            padding: 25px;\n            border-radius: 8px;\n            border: none;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);\n            box-sizing: border-box;\n        }\n\n        .tml-frontend-form-wrapper.has-bg-image-behind {\n            background-image: linear-gradient(rgba(255, 255, 255, 0.85),\n                    rgba(255, 255, 255, 0.85)                ), url(https:\/\/awplife.com\/demo\/testimonial-premium\/wp-content\/plugins\/testimonial-premium-7.0-demo\/assets\/img\/testimonial_backdrop.png) !important;\n            background-size: cover !important;\n            background-position: center !important;\n            background-repeat: no-repeat !important;\n        }\n\n        .tml-frontend-form-wrapper.has-bg-image-behind .tml-form-content-wrap {\n            background: transparent !important;\n            padding: 0 !important;\n        }\n\n        .tml-frontend-form-wrapper.has-side-image {\n            display: flex !important;\n            align-items: stretch !important;\n            padding: 0 !important;\n            overflow: hidden !important;\n            width: 100% !important;\n            max-width:1280px !important;\n        }\n\n        .tml-form-content-wrap {\n            flex: 1;\n            padding: 25px;\n            background:#ffffff;\n            box-sizing: border-box;\n            min-width: 0;\n        }\n\n        .tml-form-side-image {\n            flex: 0 0 600px !important;\n            width: 600px !important;\n            max-width: 600px !important;\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n            min-height: 350px;\n            box-sizing: border-box;\n        }\n\n        @media (max-width: 767px) {\n            .tml-frontend-form-wrapper.has-side-image {\n                flex-direction: column !important;\n                max-width: 100% !important;\n            }\n\n            .tml-frontend-form-wrapper.has-side-image.side-image-left {\n                flex-direction: column-reverse !important;\n            }\n\n            .tml-frontend-form-wrapper.has-side-image.side-image-right {\n                flex-direction: column !important;\n            }\n\n            .tml-form-side-image {\n                height: 220px !important;\n                min-height: 220px !important;\n                width: 100% !important;\n                max-width: 100% !important;\n                flex: none !important;\n            }\n\n            .tml-form-content-wrap {\n                flex: none !important;\n                width: 100% !important;\n            }\n        }\n\n        .tml-form-group {\n            margin-bottom: 15px;\n        }\n\n        .tml-form-group label {\n            display: block;\n            margin-bottom: 5px;\n            font-weight: bold;\n            color:\n                #333333            ;\n            text-align: left;\n        }\n\n        .tml-form-group input,\n        .tml-form-group textarea,\n        .tml-form-group select {\n            width: 100%;\n            padding: 10px;\n            background:\n                #ffffff            ;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            box-sizing: border-box;\n        }\n\n        #tml-reset-btn:hover {\n            background-color: #f3f4f6 !important;\n            border-color: #9ca3af !important;\n            color: #111827 !important;\n        }\n\n        #tml-submit-btn {\n            background-color:\n                #0073aa                !important;\n            color:\n                #ffffff                !important;\n            transition: opacity 0.2s !important;\n        }\n\n        #tml-submit-btn:hover {\n            opacity: 0.9 !important;\n        }\n\n        \/* Premium Horizontal style_two CSS *\/\n        @media (min-width: 768px) {\n            .tml-frontend-form-wrapper.style_two:not(.has-side-image) {\n                max-width: 680px !important;\n            }\n\n            .tml-frontend-form-wrapper.style_two .tml-form-group {\n                display: flex !important;\n                align-items: flex-start !important;\n                gap: 24px !important;\n                margin-bottom: 20px !important;\n            }\n\n            .tml-frontend-form-wrapper.style_two .tml-form-group>label {\n                width: 180px !important;\n                text-align: right !important;\n                flex-shrink: 0 !important;\n                margin-bottom: 0 !important;\n                padding-top: 8px !important;\n                font-weight: 600 !important;\n            }\n\n            .tml-frontend-form-wrapper.style_two .tml-field-input-wrapper {\n                flex: 1 !important;\n            }\n\n            .tml-frontend-form-wrapper.style_two .tml-form-buttons-group {\n                padding-left: 204px !important;\n            }\n        }\n\n        #tml-form-message {\n            margin-bottom: 15px;\n            font-weight: bold;\n            padding: 10px;\n            border-radius: 4px;\n            display: none;\n        }\n\n        .tml-success {\n            background: #d4edda;\n            color: #155724;\n            border: 1px solid #c3e6cb;\n            display: block !important;\n        }\n\n        .tml-error {\n            background: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n            display: block !important;\n        }\n    <\/style>\n    <script>\n        jQuery(document).ready(function ($) {\n            \/\/ Dynamic Image Preview\n            $('#tml_image').on('change', function () {\n                var file = this.files[0];\n                if (file) {\n                    var reader = new FileReader();\n                    reader.onload = function (e) {\n                        $('#tml-image-preview').attr('src', e.target.result).show();\n                    }\n                    reader.readAsDataURL(file);\n                } else {\n                    $('#tml-image-preview').hide().attr('src', '');\n                }\n            });\n\n            \/\/ Toggle New Category Input field\n            $('#tml_category_id').on('change', function () {\n                if ($(this).val() === 'new') {\n                    $('#tml-new-category-wrapper').slideDown(200);\n                    $('#tml_new_category_name').prop('required', true);\n                } else {\n                    $('#tml-new-category-wrapper').slideUp(200);\n                    $('#tml_new_category_name').prop('required', false).val('');\n                }\n            });\n\n            \/\/ Reset Button State and Visuals\n            $('#tml-frontend-form').on('reset', function () {\n                setTimeout(function () {\n                    \/\/ Reset rating field\n                    $('#tml_rating').val('');\n                    $('#tml-frontend-rating-label').text('Select Rating');\n                    $('.tml-frontend-stars .frontend-star').removeClass('fa-star').addClass('fa-star-o').css('color', '#ccc');\n\n                    \/\/ Reset video toggle choices to first default\n                    $('input[name=\"tml_video_type\"]').first().prop('checked', true).trigger('change');\n\n                    \/\/ Reset Video preview & status\n                    $('#tml_recorded_status').hide();\n                    $('#tml_open_record_modal').html('<i class=\"fa fa-video-camera\"><\/i> Record Video Testimonial').css('background', '#e02424');\n\n                    \/\/ Reset category selectors\n                    $('#tml-new-category-wrapper').hide();\n                    $('#tml_new_category_name').prop('required', false).val('');\n\n                    \/\/ Clear custom image preview if exists\n                    $('#tml-image-preview').hide().attr('src', '');\n\n                    \/\/ Clear message\n                    if (!window.tml_is_success_reset) {\n                        $('#tml-form-message').hide().removeClass('tml-success tml-error').text('');\n                    } else {\n                        window.tml_is_success_reset = false;\n                    }\n                }, 50);\n            });\n\n            \/\/ Frontend Interactive Star Rating\n            $('.tml-frontend-stars .frontend-star').on('click', function () {\n                var val = $(this).data('val');\n                $('#tml_rating').val(val);\n                $('#tml-frontend-rating-label').text(val + ' Star' + (val > 1 ? 's' : ''));\n                $(this).parent().children('.frontend-star').each(function () {\n                    if ($(this).data('val') <= val) {\n                        $(this).removeClass('fa-star-o').addClass('fa-star').css('color', '#ffb600');\n                    } else {\n                        $(this).removeClass('fa-star').addClass('fa-star-o').css('color', '#ccc');\n                    }\n                });\n            });\n\n            $('.tml-frontend-stars .frontend-star').on('mouseenter', function () {\n                var val = $(this).data('val');\n                $(this).parent().children('.frontend-star').each(function () {\n                    if ($(this).data('val') <= val) {\n                        $(this).css('color', '#ffd000').css('transform', 'scale(1.15)');\n                    } else {\n                        $(this).css('color', '#ccc').css('transform', 'scale(1)');\n                    }\n                });\n            }).on('mouseleave', function () {\n                var currentVal = $('#tml_rating').val();\n                $(this).parent().children('.frontend-star').each(function () {\n                    $(this).css('transform', 'scale(1)');\n                    if ($(this).data('val') <= currentVal) {\n                        $(this).removeClass('fa-star-o').addClass('fa-star').css('color', '#ffb600');\n                    } else {\n                        $(this).removeClass('fa-star').addClass('fa-star-o').css('color', '#ccc');\n                    }\n                });\n            });\n\n            var mediaRecorder;\n            var recordedChunks = [];\n            var recordedVideoBlob = null;\n            var videoStream = null;\n            var previewVideo = document.getElementById('tml_video_preview');\n\n            \/\/ Toggle Video Option (URL vs Recording)\n            $('input[name=\"tml_video_type\"]').on('change', function () {\n                var type = $(this).val();\n                $('.tml-video-option-section').hide();\n                if (type === 'record') {\n                    $('#tml-video-record-wrapper').show();\n                    $('#tml_video_url').val('');\n                } else {\n                    $('#tml-video-record-wrapper').hide();\n                    $('#tml-video-url-wrapper').show();\n\n                    \/\/ Stop stream if active\n                    if (videoStream) {\n                        videoStream.getTracks().forEach(function (track) { track.stop(); });\n                        videoStream = null;\n                    }\n                    recordedVideoBlob = null;\n                    $('#tml_recorded_status').hide();\n                    $('#tml_open_record_modal').html('<i class=\"fa fa-video-camera\"><\/i> Record Video Testimonial').css('background', '#e02424');\n                }\n            });\n\n            \/\/ Modal Trigger Click\n            $('#tml_open_record_modal').on('click', async function (e) {\n                e.preventDefault();\n                $('#tml_video_modal').css('display', 'flex').hide().fadeIn(200);\n\n                \/\/ Show placeholder and hides video initially\n                previewVideo.style.display = 'none';\n                $('#tml_video_placeholder').show();\n\n                \/\/ Reset buttons inside modal\n                $('#tml_start_record').show();\n                $('#tml_stop_record').hide();\n                $('#tml_retake_record').hide();\n                $('#tml_save_record').hide();\n                $('#tml_recording_indicator').hide();\n                previewVideo.controls = false;\n                previewVideo.muted = true;\n\n                \/\/ Request camera permission and initialize live preview\n                try {\n                    videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });\n                    previewVideo.srcObject = videoStream;\n                    previewVideo.style.display = 'block';\n                    $('#tml_video_placeholder').hide();\n                } catch (err) {\n                    alert('Could not access camera\/microphone: ' + err.message);\n                    closeRecordModal();\n                }\n            });\n\n            \/\/ Close Modal Function\n            function closeRecordModal() {\n                if (videoStream) {\n                    videoStream.getTracks().forEach(function (track) { track.stop(); });\n                    videoStream = null;\n                }\n                previewVideo.srcObject = null;\n                if (!recordedVideoBlob) {\n                    previewVideo.src = '';\n                }\n                $('#tml_video_modal').fadeOut(200);\n            }\n\n            $('#tml_close_record_modal').on('click', function (e) {\n                e.preventDefault();\n                closeRecordModal();\n            });\n\n            \/\/ Start Recording Inside Modal\n            $('#tml_start_record').on('click', function (e) {\n                e.preventDefault();\n                if (!videoStream) return;\n\n                recordedChunks = [];\n                mediaRecorder = new MediaRecorder(videoStream);\n                mediaRecorder.ondataavailable = function (ev) {\n                    if (ev.data.size > 0) recordedChunks.push(ev.data);\n                };\n                mediaRecorder.onstop = function () {\n                    recordedVideoBlob = new Blob(recordedChunks, { type: 'video\/webm' });\n                    previewVideo.srcObject = null;\n                    previewVideo.src = URL.createObjectURL(recordedVideoBlob);\n                    previewVideo.controls = true;\n                    previewVideo.muted = false;\n\n                    $('#tml_retake_record').show();\n                    $('#tml_save_record').show();\n                };\n\n                recordedChunks = [];\n                mediaRecorder.start();\n\n                $(this).hide();\n                $('#tml_stop_record').show();\n                $('#tml_recording_indicator').css('display', 'flex');\n            });\n\n            \/\/ Stop Recording Inside Modal\n            $('#tml_stop_record').on('click', function (e) {\n                e.preventDefault();\n                if (mediaRecorder && mediaRecorder.state !== 'inactive') {\n                    mediaRecorder.stop();\n                    $(this).hide();\n                    $('#tml_recording_indicator').hide();\n\n                    \/\/ Stop live stream so preview can play the recorded file\n                    if (videoStream) {\n                        videoStream.getTracks().forEach(function (track) { track.stop(); });\n                        videoStream = null;\n                    }\n                }\n            });\n\n            \/\/ Retake Recording Inside Modal\n            $('#tml_retake_record').on('click', async function (e) {\n                e.preventDefault();\n                recordedVideoBlob = null;\n                previewVideo.src = '';\n                previewVideo.controls = false;\n                previewVideo.muted = true;\n\n                $(this).hide();\n                $('#tml_save_record').hide();\n\n                \/\/ Restart preview stream\n                try {\n                    videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });\n                    previewVideo.srcObject = videoStream;\n                    previewVideo.style.display = 'block';\n                    $('#tml_video_placeholder').hide();\n                    $('#tml_start_record').show();\n                } catch (err) {\n                    alert('Could not access camera\/microphone: ' + err.message);\n                }\n            });\n\n            \/\/ Save Recording and Close Modal\n            $('#tml_save_record').on('click', function (e) {\n                e.preventDefault();\n                if (recordedVideoBlob) {\n                    $('#tml_recorded_status').css('display', 'inline-flex');\n                    $('#tml_open_record_modal').html('<i class=\"fa fa-refresh\"><\/i> Re-Record Video').css('background', '#22c55e');\n                }\n                closeRecordModal();\n            });\n\n            \/\/ Toggle Social Profile Input Fields\n            $('.tml-social-toggle-btn').on('click', function (e) {\n                e.preventDefault();\n                var target = $(this).data('target');\n                var wrapper = $('#tml-social-input-' + target);\n\n                if (wrapper.is(':visible')) {\n                    wrapper.hide();\n                    wrapper.find('input').val('');\n                    $(this).css('background', 'none').css('color', $(this).css('border-color'));\n                } else {\n                    wrapper.css('display', 'flex').hide().slideDown(200);\n                    var activeColor = $(this).css('border-color');\n                    $(this).css('background', activeColor).css('color', '#fff');\n                }\n            });\n\n            $('#tml-frontend-form').on('submit', function (e) {\n                e.preventDefault();\n                var form = $(this);\n                var formData = new FormData(this);\n                var submitBtn = $('#tml-submit-btn');\n\n                if (recordedVideoBlob) {\n                    formData.append('tml_recorded_video', recordedVideoBlob, 'testimonial_video.webm');\n                }\n\n                \/\/ Hide fields container, show loader, hide old messages\n                form.find('.tml-form-fields-container').hide();\n                $('#tml-form-loader').show();\n                $('#tml-form-message').hide().removeClass('tml-success tml-error').html('');\n\n                submitBtn.prop('disabled', true).text('Submitting...');\n\n                $.ajax({\n                    url: 'https:\/\/awplife.com\/demo\/testimonial-premium\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: formData,\n                    processData: false,\n                    contentType: false,\n                    success: function (response) {\n                        $('#tml-form-loader').hide();\n                        if (response.success) {\n                            \/\/ Reset form using the bypass flag\n                            window.tml_is_success_reset = true;\n                            form[0].reset();\n\n                            \/\/ Show success message\n                            $('#tml-form-message').addClass('tml-success').html(response.data.message).fadeIn(300);\n\n                            if (typeof grecaptcha !== 'undefined') {\n                                grecaptcha.reset();\n                            }\n\n                            \/\/ Keep success message visible for 2 seconds, then show form again\n                            setTimeout(function () {\n                                $('#tml-form-message').fadeOut(400, function () {\n                                    $(this).removeClass('tml-success').html('');\n                                    form.find('.tml-form-fields-container').fadeIn(400);\n                                });\n                            }, 2000);\n                        } else {\n                            \/\/ Show error message and restore form fields immediately\n                            $('#tml-form-message').addClass('tml-error').html(response.data.message).fadeIn(300);\n                            form.find('.tml-form-fields-container').show();\n                            if (typeof grecaptcha !== 'undefined') {\n                                grecaptcha.reset();\n                            }\n                        }\n                    },\n                    error: function () {\n                        $('#tml-form-loader').hide();\n                        $('#tml-form-message').addClass('tml-error').html('An error occurred. Please try again.').fadeIn(300);\n                        form.find('.tml-form-fields-container').show();\n                    },\n                    complete: function () {\n                        submitBtn.prop('disabled', false).text('Submit Testimonial');\n                    }\n                });\n            });\n        });\n    <\/script>\n                    <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <style>\n        .tml-sandbox-sidebar select {\n            width: 100% !important;\n            min-width: 100% !important;\n            max-width: 100% !important;\n            height: 36px !important;\n            background: #ffffff !important;\n            background-color: #ffffff !important;\n            color: #334155 !important;\n            border: 1px solid #cbd5e1 !important;\n            border-radius: 8px !important;\n            font-size: 13px !important;\n            font-weight: 600 !important;\n            opacity: 1 !important;\n            visibility: visible !important;\n            display: inline-block !important;\n            box-shadow: none !important;\n            padding: 2px 10px !important;\n            line-height: normal !important;\n            appearance: auto !important;\n            -webkit-appearance: auto !important;\n            -moz-appearance: auto !important;\n        }\n\n        .tml-sandbox-sidebar select option {\n            background: #ffffff !important;\n            background-color: #ffffff !important;\n            color: #334155 !important;\n            font-size: 13px !important;\n            font-weight: 600 !important;\n        }\n\n        .tml-frontend-sandbox-wrapper {\n            width: 100vw !important;\n            max-width: 100vw !important;\n            position: relative !important;\n            left: calc(-50vw + 50%) !important;\n            border-radius: 0 !important;\n            border-left: none !important;\n            border-right: none !important;\n        }\n\n        @keyframes tml-sandbox-spin {\n            0% {\n                transform: rotate(0deg);\n            }\n\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n        .tml-accordion-content {\n            transition: max-height 0.25s ease-out, opacity 0.2s ease-out;\n        }\n\n        .tml-accordion-header.active i.fa-chevron-down {\n            transform: rotate(180deg);\n        }\n\n        .tml-form-bg-preset-item.active {\n            border-color: #2271b1 !important;\n            box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.25);\n            transform: scale(1.03);\n        }\n\n        @media (max-width: 768px) {\n            .tml-frontend-sandbox-wrapper {\n                flex-direction: column !important;\n            }\n\n            .tml-sandbox-sidebar {\n                width: 100% !important;\n                max-height: none !important;\n            }\n\n            .tml-sandbox-canvas {\n                border-radius: 0 0 20px 20px !important;\n            }\n\n            .tml-sandbox-canvas>div {\n                position: relative !important;\n                top: 0 !important;\n            }\n        }\n    <\/style>\n\n    <script type=\"text\/javascript\">\n        jQuery(document).ready(function ($) {\n            \/\/ Destroy Choices\/Select2 on frontend live demo\n            setTimeout(function () {\n                var $selects = $('.tml-sandbox-sidebar select');\n                if ($.fn.select2) {\n                    try { $selects.select2('destroy'); } catch (e) { }\n                }\n                $selects.css({\n                    'display': 'inline-block',\n                    'opacity': '1',\n                    'visibility': 'visible',\n                    'color': '#334155',\n                    'background-color': '#ffffff'\n                });\n            }, 500);\n\n            \/\/ Accordions\n            $('.tml-accordion-header').on('click', function () {\n                var $header = $(this);\n                var $content = $header.next('.tml-accordion-content');\n\n                $('.tml-accordion-header').not($header).removeClass('active');\n                $('.tml-accordion-content').not($content).slideUp(200);\n\n                $header.toggleClass('active');\n                $content.slideToggle(200);\n            });\n\n            \/\/ Keep only first accordion open initially\n            $('.tml-accordion-item').each(function (index) {\n                if (index > 0) {\n                    $(this).find('.tml-accordion-header').removeClass('active');\n                    $(this).find('.tml-accordion-content').hide();\n                } else {\n                    $(this).find('.tml-accordion-header').addClass('active');\n                }\n            });\n\n            \/\/ Preset background click handlers\n            $('.tml-form-bg-preset-item').on('click', function () {\n                var url = $(this).data('url');\n                $('.tml-form-bg-preset-item').removeClass('active');\n                $(this).addClass('active');\n                $('#tml_form_bg_custom_url').val(url).trigger('change');\n            });\n\n            \/\/ Layout Card Option Click Handler\n            $('.tml-layout-card-option').on('click', function () {\n                var val = $(this).data('value');\n                $('.tml-layout-card-option').removeClass('active').css({\n                    'border-color': '#cbd5e1',\n                    'background': '#fff',\n                    'box-shadow': 'none'\n                });\n                $(this).addClass('active').css({\n                    'border-color': '#2271b1',\n                    'background': '#f0f7ff',\n                    'box-shadow': '0 2px 4px rgba(34,113,177,0.15)'\n                });\n                $('#tml-form-layout-input').val(val);\n                triggerPreviewUpdate();\n            });\n\n            \/\/ Trigger preview update\n            var activePreviewRequest = null;\n            function triggerPreviewUpdate() {\n                var $loader = $('#tml-sandbox-loader');\n                $loader.css('display', 'flex');\n\n                if (activePreviewRequest) {\n                    activePreviewRequest.abort();\n                }\n\n                var formData = $('#tml-frontend-form-customizer-form').serializeArray();\n                formData.push({ name: 'action', value: 'tml_frontend_form_live_preview' });\n                formData.push({ name: 'nonce', value: '7129728ef0' });\n\n                activePreviewRequest = $.ajax({\n                    url: 'https:\/\/awplife.com\/demo\/testimonial-premium\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: formData,\n                    success: function (response) {\n                        if (response.success) {\n                            $('#tml-sandbox-render-target').html(response.data.html);\n                            \n                            \/\/ Explicitly re-render reCAPTCHA after AJAX DOM update\n                            if ($('.g-recaptcha').length > 0) {\n                                if (typeof grecaptcha !== 'undefined') {\n                                    $('.g-recaptcha').each(function() {\n                                        try {\n                                            grecaptcha.render(this);\n                                        } catch (e) {\n                                            \/\/ Handle already rendered elements gracefully\n                                        }\n                                    });\n                                } else {\n                                    window.tmlRecaptchaCallback = function() {\n                                        $('.g-recaptcha').each(function() {\n                                            try {\n                                                grecaptcha.render(this);\n                                            } catch (e) {}\n                                        });\n                                    };\n                                    $.getScript('https:\/\/www.google.com\/recaptcha\/api.js?onload=tmlRecaptchaCallback&render=explicit');\n                                }\n                            }\n                        }\n                        $loader.hide();\n                    },\n                    error: function () {\n                        $loader.hide();\n                    },\n                    complete: function () {\n                        activePreviewRequest = null;\n                    }\n                });\n            }\n\n            \/\/ Bind change\/input events\n            $('#tml-frontend-form-customizer-form').on('change', 'select, input[type=\"checkbox\"]', function () {\n                triggerPreviewUpdate();\n            });\n\n            $('#tml-frontend-form-customizer-form').on('change input', 'input[type=\"text\"], input[type=\"number\"], input[type=\"color\"]', function () {\n                clearTimeout(window.tmlFormPreviewTimeout);\n                window.tmlFormPreviewTimeout = setTimeout(triggerPreviewUpdate, 250);\n            });\n        });\n    <\/script>\n    \n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1366","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/pages\/1366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/comments?post=1366"}],"version-history":[{"count":5,"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/pages\/1366\/revisions"}],"predecessor-version":[{"id":1390,"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/pages\/1366\/revisions\/1390"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/testimonial-premium\/wp-json\/wp\/v2\/media?parent=1366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}