formulario<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 20px;\n }\n h1 {\n color: #333;\n text-align: center;\n }\n h2 {\n color: #333;\n width: 100%;\n margin-bottom: 10px;\n border-bottom: 1px solid #eee;\n padding-bottom: 10px;\n }\n form {\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 800px; \/* Increased max-width for two columns *\/\n margin: auto;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n .form-group {\n flex-basis: 48%; \/* Each group takes up slightly less than half the width *\/\n margin-bottom: 15px;\n }\n .form-group.full-width {\n flex-basis: 100%;\n }\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n }\n input[type=\"text\"],\n input[type=\"tel\"],\n input[type=\"email\"],\n input[type=\"number\"],\n select,\n textarea {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #ddd;\n box-sizing: border-box;\n }\n .checkbox-group {\n display: flex;\n align-items: center;\n }\n input[type=\"checkbox\"] {\n margin-right: 10px;\n width: auto;\n }\n input[type=\"submit\"] {\n background-color: #4CAF50;\n color: white;\n padding: 12px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n width: 100%;\n }\n input[type=\"submit\"]:hover {\n background-color: #45a049;\n }\n #deliveryAddress, #creditCardDetails {\n flex-basis: 100%;\n display: none; \/* Keep it hidden initially *\/\n }\n .credit-card-row {\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n .credit-card-row .form-group {\n flex-basis: 32%;\n }\n <\/style>\n<\/head>\n<body>\n <form id=\"orderForm\">\n <h2>Personal Information<\/h2>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\">Phone:<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <\/div>\n \n <div class=\"form-group\">  <\/div>\n \n <h2>Delivery & Payment<\/h2>\n <div class=\"form-group\">\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"delivery\" name=\"delivery\">\n <label for=\"delivery\">Delivery<\/label>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"paymentMethod\">Payment Method<\/label>\n <select id=\"paymentMethod\" name=\"paymentMethod\">\n <option value=\"creditCard\">Credit Card<\/option>\n <option value=\"paypal\">PayPal<\/option>\n <option value=\"cash\">Cash on Delivery<\/option>\n <\/select>\n <\/div>\n\n <div id=\"deliveryAddress\" class=\"form-group full-width\">\n <label for=\"address\">Address:<\/label>\n <input type=\"text\" id=\"address\" name=\"address\">\n <\/div>\n \n <div id=\"creditCardDetails\" class=\"form-group full-width\">\n <div class=\"credit-card-row\">\n <div class=\"form-group\">\n <label for=\"cardNumber\">Card Number:<\/label>\n <input type=\"text\" id=\"cardNumber\" name=\"cardNumber\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"expiryDate\">Expiry Date:<\/label>\n <input type=\"text\" id=\"expiryDate\" name=\"expiryDate\" placeholder=\"MM\/YY\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"cvv\">CVV:<\/label>\n <input type=\"text\" id=\"cvv\" name=\"cvv\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group full-width\">\n <input type=\"submit\" value=\"Place Order\">\n <\/div>\n <\/form>\n\n <script>\n document.getElementById('delivery').addEventListener('change', function() {\n var deliveryAddress = document.getElementById('deliveryAddress');\n deliveryAddress.style.display = this.checked ? 'block' : 'none';\n });\n\n document.getElementById('paymentMethod').addEventListener('change', function() {\n var creditCardDetails = document.getElementById('creditCardDetails');\n creditCardDetails.style.display = this.value === 'creditCard' ? 'block' : 'none';\n });\n\n document.getElementById('orderForm').addEventListener('submit', function(event) {\n event.preventDefault();\n \/\/ To make sure the conditional fields are required only when visible\n const deliveryCheckbox = document.getElementById('delivery');\n const addressInput = document.getElementById('address');\n if (deliveryCheckbox.checked) {\n addressInput.required = true;\n } else {\n addressInput.required = false;\n }\n\n const paymentMethod = document.getElementById('paymentMethod');\n const cardNumberInput = document.getElementById('cardNumber');\n const expiryDateInput = document.getElementById('expiryDate');\n const cvvInput = document.getElementById('cvv');\n\n if (paymentMethod.value === 'creditCard') {\n cardNumberInput.required = true;\n expiryDateInput.required = true;\n cvvInput.required = true;\n } else {\n cardNumberInput.required = false;\n expiryDateInput.required = false;\n cvvInput.required = false;\n }\n \n \/\/ Re-check form validity after changing required attributes\n if (this.checkValidity()) {\n alert('Order placed successfully!');\n } else {\n \/\/ Find the first invalid element and focus it for better UX\n this.querySelector(':invalid').focus();\n }\n });\n \n \/\/ Initial check for payment method on page load\n var paymentMethod = document.getElementById('paymentMethod');\n var creditCardDetails = document.getElementById('creditCardDetails');\n creditCardDetails.style.display = paymentMethod.value === 'creditCard' ? 'block' : 'none';\n\n <\/script>\n<\/body>\n<\/html>\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>formulario Personal Information Name: Phone: Email: Delivery & Payment Delivery Payment Method Credit CardPayPalCash on Delivery Address: Card Number: Expiry […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"disabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":20,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n formulario<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 20px;\n }\n h1 {\n color: #333;\n text-align: center;\n }\n h2 {\n color: #333;\n width: 100%;\n margin-bottom: 10px;\n border-bottom: 1px solid #eee;\n padding-bottom: 10px;\n }\n form {\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 800px; \/* Increased max-width for two columns *\/\n margin: auto;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n .form-group {\n flex-basis: 48%; \/* Each group takes up slightly less than half the width *\/\n margin-bottom: 15px;\n }\n .form-group.full-width {\n flex-basis: 100%;\n }\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n }\n input[type=\"text\"],\n input[type=\"tel\"],\n input[type=\"email\"],\n input[type=\"number\"],\n select,\n textarea {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #ddd;\n box-sizing: border-box;\n }\n .checkbox-group {\n display: flex;\n align-items: center;\n }\n input[type=\"checkbox\"] {\n margin-right: 10px;\n width: auto;\n }\n input[type=\"submit\"] {\n background-color: #4CAF50;\n color: white;\n padding: 12px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n width: 100%;\n }\n input[type=\"submit\"]:hover {\n background-color: #45a049;\n }\n #deliveryAddress, #creditCardDetails {\n flex-basis: 100%;\n display: none; \/* Keep it hidden initially *\/\n }\n .credit-card-row {\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n .credit-card-row .form-group {\n flex-basis: 32%;\n }\n <\/style>\n<\/head>\n<body>\n <form id=\"orderForm\">\n <h2>Personal Information<\/h2>\n <div class=\"form-group\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\">Phone:<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <\/div>\n \n <div class=\"form-group\">  <\/div>\n \n <h2>Delivery & Payment<\/h2>\n <div class=\"form-group\">\n <div class=\"checkbox-group\">\n <input type=\"checkbox\" id=\"delivery\" name=\"delivery\">\n <label for=\"delivery\">Delivery<\/label>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"paymentMethod\">Payment Method<\/label>\n <select id=\"paymentMethod\" name=\"paymentMethod\">\n <option value=\"creditCard\">Credit Card<\/option>\n <option value=\"paypal\">PayPal<\/option>\n <option value=\"cash\">Cash on Delivery<\/option>\n <\/select>\n <\/div>\n\n <div id=\"deliveryAddress\" class=\"form-group full-width\">\n <label for=\"address\">Address:<\/label>\n <input type=\"text\" id=\"address\" name=\"address\">\n <\/div>\n \n <div id=\"creditCardDetails\" class=\"form-group full-width\">\n <div class=\"credit-card-row\">\n <div class=\"form-group\">\n <label for=\"cardNumber\">Card Number:<\/label>\n <input type=\"text\" id=\"cardNumber\" name=\"cardNumber\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"expiryDate\">Expiry Date:<\/label>\n <input type=\"text\" id=\"expiryDate\" name=\"expiryDate\" placeholder=\"MM\/YY\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"cvv\">CVV:<\/label>\n <input type=\"text\" id=\"cvv\" name=\"cvv\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group full-width\">\n <input type=\"submit\" value=\"Place Order\">\n <\/div>\n <\/form>\n\n <script>\n document.getElementById('delivery').addEventListener('change', function() {\n var deliveryAddress = document.getElementById('deliveryAddress');\n deliveryAddress.style.display = this.checked ? 'block' : 'none';\n });\n\n document.getElementById('paymentMethod').addEventListener('change', function() {\n var creditCardDetails = document.getElementById('creditCardDetails');\n creditCardDetails.style.display = this.value === 'creditCard' ? 'block' : 'none';\n });\n\n document.getElementById('orderForm').addEventListener('submit', function(event) {\n event.preventDefault();\n \/\/ To make sure the conditional fields are required only when visible\n const deliveryCheckbox = document.getElementById('delivery');\n const addressInput = document.getElementById('address');\n if (deliveryCheckbox.checked) {\n addressInput.required = true;\n } else {\n addressInput.required = false;\n }\n\n const paymentMethod = document.getElementById('paymentMethod');\n const cardNumberInput = document.getElementById('cardNumber');\n const expiryDateInput = document.getElementById('expiryDate');\n const cvvInput = document.getElementById('cvv');\n\n if (paymentMethod.value === 'creditCard') {\n cardNumberInput.required = true;\n expiryDateInput.required = true;\n cvvInput.required = true;\n } else {\n cardNumberInput.required = false;\n expiryDateInput.required = false;\n cvvInput.required = false;\n }\n \n \/\/ Re-check form validity after changing required attributes\n if (this.checkValidity()) {\n alert('Order placed successfully!');\n } else {\n \/\/ Find the first invalid element and focus it for better UX\n this.querySelector(':invalid').focus();\n }\n });\n \n \/\/ Initial check for payment method on page load\n var paymentMethod = document.getElementById('paymentMethod');\n var creditCardDetails = document.getElementById('creditCardDetails');\n creditCardDetails.style.display = paymentMethod.value === 'creditCard' ? 'block' : 'none';\n\n <\/script>\n<\/body>\n<\/html>\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>formulario Personal Information Name: Phone: Email: Delivery & Payment Delivery Payment Method Credit CardPayPalCash on Delivery Address: Card Number: Expiry […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"disabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":20,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/www.gabriel.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}