{"id":33351,"date":"2025-08-18T14:48:50","date_gmt":"2025-08-18T08:48:50","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=33351"},"modified":"2025-08-24T14:42:33","modified_gmt":"2025-08-24T08:42:33","password":"","slug":"how-to-use-the-radio-field-in-ht-contact-form","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-use-the-radio-field-in-ht-contact-form\/","title":{"rendered":"How to Use the Radio Field in HT Contact Form"},"content":{"rendered":"\n<p>The <strong>Radio Field<\/strong> lets users select a single option from a predefined list. This is useful for yes\/no questions, surveys, where only one response is allowed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Add the Radio Field to Your Form<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>HT Contact Form &gt; Forms<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Edit<\/strong> on the form you want to update or create a new one.<\/li>\n\n\n\n<li>From the field list on the left, click on <strong>Radio<\/strong> or drag it into your form builder area.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-1024x565.png\" alt=\"\" class=\"wp-image-33355\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-1024x565.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-300x165.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-768x424.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-1536x847.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field-360x199.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-field.png 1597w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Configure the Radio Field Settings<\/h2>\n\n\n\n<p>Once added, click the radio field in your form to open the <strong>Field Settings<\/strong> on the right.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Admin Label<\/strong>: Internal name for managing the form field (not visible to users).<\/li>\n\n\n\n<li><strong>Field Label<\/strong>: This is the label that appears on the front end.<\/li>\n\n\n\n<li><strong>Label Position<\/strong>: Choose where the label appears (Default, Top, Left, Right, etc.).<\/li>\n\n\n\n<li><strong>Hide Label<\/strong>: Toggle ON if you don\u2019t want to show the field label on the frontend.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"636\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1-1024x636.png\" alt=\"\" class=\"wp-image-33357\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1-1024x636.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1-300x186.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1-768x477.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1-360x224.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings1.png 1430w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Set Radio Options<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>Options<\/strong> section, type each choice and assign a unique value.<\/li>\n\n\n\n<li>Click <strong>Add Option<\/strong> to insert more options.<\/li>\n\n\n\n<li>Use the trash icon to delete any unwanted choices.<\/li>\n<\/ul>\n\n\n\n<p>For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First Option \u2192 <code>first_option<\/code><\/li>\n\n\n\n<li>Second Option \u2192 <code>second_option<\/code><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2-1024x635.png\" alt=\"\" class=\"wp-image-33358\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2-1024x635.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2-300x186.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2-768x476.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2-360x223.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings2.png 1434w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Adjust Layout & Design<\/h2>\n\n\n\n<p>You can customize how the field looks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout<\/strong>: One Column, Two Columns, etc.<\/li>\n\n\n\n<li><strong>Required<\/strong>: Enable if the field must be filled out.<\/li>\n\n\n\n<li><strong>Field Size<\/strong>: Choose from Small, Medium, or Large.<\/li>\n\n\n\n<li><strong>Field Class<\/strong>: Add a custom CSS class if needed.<\/li>\n\n\n\n<li><strong>Help Message<\/strong>: Add a note to guide users.<\/li>\n\n\n\n<li><strong>Message Position<\/strong>: Choose where the help message appears.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3-1024x640.png\" alt=\"\" class=\"wp-image-33359\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3-1024x640.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3-300x187.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3-768x480.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3-360x225.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings3.png 1431w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Configure Conditional Logic (Optional)<\/h2>\n\n\n\n<p>To show\/hide this field based on user input:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Toggle <strong>Enable Condition<\/strong> to ON.<\/li>\n\n\n\n<li>Choose <strong>All<\/strong> or <strong>Any<\/strong> under <strong>Conditional Match<\/strong>.<\/li>\n\n\n\n<li>Set your condition by selecting:\n<ul class=\"wp-block-list\">\n<li>A field (e.g., Name, Email, Job Title, etc.)<\/li>\n\n\n\n<li>A logic type (equal to, not equal to, greater than, etc.)<\/li>\n\n\n\n<li>A value (e.g., <code>john<\/code>, <code>017...<\/code>, etc.)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Example Condition:<\/strong><br>Show this radio field only if the <strong>Name<\/strong> equals \u201cAlex\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"636\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4-1024x636.png\" alt=\"\" class=\"wp-image-33360\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4-1024x636.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4-300x186.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4-768x477.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4-360x224.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-settings4.png 1436w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Save Your Form<\/h2>\n\n\n\n<p>After making all adjustments, click the <strong>Save Form<\/strong> button at the top-right to publish your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes-1024x640.png\" alt=\"\" class=\"wp-image-33361\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes-1024x640.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes-300x187.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes-768x480.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes-360x225.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-radio-filed-save-changes.png 1428w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Radio Field lets users select a single option from a predefined list. This is useful for yes\/no questions, surveys, where only one response is allowed. Step 1: Add the Radio Field to Your Form Step 2: Configure the Radio Field Settings Once added, click the radio field in your form to open the Field [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"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":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"doc_category":[259],"doc_tag":[],"class_list":["post-33351","docs","type-docs","status-publish","hentry","doc_category-ht-contact-forms"],"acf":[],"year_month":"2025-11","word_count":342,"total_views":"186","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Saidul","author_nicename":"saidul","author_url":"https:\/\/hasthemes.com\/author\/saidul\/"},"doc_category_info":[{"term_name":"HT Contact Forms","term_url":"https:\/\/hasthemes.com\/docs-category\/ht-contact-forms\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Saidul","author_link":"https:\/\/hasthemes.com\/author\/saidul\/"},"uagb_comment_info":0,"uagb_excerpt":"The Radio Field lets users select a single option from a predefined list. This is useful for yes\/no questions, surveys, where only one response is allowed. Step 1: Add the Radio Field to Your Form Step 2: Configure the Radio Field Settings Once added, click the radio field in your form to open the Field&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=33351"}],"version-history":[{"count":9,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33351\/revisions"}],"predecessor-version":[{"id":33544,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33351\/revisions\/33544"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=33351"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=33351"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=33351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}