{"id":44216,"date":"2022-10-03T09:43:11","date_gmt":"2022-10-03T09:43:11","guid":{"rendered":"https:\/\/www.123formbuilder.com\/docs\/?p=44216"},"modified":"2025-02-19T11:19:01","modified_gmt":"2025-02-19T11:19:01","slug":"button-like-choices","status":"publish","type":"post","link":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/","title":{"rendered":"Button-like choices"},"content":{"rendered":"\n<p>We know it&#8217;s important for you to have an interactive and easy-to-fill-out form, so we have one of the coolest features: <b>Button-like choices<\/b>.<\/p>\n\n\n\n<p>For any <b>Single<\/b> or <b>Multiple choice<\/b> field, you can customize the choices to look like clickable buttons as easily as 123!<\/p>\n\n\n\n<p>By default, any <b>Single<\/b> or <b>Multiple choice<\/b> field will have this option enabled, but you can always disable it if you don\u2019t feel this layout fits your form. All you have to do is to go to <b>Layout \u2192 Type <\/b>and select the <b>Text<\/b> layout type. If you&#8217;ll be adding images to your choices, then the Layout type will switch to <b>Card<\/b>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png\" alt=\"Layout type button\" class=\"wp-image-49702\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-300x136.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-768x348.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1536x696.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout.png 1905w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>To give your choices a true button-like feel, disable the<b> Show selector<\/b> toggle to remove the radio buttons or checkboxes from your options. When the selector is removed, your buttons will inherit the properties from the\u00a0<b>Design \u2192 Fields \u2192 Field hover &amp; Field focus<\/b>\u00a0sections.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/FieldProperties.png\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"791\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/FieldProperties.png\" alt=\"\" class=\"wp-image-49704\" style=\"width:237px;height:auto\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/FieldProperties.png 360w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/FieldProperties-137x300.png 137w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can also change the number of columns. Below the <b>Layout<\/b> types, you can find the <b>No. of columns<\/b> dropdown where you decide how you want to display your choices: under 1\/2\/3\/4 columns.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns-1024x469.png\" alt=\"Number of columns\" class=\"wp-image-49705\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns-1024x469.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns-300x137.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns-768x352.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns-1536x703.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/DisplayColumns.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<p><b>Related articles<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.123formbuilder.com\/docs\/how-to-use-images-as-options-in-a-checkbox-field\/\">Images as options in choice fields<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.123formbuilder.com\/docs\/make-choices-as-clickable-buttons\/\">Make choices as clickable buttons<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We know it&#8217;s important for you to have an interactive and easy-to-fill-out form, so we have one of the coolest features: Button-like choices. For any Single or Multiple choice field, you can customize the choices to look like clickable buttons as easily as 123! By default, any Single or Multiple choice field will have this [&hellip;]<\/p>\n","protected":false},"author":96,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[530,527,406,526,528,412,326,529],"class_list":["post-44216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formeditor","tag-alignment","tag-button-like-choices","tag-choices","tag-form-editor","tag-horizontal","tag-multiple-choice","tag-single-choice","tag-vertical"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Button-like choices - 123FormBuilder Knowledge Base<\/title>\n<meta name=\"description\" content=\"We know it&#039;s important to have an interactive form, so we have one of the coolest features - button-like choices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button-like choices\" \/>\n<meta property=\"og:description\" content=\"We know it&#039;s important to have an interactive form, so we have one of the coolest features - button-like choices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-03T09:43:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-19T11:19:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1905\" \/>\n\t<meta property=\"og:image:height\" content=\"863\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adriana Muntean\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adriana Muntean\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Button-like choices - 123FormBuilder Knowledge Base","description":"We know it's important to have an interactive form, so we have one of the coolest features - button-like choices.","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:\/\/www.123formbuilder.com\/docs\/button-like-choices\/","og_locale":"en_US","og_type":"article","og_title":"Button-like choices","og_description":"We know it's important to have an interactive form, so we have one of the coolest features - button-like choices.","og_url":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2022-10-03T09:43:11+00:00","article_modified_time":"2025-02-19T11:19:01+00:00","og_image":[{"width":1905,"height":863,"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout.png","type":"image\/png"}],"author":"Adriana Muntean","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Adriana Muntean","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#article","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/"},"author":{"name":"Adriana Muntean","@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294"},"headline":"Button-like choices","datePublished":"2022-10-03T09:43:11+00:00","dateModified":"2025-02-19T11:19:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/"},"wordCount":198,"commentCount":2,"image":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png","keywords":["alignment","button-like choices","choices","form editor","horizontal","multiple choice","single choice","vertical"],"articleSection":["Form Editor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/","url":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/","name":"Button-like choices - 123FormBuilder Knowledge Base","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#primaryimage"},"image":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png","datePublished":"2022-10-03T09:43:11+00:00","dateModified":"2025-02-19T11:19:01+00:00","author":{"@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294"},"description":"We know it's important to have an interactive form, so we have one of the coolest features - button-like choices.","breadcrumb":{"@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/ButtonLayout-1024x464.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.123formbuilder.com\/docs\/button-like-choices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.123formbuilder.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Button-like choices"}]},{"@type":"WebSite","@id":"https:\/\/www.123formbuilder.com\/docs\/#website","url":"https:\/\/www.123formbuilder.com\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.123formbuilder.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.123formbuilder.com\/docs\/#\/schema\/person\/4dcefcf132999728e04a78e4b0482294","name":"Adriana Muntean","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/577d902d5caa75f14ef569e8ffc87b97c2c7ddcbcca368be19af03f3ae48840b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAdriana%2BMuntean%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Adriana Muntean"},"url":"https:\/\/www.123formbuilder.com\/docs\/author\/adrianamuntean\/"}]}},"_links":{"self":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/44216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/users\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/comments?post=44216"}],"version-history":[{"count":9,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/44216\/revisions"}],"predecessor-version":[{"id":49708,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/posts\/44216\/revisions\/49708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/media?parent=44216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/categories?post=44216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/docs\/wp-json\/wp\/v2\/tags?post=44216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}