{"id":33380,"date":"2025-08-18T17:55:07","date_gmt":"2025-08-18T11:55:07","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=33380"},"modified":"2025-08-18T17:56:03","modified_gmt":"2025-08-18T11:56:03","password":"","slug":"how-to-use-the-custom-html-field-in-ht-contact-form","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-use-the-custom-html-field-in-ht-contact-form\/","title":{"rendered":"How to Use the Custom HTML Field in HT Contact Form"},"content":{"rendered":"\n<p>The Custom HTML field allows you to insert formatted content, headings, or instructional text directly within your form layout. It\u2019s ideal for organizing form sections, adding descriptions, or providing helpful guidance to users\u2014without requiring them to fill anything in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to Add the Custom HTML Field<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress dashboard and navigate to <strong>HT Contact Form > Forms<\/strong>.<\/li>\n\n\n\n<li>Open an existing form or create a new one.<\/li>\n\n\n\n<li>From the Fields panel on the left, drag and drop the <strong>Custom HTML<\/strong> field into your form.<\/li>\n\n\n\n<li>Click on the field to access its <strong>Field Settings<\/strong> on the right-hand side.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-1024x537.png\" alt=\"\" class=\"wp-image-33382\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-1024x537.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-300x157.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-768x402.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-1536x805.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable-360x189.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-filed-enable.png 1588w\" 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<h3 class=\"wp-block-heading\"><strong>Available Settings<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML Content<\/strong><br>Use the built-in rich text editor to add and format content. You can apply bold, italic, underlined text, add lists, insert links, or use headings (H1\u2013H4) to structure your message.<\/li>\n\n\n\n<li><strong>Field Class<\/strong><br>Add a custom CSS class to target this HTML block for additional styling.<\/li>\n\n\n\n<li><strong>Enable Condition<\/strong><br>Toggle ON to control when this HTML block is displayed using conditional logic.<\/li>\n\n\n\n<li><strong>Conditional Match<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>All<\/strong>: All defined conditions must be met to show the field.<\/li>\n\n\n\n<li><strong>Any<\/strong>: Only one condition must be met.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Conditional Rules<\/strong><br>Set rules by selecting a related form field, a comparison operator (e.g., <em>equal to<\/em>), and a value (e.g., <em>Developer<\/em>). The HTML content will only appear when the condition is fulfilled.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"594\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings-1024x594.png\" alt=\"\" class=\"wp-image-33383\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings-1024x594.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings-300x174.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings-768x445.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings-360x209.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-custom-html-settings.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<h3 class=\"wp-block-heading\"><strong>Example Use Case<\/strong><\/h3>\n\n\n\n<p>Use the Custom HTML field to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a section title like <strong>\u201cAbout Your Business\u201d<\/strong><\/li>\n\n\n\n<li>Insert a note such as <strong>\u201cThis section is optional\u201d<\/strong><\/li>\n\n\n\n<li>Display a message only when the user selects a specific value in a previous field<br>(e.g., show a reminder when Job Title = \u201cDeveloper\u201d)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Custom HTML field allows you to insert formatted content, headings, or instructional text directly within your form layout. It\u2019s ideal for organizing form sections, adding descriptions, or providing helpful guidance to users\u2014without requiring them to fill anything in. How to Add the Custom HTML Field Available Settings Example Use Case Use the Custom HTML [&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-33380","docs","type-docs","status-publish","hentry","doc_category-ht-contact-forms"],"acf":[],"year_month":"2025-11","word_count":264,"total_views":"179","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 Custom HTML field allows you to insert formatted content, headings, or instructional text directly within your form layout. It\u2019s ideal for organizing form sections, adding descriptions, or providing helpful guidance to users\u2014without requiring them to fill anything in. How to Add the Custom HTML Field Available Settings Example Use Case Use the Custom HTML&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33380","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=33380"}],"version-history":[{"count":2,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33380\/revisions"}],"predecessor-version":[{"id":33384,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33380\/revisions\/33384"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=33380"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=33380"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=33380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}