{"id":7283,"date":"2019-02-28T09:49:29","date_gmt":"2019-02-28T09:49:29","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=7283"},"modified":"2024-05-21T11:18:43","modified_gmt":"2024-05-21T11:18:43","slug":"how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/","title":{"rendered":"How to Use Select, Checkbox, and Radio Fields"},"content":{"rendered":"\n

Select<\/strong>, Checkboxes<\/strong>, and Radio <\/strong>form fields are almost the same and have similar settings. All of them allow the user to select an option from the offered variants. JetEngine <\/em>Forms <\/strong>functionality allows you to add them to any of your forms and customize them according to your needs. This tutorial will show you how to create Select<\/strong>, Checkboxes<\/strong>, and Radio <\/strong>fields in the form and change their settings according to the purposes of your website.<\/p>\n\n\n\n

The Difference between Select, Checkboxes, and Radio fields<\/h2>\n\n\n\n
\n\"diference\n\n\n\n
    \n
  • The Select <\/strong>field offers the user a drop-down list that opens after clicking on the field. The user can choose a single option from it. This type of field is perfect when the list of variants is big, and you don\u2019t want to make the form messy and too long;<\/li>\n\n\n\n
  • The Checkboxes <\/strong>field adds a list of options with square-shaped checkboxes near them. The user can choose several variants from the list;<\/li>\n\n\n\n
  • The Radio <\/strong>field creates a list of several options with circle-shaped boxes near each of them. The user can select only one of the offered variants.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n

    Select, Checkboxes, and Radio fields Settings<\/h2>\n\n\n\n
    \n

    So, you\u2019ve created a form, added a new field by clicking the \u201cAdd Field<\/strong>\u201d button, and chose either the \u201cSelect\u201d, \u201cCheckboxes\u201d, or \u201cRadio\u201d option in the Type <\/strong>drop-down menu. The settings will be almost the same, so let\u2019s take the Radio <\/strong>field as an example. <\/p>\n\n\n\n\"radio\n\n\n\n

      \n
    • Name<\/strong>. This a slug or an ID of the field, you will need it to mark the field if you would like to use its values further;<\/li>\n\n\n\n
    • Label<\/strong>. Here you can type in the text that will be shown over the options list;<\/li>\n\n\n\n
    • Description<\/strong>. If you want to give the users some explanations about what to place to the field, provide them in this text area and they will be shown below the Label<\/strong>;<\/li>\n\n\n\n
    • Required<\/strong>. If you will tick this checkbox, the user won\u2019t be able to submit the form without filling this field;<\/li>\n\n\n\n
    • Fill Options From<\/strong>. Here you can choose how the field will be filled. Below you will be able to read about it in more details;<\/li>\n\n\n\n
    • Switch page on change<\/strong>. If you tick this checkbox, the page of the form will be switched when the user selects an option in this field;<\/li>\n\n\n\n
    • Default<\/strong>. If you want one of the options to be chosen by default, you can mention it in this bar;<\/li>\n\n\n\n
    • Add Prev Page Button<\/strong>. By ticking this checkbox, you add a \u201cPrevious Page<\/strong>\u201d button to the form right after this field. Of course, it will appear only if the previous page exists;<\/li>\n\n\n\n
    • Field Visibility<\/strong>. In this drop-down menu, you can select who will be able to see this field \u2013 all users, only those who are logged in or those who aren\u2019t;<\/li>\n\n\n\n
    • Custom CSS Class<\/strong>. You can put some CSS coding here if you need it.<\/li>\n<\/ul>\n\n\n\n

      Field input options<\/h3>\n\n\n\n

      In the Field Options From<\/strong> drop-down menu, you can choose the source of the field values for the Select, Radio, or Checkboxes fields.<\/p>\n\n\n\n

      Manual Input<\/strong>. If you choose this variant, you will have to add the options manually. After you click the \u201cAdd Option<\/strong>\u201d button, a new row appears. There are three columns in every row that you have to fill. The Value <\/strong>is data that will be used if you would like to use the values of this field. The Label <\/strong>is the name of the option that will be shown to the user. If you add the Calculated <\/strong>value, it will be used in the calculated field. All those values can differ.<\/p>\n\n\n\n\"manual\n\n\n\n

      Posts<\/strong>. In this case, the data from the posts will be used to create the options list. <\/p>\n\n\n\n

        \n
      • Post type. <\/strong>In this drop-down menu, you can choose the post type, either the default or custom type, created with the help of JetEngine;<\/li>\n\n\n\n
      • Value from meta field<\/strong>. If you leave this bar empty, the IDs of the posts will be used to create the options list. Or, you can type in the name of the meta field to take the values from;<\/li>\n\n\n\n
      • Calculated value from meta field<\/strong>. The values of the meta field you mention here will be used in the Calculated field formulas;<\/li>\n\n\n\n
      • Custom item template<\/strong>. Tick this checkbox and choose the listing from the drop-down menu if you want the options to be shown in a specific way, defined by the listing template.<\/li>\n<\/ul>\n\n\n\n\"posts\n\n\n\n

        Terms<\/strong>. Use this option if you want to use the data from terms\u2019 meta fields to create a list of options. All the settings are the same as the ones in the Posts <\/strong>option.<\/p>\n\n\n\n\"terms\n\n\n\n

        Meta Field<\/strong>. In this case, you can also use the data from the meta field to create a list of options. You type in the name of the meta field to the Meta field to get value from <\/strong>bar. Be aware that only the meta fields of the post where you plan to locate the form can be used.<\/p>\n\n\n\n\"meta\n\n\n\n

        Generate Dynamically<\/strong>. If you choose this variant, the options list will be generated dynamically according to the function you set in the Generator Function<\/strong> drop-down menu. It could be either the number range or values from the database, JetEngine field options, or Options Page. In the Field Name<\/strong> bar, you can set the max number of the range or set the name of the database or meta field. The other settings are similar to the ones in the Posts <\/strong>and Terms <\/strong>options.<\/p>\n\n\n\n\"generate\n\n\n\n

        When you are done with all the settings, don\u2019t forget to press the \u201cApply Changes<\/strong>\u201d button to save the customizations.<\/p>\n<\/div><\/div>\n\n\n\n

        Now that you know everything about Select, Checkboxes, and Radio field settings, you will be able to create and use them as you please. <\/p>\n","protected":false},"excerpt":{"rendered":"

        From this tutorial, you will learn how to create and use Select, Radio, and Checkboxes fields in the forms using JetEngine Form functionality.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[403],"yoast_head":"\nHow to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-21T11:18:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/select-radio-ceck-example-2x.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/\",\"name\":\"How to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-02-28T09:49:29+00:00\",\"dateModified\":\"2024-05-21T11:18:43+00:00\",\"description\":\"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Select, Checkbox, and Radio Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock","description":"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock","og_description":"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/","og_site_name":"Help Center","article_modified_time":"2024-05-21T11:18:43+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/select-radio-ceck-example-2x.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/","name":"How to Set Up Select, Checkbox and Radio Fields \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-02-28T09:49:29+00:00","dateModified":"2024-05-21T11:18:43+00:00","description":"Explore the options of JetEngine Form widget for Elementor and learn how to create fields of Select, Checkbox and Radio types.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-select-checkbox-and-radio-fields-in-the-booking-form-using-the-manual-input-fill-type\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use Select, Checkbox, and Radio Fields"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/7283"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=7283"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=7283"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=7283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}