{"id":14,"date":"2024-02-20T20:50:16","date_gmt":"2024-02-20T20:50:16","guid":{"rendered":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/?page_id=14"},"modified":"2024-07-05T09:22:22","modified_gmt":"2024-07-05T09:22:22","slug":"make-an-appointment","status":"publish","type":"page","link":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/","title":{"rendered":"Make an Appointment"},"content":{"rendered":"\n<p class=\"has-text-align-center has-background\" style=\"background-color:#ffeec5\">This demo showcases the ability to use custom checkout fields.<\/p>\n\n\n<div class=\"mpa-shortcode appointment-form-shortcode\">\n<div class=\"mpa-booking-step mpa-booking-step-service-form mpa-hide\">\n\t<form class=\"mpa-service-form\" method=\"POST\" action=\"\">\n\t\t\n\t\t\n\t\t<p class=\"mpa-input-wrapper mpa-service-wrapper\">\n\t\t\t<label for=\"mpa-service-6a27891565585\">\n\t\t\t\tService\t\t\t\t<strong><abbr title=\"Required\">*<\/abbr><\/strong>\t\t\t<\/label>\n\n\t\t\t<select id=\"mpa-service-6a27891565585\" class=\"mpa-service\" data-default=\"12\" data-is-hidden=\"true\"><option value=\"\" selected='selected'>\u2014 Select \u2014<\/option><\/select>\t\t<\/p>\n\n\t\t\n\t\t\n\t\t<p class=\"mpa-actions\">\n\t\t\t<button type=\"button\" class=\"button button-primary mpa-button-next\" disabled=\"disabled\">Next<\/button>\t\t<\/p>\n\t<\/form>\n\n\t<div class=\"mpa-loading\"><\/div>\n<\/div>\n<div class=\"mpa-booking-step mpa-booking-step-period mpa-hide\">\n\t<p class=\"mpa-shortcode-title\">\n\t\tSelect Date &amp; Time\t<\/p>\n\n\t<div class=\"mpa-input-container\">\n\t\t<div class=\"mpa-input-wrapper mpa-date-wrapper\">\n\t\t\t<input class=\"mpa-date mpa-hide\" type=\"hidden\" value=\"\">\n\n\t\t\t<div class=\"mpa-loading\"><\/div>\n\t\t<\/div>\n\n\t\t<div class=\"mpa-input-wrapper mpa-time-wrapper mpa-hide\">\n\t\t\t<div class=\"mpa-times-container\">\n\t\t\t\t<div class=\"mpa-times  mpa-two-columns\"><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<p class=\"mpa-actions mpa-hide\">\n\t\t<button type=\"button\" class=\"button button-secondary mpa-button-back\">Back<\/button>\t\t<button type=\"button\" class=\"button button-primary mpa-button-next\">Next<\/button>\t<\/p>\n\n\t<div class=\"mpa-loading\"><\/div>\n<\/div>\n<div class=\"mpa-booking-step mpa-booking-step-cart mpa-hide\">\n\t<p class=\"mpa-shortcode-title\">\n\t\tYour Reservation\t<\/p>\n\n\t<div class=\"mpa-cart\">\n\t\t<div class=\"mpa-cart-items\">\n\t\t\t<div class=\"mpa-cart-item mpa-cart-item-template\">\n\t\t\t\t<div class=\"item-header\">\n\t\t\t\t\t<div class=\"cell cell-service\">\n\t\t\t\t\t\t<span class=\"cell-value mpa-service-name\">{service_name}<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cell cell-date\">\n\t\t\t\t\t\t<div class=\"cell-value\">\n\t\t\t\t\t\t\t<span class=\"mpa-reservation-date\">{reservation_date}<\/span> &middot; <span class=\"mpa-reservation-time\">{reservation_time}<\/span>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"item-body\">\n\t\t\t\t\t<div class=\"cell cell-location\">\n\t\t\t\t\t\t<p class=\"cell-title\">\n\t\t\t\t\t\tLocation\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<span class=\"cell-value mpa-location-name\">{location_name}<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cell cell-people\">\n\t\t\t\t\t\t<p class=\"cell-title mpa-capacity-label\">Clients<\/p>\n\t\t\t\t\t\t<div class=\"cell-value mpa-reservation-capacity\">{reservation_capacity}<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cell cell-employee\">\n\t\t\t\t\t\t<p class=\"cell-title\">\n\t\t\t\t\t\tEmployee\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<span class=\"cell-value mpa-employee-name\">{employee_name}<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cell cell-price\">\n\t\t\t\t\t\t<p class=\"cell-title\">Price<\/p>\n\t\t\t\t\t\t<span class=\"cell-value mpa-reservation-price\">{reservation_price}<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"item-footer\">\n\t\t\t\t\t<div class=\"cell cell-actions\">\n\t\t\t\t\t\t<button type=\"button\" class=\"button button-secondary mpa-button-edit-or-remove\">Edit<\/button>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"no-items\">\n\t\t\t\tYour cart is empty.\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<p class=\"mpa-cart-total\">\n\t\tTotal: <span class=\"mpa-cart-total-price\"><span class=\"mpa-price\"><span class=\"mpa-currency\">&euro;<\/span>0<\/span><\/span>\t<\/p>\n\n\t<p class=\"mpa-actions mpa-hide\">\n\t\t\n\t\t<button type=\"button\" class=\"button button-primary mpa-button-next\">Next<\/button>\t<\/p>\n<\/div>\n<div class=\"mpa-booking-step mpa-booking-step-checkout mpa-hide\">\n\t<form class=\"mpa-checkout-form\" method=\"POST\" action=\"\">\n\t\t<section class=\"mpa-customer-details mpa-checkout-section\">\n\t\t\t<p class=\"mpa-shortcode-title\">\n\t\t\t\tYour Information\t\t\t<\/p>\n\n\t\t\t<p class=\"mpa-required-tip\">\n\t\t\t\t<small>Required fields are followed by <strong><abbr title=\"Required\">*<\/abbr><\/strong>.<\/small>\t\t\t<\/p>\n\n\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-customer-name-wrapper\">\n\t\t\t\t\t<label for=\"mpa-customer-name-6a27891566270\">Name&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><input name=\"name\" id=\"mpa-customer-name-6a27891566270\" class=\"mpa-customer-name\" type=\"text\" required=\"required\" \/>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-customer-email-wrapper\">\n\t\t\t\t\t<label for=\"mpa-customer-email-6a27891566270\">Email&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><input name=\"email\" id=\"mpa-customer-email-6a27891566270\" class=\"mpa-customer-email\" type=\"email\" required=\"required\" \/>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-customer-phone-wrapper\">\n\t\t\t\t\t<label for=\"mpa-customer-phone-6a27891566270\">Phone&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><input name=\"phone\" id=\"mpa-customer-phone-6a27891566270\" class=\"mpa-customer-phone\" type=\"tel\" required=\"required\" autocomplete=\"on\" \/>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-date_of_birth-control\">\n\t\t\t\t\t<label for=\"mpa-customer-date-of-birth-6a27891566270\">Date of Birth&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><input hidden name=\"date-of-birth\" id=\"mpa-customer-date-of-birth-6a27891566270\" class=\"mpa-customer-date-of-birth mpa-dob-holder-control-component\" type=\"date_of_birth\" \/><select name=\"date-of-birth[day]\" id=\"date-of-birth-day-6a27891566270\" required=\"required\" class=\"mpa-control-component mpa-day-control-component\"><option value=\"\" selected='selected'>Day<\/option><option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option><option value=\"4\">4<\/option><option value=\"5\">5<\/option><option value=\"6\">6<\/option><option value=\"7\">7<\/option><option value=\"8\">8<\/option><option value=\"9\">9<\/option><option value=\"10\">10<\/option><option value=\"11\">11<\/option><option value=\"12\">12<\/option><option value=\"13\">13<\/option><option value=\"14\">14<\/option><option value=\"15\">15<\/option><option value=\"16\">16<\/option><option value=\"17\">17<\/option><option value=\"18\">18<\/option><option value=\"19\">19<\/option><option value=\"20\">20<\/option><option value=\"21\">21<\/option><option value=\"22\">22<\/option><option value=\"23\">23<\/option><option value=\"24\">24<\/option><option value=\"25\">25<\/option><option value=\"26\">26<\/option><option value=\"27\">27<\/option><option value=\"28\">28<\/option><option value=\"29\">29<\/option><option value=\"30\">30<\/option><option value=\"31\">31<\/option><\/select>&nbsp;<select name=\"date-of-birth[month]\" id=\"date-of-birth-month-6a27891566270\" required=\"required\" class=\"mpa-control-component mpa-month-control-component\"><option value=\"\" selected='selected'>Month<\/option><option value=\"1\">January<\/option><option value=\"2\">February<\/option><option value=\"3\">March<\/option><option value=\"4\">April<\/option><option value=\"5\">May<\/option><option value=\"6\">June<\/option><option value=\"7\">July<\/option><option value=\"8\">August<\/option><option value=\"9\">September<\/option><option value=\"10\">October<\/option><option value=\"11\">November<\/option><option value=\"12\">December<\/option><\/select>&nbsp;<select name=\"date-of-birth[year]\" id=\"date-of-birth-year-6a27891566270\" required=\"required\" class=\"mpa-control-component mpa-year-control-component\"><option value=\"\" selected='selected'>Year<\/option><option value=\"2026\">2026<\/option><option value=\"2025\">2025<\/option><option value=\"2024\">2024<\/option><option value=\"2023\">2023<\/option><option value=\"2022\">2022<\/option><option value=\"2021\">2021<\/option><option value=\"2020\">2020<\/option><option value=\"2019\">2019<\/option><option value=\"2018\">2018<\/option><option value=\"2017\">2017<\/option><option value=\"2016\">2016<\/option><option value=\"2015\">2015<\/option><option value=\"2014\">2014<\/option><option value=\"2013\">2013<\/option><option value=\"2012\">2012<\/option><option value=\"2011\">2011<\/option><option value=\"2010\">2010<\/option><option value=\"2009\">2009<\/option><option value=\"2008\">2008<\/option><option value=\"2007\">2007<\/option><option value=\"2006\">2006<\/option><option value=\"2005\">2005<\/option><option value=\"2004\">2004<\/option><option value=\"2003\">2003<\/option><option value=\"2002\">2002<\/option><option value=\"2001\">2001<\/option><option value=\"2000\">2000<\/option><option value=\"1999\">1999<\/option><option value=\"1998\">1998<\/option><option value=\"1997\">1997<\/option><option value=\"1996\">1996<\/option><option value=\"1995\">1995<\/option><option value=\"1994\">1994<\/option><option value=\"1993\">1993<\/option><option value=\"1992\">1992<\/option><option value=\"1991\">1991<\/option><option value=\"1990\">1990<\/option><option value=\"1989\">1989<\/option><option value=\"1988\">1988<\/option><option value=\"1987\">1987<\/option><option value=\"1986\">1986<\/option><option value=\"1985\">1985<\/option><option value=\"1984\">1984<\/option><option value=\"1983\">1983<\/option><option value=\"1982\">1982<\/option><option value=\"1981\">1981<\/option><option value=\"1980\">1980<\/option><option value=\"1979\">1979<\/option><option value=\"1978\">1978<\/option><option value=\"1977\">1977<\/option><option value=\"1976\">1976<\/option><option value=\"1975\">1975<\/option><option value=\"1974\">1974<\/option><option value=\"1973\">1973<\/option><option value=\"1972\">1972<\/option><option value=\"1971\">1971<\/option><option value=\"1970\">1970<\/option><option value=\"1969\">1969<\/option><option value=\"1968\">1968<\/option><option value=\"1967\">1967<\/option><option value=\"1966\">1966<\/option><option value=\"1965\">1965<\/option><option value=\"1964\">1964<\/option><option value=\"1963\">1963<\/option><option value=\"1962\">1962<\/option><option value=\"1961\">1961<\/option><option value=\"1960\">1960<\/option><option value=\"1959\">1959<\/option><option value=\"1958\">1958<\/option><option value=\"1957\">1957<\/option><option value=\"1956\">1956<\/option><option value=\"1955\">1955<\/option><option value=\"1954\">1954<\/option><option value=\"1953\">1953<\/option><option value=\"1952\">1952<\/option><option value=\"1951\">1951<\/option><option value=\"1950\">1950<\/option><option value=\"1949\">1949<\/option><option value=\"1948\">1948<\/option><option value=\"1947\">1947<\/option><option value=\"1946\">1946<\/option><option value=\"1945\">1945<\/option><option value=\"1944\">1944<\/option><option value=\"1943\">1943<\/option><option value=\"1942\">1942<\/option><option value=\"1941\">1941<\/option><option value=\"1940\">1940<\/option><option value=\"1939\">1939<\/option><option value=\"1938\">1938<\/option><option value=\"1937\">1937<\/option><option value=\"1936\">1936<\/option><option value=\"1935\">1935<\/option><option value=\"1934\">1934<\/option><option value=\"1933\">1933<\/option><option value=\"1932\">1932<\/option><option value=\"1931\">1931<\/option><option value=\"1930\">1930<\/option><option value=\"1929\">1929<\/option><option value=\"1928\">1928<\/option><option value=\"1927\">1927<\/option><option value=\"1926\">1926<\/option><\/select>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-select-control\">\n\t\t\t\t\t<label for=\"mpa-customer-skill-level-6a27891566270\">Skill Level&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><select name=\"skill-level\" id=\"mpa-customer-skill-level-6a27891566270\" class=\"mpa-customer-skill-level\" type=\"select\" required=\"required\"><option value=\"\" selected='selected'>&#8211; choose level &#8211;<\/option><option value=\"level-1\">Level 1<\/option><option value=\"level-2\">Level 2<\/option><option value=\"level-3\">Level 3<\/option><\/select>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-text-control\">\n\t\t\t\t\t<label for=\"mpa-customer-emergency-contact-information-6a27891566270\">Emergency Contact Information&nbsp;<abbr title=\"Required\">*<\/abbr><\/label><br \/><input name=\"emergency-contact-information\" id=\"mpa-customer-emergency-contact-information-6a27891566270\" class=\"mpa-customer-emergency-contact-information\" type=\"text\" required=\"required\" \/>\t\t\t\t<\/p>\n\t\t\t\t \n\t\t\t\t<p class=\"mpa-input-wrapper mpa-customer-notes-wrapper\">\n\t\t\t\t\t<label for=\"mpa-customer-notes-6a27891566270\">Notes<\/label><br \/><textarea name=\"notes\" id=\"mpa-customer-notes-6a27891566270\" class=\"mpa-customer-notes\" type=\"textarea\" rows=\"4\"><\/textarea>\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t        <\/section>\n\n        <section class=\"mpa-checkout-section mpa-order-details\">\n\t<p class=\"mpa-shortcode-title\">\n\t\tYour Order\t<\/p>\n\n\t<div class=\"mpa-order\"><\/div>\n<\/section>\n\n\t\t\t\t\t\t\t\n\t\t<p class=\"mpa-actions\">\n\t\t\t<button type=\"button\" class=\"button button-secondary mpa-button-back\">Back<\/button>\t\t\t<button type=\"submit\" class=\"button button-primary mpa-button-next\" disabled=\"disabled\">Reserve<\/button>\t\t<\/p>\n\t<\/form>\n<\/div>\n<div class=\"mpa-booking-step mpa-booking-step-payment mpa-hide\">\n\t<form class=\"mpa-checkout-form\" method=\"POST\" action=\"\">\n\t\t\n\t\t\n\t\t<section class=\"mpa-billing-details mpa-checkout-section\">\n\t\t\t<p class=\"mpa-shortcode-title mpa-payment-gateways-title\">\n\t\t\t\tPayment Method\t\t\t<\/p>\n\n\t\t\t\t\t\t\t<p class=\"mpa-no-payment-gateways\">\n\t\t\t\t\tSorry, it seems that there are no available payment methods.\t\t\t\t<\/p>\n\t\t\t\t\t<\/section>\n\n\t\t\n        <p class=\"mpa-message mpa-error mpa-hide\"><\/p>\n\n\t\t<p class=\"mpa-actions\">\n\t\t\t<button type=\"button\" class=\"button button-secondary mpa-button-back\">Back<\/button>\t\t\t<button type=\"submit\" class=\"button button-primary mpa-button-next\" disabled=\"disabled\">Reserve<\/button>\t\t<\/p>\n\t<\/form>\n\n\t<div class=\"mpa-loading\"><\/div>\n<\/div>\n<div class=\"mpa-booking-step mpa-booking-step-booking mpa-hide\">\n    <p class=\"mpa-message\">\n\t\tMaking a reservation&#8230;        <span class=\"mpa-preloader\"><\/span>\n    <\/p>\n\n\t\t\t<div class=\"mpa-booking-details mpa-hide\">\n    <div class=\"mpa-booking-details-section booking-reservations\">\n        <div class=\"reservation\">\n            <div class=\"mpa-booking-details-section-row\">\n                <span class=\"cell reservation-title value\"><\/span>\n                <div class=\"cell reservation-full-date value\">\n                    <span class=\"reservation-date\"><\/span> &middot; <span class=\"reservation-time\"><\/span>                <\/div>\n            <\/div>\n\n            <div class=\"reservation-calendar-links mpa-booking-details-section-row\">\n                <span class=\"cell label\">Add to your calendar: <\/span>\n                <div class=\"cell value\">\n                    <a href=\"#\" target=\"_blank\" class=\"mpa-add-to-calendar-link mpa-add-to-calendar-link--google\"\n                        title=\"Google\"><span class=\"mpa-add-to-calendar-link-text\">Google<\/span><\/a>,\n                    <a href=\"#\" target=\"_self\" class=\"mpa-add-to-calendar-link mpa-add-to-calendar-link--apple\"\n                        download=\"cal.ics\" title=\"Apple\"><span class=\"mpa-add-to-calendar-link-text\">Apple<\/span><\/a>,\n                    <a href=\"#\" target=\"_self\" class=\"mpa-add-to-calendar-link mpa-add-to-calendar-link--outlook\"\n                        download=\"cal.ics\" title=\"Outlook\"><span class=\"mpa-add-to-calendar-link-text\">Outlook<\/span><\/a>,\n                    <a href=\"#\" target=\"_blank\" class=\"mpa-add-to-calendar-link mpa-add-to-calendar-link--yahoo\"\n                        title=\"Yahoo!\"><span class=\"mpa-add-to-calendar-link-text\">Yahoo!<\/span><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\t<\/div>\t\n    <p class=\"mpa-actions mpa-hide\">\n\t\t<button type=\"button\" class=\"button button-secondary mpa-button-back\">Back<\/button>\t\t<button type=\"button\" class=\"button button-primary mpa-button-reset\">Add New Reservation<\/button>    <\/p>\n<\/div>\n\n<p class=\"mpa-message mpa-error mpa-hide\"><\/p>\n\n<div class=\"mpa-loading\"><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This demo showcases the ability to use custom checkout fields.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/pages\/14"}],"collection":[{"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":4,"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/pages\/14\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/appointment.getmotopress.com\/demo-checkout-fields\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}