{"id":23742,"date":"2024-06-30T16:23:57","date_gmt":"2024-06-30T10:23:57","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=23742"},"modified":"2024-11-13T15:44:07","modified_gmt":"2024-11-13T09:44:07","password":"","slug":"conditional-field-of-cf7-extensions","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/conditional-field-of-cf7-extensions\/","title":{"rendered":"Conditional Field of CF7 Extensions"},"content":{"rendered":"\n<p>The &#8220;Conditional Field&#8221; extension is really handy when it comes to adding various conditions to your contact forms. For example, you can set a condition to display the email address field only when a user inserts a value in the name field.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Contact form 7 Conditional Fields Tutorial | CF7 Conditional Fields | CF7 Tutorial Part: 1\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/aSnj3465MTU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Enable The Conditional Field Extensions<\/h2>\n\n\n\n<p>Like any other extensions, enabling the &#8220;Conditional Field&#8221; extension is a breeze. To do so, here's what you need to do:<\/p>\n\n\n\n<p>First, visit the dashboard of your website and navigate to the &#8220;HT CF7 Extension&#8221; menu.<\/p>\n\n\n\n<p>You can find the option to enable the &#8220;Conditional Field&#8221; extension in the &#8220;Extensions&#8221; tab. Once you click the gear icon of the extension, it will show a popup including an option panel to configure the extension.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field-1024x638.png\" alt=\"\" class=\"wp-image-23743\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field-1024x638.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field-300x187.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field-768x479.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field-360x224.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-conditional-field.png 1503w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Enable Conditional Field<\/strong><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable \/ Disable<\/strong>: Turning on the option to enable the &#8220;Conditional Field&#8221; extension will unlock the option to apply conditions to your contact forms.<\/li>\n\n\n\n<li><strong>Conditional UI Mode<\/strong>: Set your preferred mode for Conditional UI. Available options are &#8220;Default&#8221; and &#8220;Text&#8221;.<\/li>\n\n\n\n<li><strong>Animation<\/strong>: Enable the &#8220;Animation&#8221; option to display an animation when a conditional field is shown and hidden.<\/li>\n\n\n\n<li><strong>Animation In Time:<\/strong> Set how long to show an animation when a conditional field appears (in milliseconds). Default value: 250<\/li>\n\n\n\n<li><strong>Animation Out Time<\/strong>: Set how long to show an animation when a conditional field disappears (in milliseconds). Default value: 250<\/li>\n<\/ul>\n\n\n\n<p>Once you are done configuring the settings for the &#8220;<strong>Conditional Field<\/strong>&#8220;, save the settings.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">&#8220;HT Conditional Fields&#8221; Option displayed on the form<\/h2>\n\n\n\n<p>After enabling the &#8220;<strong>Conditional Field<\/strong>&#8221; extension, you can see a new tag called &#8220;<strong>HT Conditional Fields<\/strong>&#8221; added to the edit screen of each form. Now, all you need to do is insert the tag where you want to add a conditional field.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-1024x470.png\" alt=\"\" class=\"wp-image-24311\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-1024x470.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-300x138.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-768x353.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-1536x706.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-1170x536.png 1170w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu-360x165.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field-tag-menu.png 1602w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>HT Conditional Fields Tag<\/strong><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Introduction to &#8220;HT Conditional Fields&#8221; options.<\/h2>\n\n\n\n<p>Let's see how to include a conditional field in a contact form.<\/p>\n\n\n\n<p>First, click on the &#8220;<strong>HT Conditional Fields<\/strong>&#8221; tag. It will open a popup with a few options to configure the field settings before adding it to the form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-1024x475.png\" alt=\"\" class=\"wp-image-24312\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-1024x475.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-300x139.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-768x356.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-1536x713.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup-360x167.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-tag-popup.png 1618w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>HT Conditional Fields <strong>Options<\/strong><\/strong><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Name<\/strong>: Set a unique name for the conditional field.<\/li>\n\n\n\n<li><strong>Clear field on hide<\/strong>: If you check the &#8220;<strong>Clear field on hide<\/strong>&#8221; checkbox, any data you previously entered into a conditional field will be erased once the field disappears. If you don't want this, leave the checkbox unchecked, and your data will remain intact for the conditional fields.<\/li>\n<\/ul>\n\n\n\n<p>After configuring the options,  click <strong>Insert Tag<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Setup a field as a Conditional Field.<\/h2>\n\n\n\n<p>In this section, you can learn how to make a field conditional. Let's see how it's done.<\/p>\n\n\n\n<p>First, choose the field that you want to use as a conditional field. Then, select the respective code for that particular field and put it under the conditional field tag.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-1024x467.png\" alt=\"\" class=\"wp-image-24313\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-1024x467.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-300x137.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-768x350.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-1536x700.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field-360x164.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/add-conditional-field.png 1603w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Apply the Condition<\/h2>\n\n\n\n<p>Now that you have set a field as conditional, the next step is to apply conditions to that field. To do so, open the &#8220;<strong>HT Conditional Fields Settings<\/strong>&#8221; and add conditions according to your requirements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-1024x399.png\" alt=\"\" class=\"wp-image-23749\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-1024x399.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-300x117.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-768x299.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-1536x599.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings-360x140.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/conditional-fields-settings.png 1621w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-ast-global-color-6-background-color has-background\">Note: If You use a single input checkbox field for a condition, then you have to fill the conditional value field with &#8220;checked&#8221;.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">After completing the setup of the Conditional Field Extension<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/conditional-field.mp4\"><\/video><\/figure>\n\n\n\n<p>As you can the email filed are hide, when name field is file up or add a value then the email field ( Conditional Field ) are appear.<\/p>\n\n\n\n<p>In the form shown in the screenshot above, the email address field is hidden, while the name field is visible. The email address field will appear when a user inserts any value into the name field.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;Conditional Field&#8221; extension is really handy when it comes to adding various conditions to your contact forms. For example, you can set a condition to display the email address field only when a user inserts a value in the name field. Enable The Conditional Field Extensions Like any other extensions, enabling the &#8220;Conditional Field&#8221; [&hellip;]<\/p>\n","protected":false},"author":17,"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":[253],"doc_tag":[],"class_list":["post-23742","docs","type-docs","status-publish","hentry","doc_category-cf7-extensions"],"acf":[],"year_month":"2025-11","word_count":594,"total_views":"1133","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Ashim Kumar","author_nicename":"ashim-ht","author_url":"https:\/\/hasthemes.com\/author\/ashim-ht\/"},"doc_category_info":[{"term_name":"CF7 Extensions","term_url":"https:\/\/hasthemes.com\/docs-category\/cf7-extensions\/"}],"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":"Ashim Kumar","author_link":"https:\/\/hasthemes.com\/author\/ashim-ht\/"},"uagb_comment_info":0,"uagb_excerpt":"The &#8220;Conditional Field&#8221; extension is really handy when it comes to adding various conditions to your contact forms. For example, you can set a condition to display the email address field only when a user inserts a value in the name field. Enable The Conditional Field Extensions Like any other extensions, enabling the &#8220;Conditional Field&#8221;&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23742","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\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=23742"}],"version-history":[{"count":27,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23742\/revisions"}],"predecessor-version":[{"id":29110,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23742\/revisions\/29110"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=23742"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=23742"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=23742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}