{"id":3228,"date":"2022-08-10T19:23:05","date_gmt":"2022-08-10T19:23:05","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/?p=3228"},"modified":"2023-04-05T14:31:00","modified_gmt":"2023-04-05T14:31:00","slug":"how-to-create-and-show-a-search-form-in-your-site","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/","title":{"rendered":"How to create and show a search form in your site"},"content":{"rendered":"\n

<\/p>\n\n\n\n

After you enable the \u201cSearch Forms\u201d module in Modules, you will find the Search forms subtab inside the plugin\u2019s Configuration tab. The plugin allows you to create unlimited search forms to help users quickly find the stay (or any other bookable product) that best meets their needs. Let\u2019s review the steps to set up and manage the search forms.\u00a0<\/p>\n\n\n\n

    \n
  1. First, you need to go to YITH > Booking and Appointment > Configuration > Search form:<\/li>\n<\/ol>\n\n\n
    \n
    \"Search<\/a><\/figure><\/div>\n\n\n
    <\/div>\n\n\n\n
      \n
    1. To create the first one, click on the \u201cCreate search form\u201d button:<\/li>\n<\/ol>\n\n\n
      \n
      \"Create<\/a><\/figure><\/div>\n\n\n
      <\/div>\n\n\n\n
        \n
      1. This will open a new page to configure the form. Here you can enter a name, enable\/disable the fields you want to display and configure them, and customize the layout and style:<\/li>\n<\/ol>\n\n\n
        \n
        \"Fields<\/a><\/figure><\/div>\n\n\n
        <\/div>\n\n\n
        \n
        \"Layout<\/a><\/figure><\/div>\n\n\n
        <\/div>\n\n\n\n
          \n
        1. Now, let\u2019s see in detail each field available. First, there is a ‘Search’ field you can enable to show a default search field inside the form and set a label for it:<\/li>\n<\/ol>\n\n\n
          \n
          \"Search<\/a><\/figure><\/div>\n\n\n
          <\/div>\n\n\n\n
            \n
          1. Next, if you have enabled the \u201cGoogle Maps\u201d module, there is a ‘Location’ field where you can add the default distance and decide to show\/hide the distance range:<\/li>\n<\/ol>\n\n\n
            \n
            \"Location<\/a><\/figure><\/div>\n\n\n
            <\/div>\n\n\n\n
              \n
            1. Also, you will find a ‘Categories’ and a ‘Tags’ field to allow users to search on categories and search on tags (only visible if you have created tags). For the categories, you can set which ones to show on YITH > Booking and Appointment > Settings > General Settings:<\/li>\n<\/ol>\n\n\n
              \n
              \"Categories<\/a><\/figure><\/div>\n\n\n
              <\/div>\n\n\n
              \n
              \"Settings<\/a><\/figure><\/div>\n\n\n
              <\/div>\n\n\n\n
                \n
              1. Another field you can include is ‘Dates’ which has two different alternatives, either Show 2 different date pickers<\/em> (two different lines to select the start and end date – calendars are shown in a dropdown) or Show date range picker selector<\/em> (one line to select the start and end date -calendar is shown in a dropdown):<\/li>\n<\/ol>\n\n\n
                \n
                \"Dates<\/a><\/figure><\/div>\n\n\n
                <\/div>\n\n\n\n
                  \n
                1. Next, if you have enabled the \u201cPeople\u201d module, you can show a ‘People’ field and decide how to display it. The options available are People field<\/em> (to insert the number of guests regardless of the people type), People type field<\/em> (to insert the number of guests by people type) and People selector field<\/em> (to select the number of guests by people type):<\/li>\n<\/ol>\n\n\n
                  \n
                  \"People<\/a><\/figure><\/div>\n\n\n
                  <\/div>\n\n\n\n
                    \n
                  1. Finally, if you have enabled the \u201cServices\u201d module, you can show a ‘Services’ field and decide how to display it. The options available are Show services as checkboxes<\/em> (show the services you provide with an option to select them) and Show service selector <\/em>(show the services you provide in a dropdown, with the option to select them – recommended when you have a long list of services):<\/li>\n<\/ol>\n\n\n
                    \n
                    \"Services<\/a><\/figure><\/div>\n\n\n
                    <\/div>\n\n\n\n
                      \n
                    1. Besides the fields, there are additional options to customize the form. First, you can choose the layout, either vertical or horizontal, and choose how to show the results, in a popup or in the shop page:<\/li>\n<\/ol>\n\n\n
                      \n
                      \"Options<\/a><\/figure><\/div>\n\n\n
                      <\/div>\n\n\n\n
                        \n
                      1. Next, you can customize the search form and the search button colors:<\/li>\n<\/ol>\n\n\n
                        \n
                        \"Search<\/a><\/figure><\/div>\n\n\n
                        <\/div>\n\n\n\n
                          \n
                        1. Lastly, you can set the search button border radius:<\/li>\n<\/ol>\n\n\n
                          \n
                          \"Search<\/a><\/figure><\/div>\n\n\n
                          <\/div>\n\n\n\n
                            \n
                          1. Once the search form has been created and saved, a shortcode will be generated to allow you to show the form on any page of your choice, using the Gutenberg block or the widget, or the created shortcode if your theme uses a custom builder, like Avada.<\/li>\n<\/ol>\n\n\n
                            \n
                            \"Search<\/a><\/figure><\/div>\n\n\n
                            <\/div>\n\n\n\n
                              \n
                            1. Let\u2019s review how to add the form using Gutenberg. First, choose the page where you want to show the search form and open the edit page. Once inside, add a new block, select ‘shortcode’, and paste the shortcode generated for your form. After saving the changes, the form will be displayed on the frontend according to the settings configured:<\/li>\n<\/ol>\n\n\n
                              \n
                              \"Add<\/a><\/figure><\/div>\n\n\n
                              <\/div>\n\n\n
                              \n
                              \"Insert<\/a><\/figure><\/div>\n\n\n
                              <\/div>\n\n\n\n
                                \n
                              1. Another option to show the search form is using the ‘Booking search form’ widget. In this case, from the page edit, you can select a specific sidebar to display the form:<\/li>\n<\/ol>\n\n\n
                                \n
                                \"Select<\/a><\/figure><\/div>\n\n\n
                                <\/div>\n\n\n\n
                                  \n
                                1. Then, you need to go to your WordPress dashboard > Appearance > Widgets, open the sidebar you have selected to show on the page, and insert the widget:<\/li>\n<\/ol>\n\n\n
                                  \n
                                  \"Booking<\/a><\/figure><\/div>\n\n\n
                                  <\/div>\n\n\n\n
                                    \n
                                  1. Now, you can set a title and select the search form to show:<\/li>\n<\/ol>\n\n\n
                                    \n
                                    \"Configure<\/a><\/figure><\/div>\n\n\n
                                    <\/div>\n\n\n\n
                                      \n
                                    1. Finally, let\u2019s see an example of a search form added using Gutenberg with 2 different layouts, vertical (1) and horizontal (2):<\/li>\n<\/ol>\n\n\n\n

                                      (1)<\/p>\n\n\n

                                      \n
                                      \"Vertical<\/a><\/figure><\/div>\n\n\n
                                      <\/div>\n\n\n\n

                                      (2)<\/p>\n\n\n

                                      \n
                                      \"Horizontal<\/a><\/figure><\/div>\n\n\n

                                      <\/p>\n","protected":false},"excerpt":{"rendered":"

                                      After you enable the \u201cSearch Forms\u201d module in Modules, you will find the Search forms subtab inside the plugin\u2019s Configuration tab. The plugin allows you to create unlimited search forms to help users quickly find the stay (or any other bookable product) that best meets their needs. Let\u2019s review the steps to set up and … Continue reading How to create and show a search form in your site<\/span><\/a><\/p>\n","protected":false},"author":36,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,34],"tags":[],"class_list":["post-3228","post","type-post","status-publish","format-standard","hentry","category-general","category-how-to"],"yoast_head":"\nYITH Booking and Appointment: How to create and show a search form in your site<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"YITH Booking and Appointment: How to create and show a search form in your site\" \/>\n<meta property=\"og:description\" content=\"After you enable the \u201cSearch Forms\u201d module in Modules, you will find the Search forms subtab inside the plugin\u2019s Configuration tab. The plugin allows you to create unlimited search forms to help users quickly find the stay (or any other bookable product) that best meets their needs. Let\u2019s review the steps to set up and … Continue reading How to create and show a search form in your site\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/\" \/>\n<meta property=\"og:site_name\" content=\"YITH WooCommerce Booking and Appointment\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-10T19:23:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-05T14:31:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms-1024x373.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/\",\"name\":\"YITH Booking and Appointment: How to create and show a search form in your site\",\"isPartOf\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms-1024x373.png\",\"datePublished\":\"2022-08-10T19:23:05+00:00\",\"dateModified\":\"2023-04-05T14:31:00+00:00\",\"author\":{\"@id\":\"\"},\"breadcrumb\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms.png\",\"contentUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms.png\",\"width\":2484,\"height\":906},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create and show a search form in your site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/#website\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/\",\"name\":\"YITH WooCommerce Booking and Appointment\",\"description\":\"Plugin documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/author\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"YITH Booking and Appointment: How to create and show a search form in your site","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"YITH Booking and Appointment: How to create and show a search form in your site","og_description":"After you enable the \u201cSearch Forms\u201d module in Modules, you will find the Search forms subtab inside the plugin\u2019s Configuration tab. The plugin allows you to create unlimited search forms to help users quickly find the stay (or any other bookable product) that best meets their needs. Let\u2019s review the steps to set up and … Continue reading How to create and show a search form in your site","og_url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/","og_site_name":"YITH WooCommerce Booking and Appointment","article_published_time":"2022-08-10T19:23:05+00:00","article_modified_time":"2023-04-05T14:31:00+00:00","og_image":[{"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms-1024x373.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/","name":"YITH Booking and Appointment: How to create and show a search form in your site","isPartOf":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/#website"},"primaryImageOfPage":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage"},"image":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage"},"thumbnailUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms-1024x373.png","datePublished":"2022-08-10T19:23:05+00:00","dateModified":"2023-04-05T14:31:00+00:00","author":{"@id":""},"breadcrumb":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#primaryimage","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms.png","contentUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-content\/uploads\/sites\/294\/2023\/04\/forms.png","width":2484,"height":906},{"@type":"BreadcrumbList","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/how-to\/how-to-create-and-show-a-search-form-in-your-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/"},{"@type":"ListItem","position":2,"name":"How to create and show a search form in your site"}]},{"@type":"WebSite","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/#website","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/","name":"YITH WooCommerce Booking and Appointment","description":"Plugin documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/posts\/3228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/comments?post=3228"}],"version-history":[{"count":8,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/posts\/3228\/revisions"}],"predecessor-version":[{"id":4122,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/posts\/3228\/revisions\/4122"}],"wp:attachment":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/media?parent=3228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/categories?post=3228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-booking\/wp-json\/wp\/v2\/tags?post=3228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}