{"id":31883,"date":"2025-07-21T14:21:18","date_gmt":"2025-07-21T08:21:18","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=31883"},"modified":"2025-07-21T14:46:53","modified_gmt":"2025-07-21T08:46:53","password":"","slug":"shortcode-field-in-ht-contact-form","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/shortcode-field-in-ht-contact-form\/","title":{"rendered":"Shortcode Field in HT Contact Form"},"content":{"rendered":"\n<p>The <strong>Shortcode Field<\/strong> in HT Contact Form allows you to embed dynamic content directly into your form using WordPress shortcodes. Whether it's displaying WooCommerce products, Elementor sections, or custom blocks \u2014 this field offers powerful flexibility for advanced form layouts.<\/p>\n\n\n\n<p>Follow this guide to learn how to add, configure, and use the Shortcode Field effectively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Add the Shortcode Field to Your Form<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>HT Contact Form<\/strong> \u2192 <strong>Forms<\/strong> from your WordPress dashboard.<\/li>\n\n\n\n<li>Open an existing form or create a new one.<\/li>\n\n\n\n<li>In the <strong>left field panel<\/strong>, scroll down and drag <strong>Shortcode<\/strong> into your form layout.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode-1024x531.png\" alt=\"\" class=\"wp-image-31897\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode-1024x531.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode-300x156.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode-768x398.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode-360x187.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/add-shortcode.png 1533w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Configure the Shortcode Settings<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Once the field is added, you can input the shortcode you want to display.<\/li>\n\n\n\n<li><strong>Shortcode<\/strong>: Paste your shortcode here. Example: [products limit=&#8221;3&#8243; columns=&#8221;3&#8243;]<br>This shortcode will display 3 WooCommerce products in 3 columns.<\/li>\n\n\n\n<li><strong>Field Class<\/strong>: Optional. Add a custom CSS class to style the output.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1-1024x531.png\" alt=\"\" class=\"wp-image-31898\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1-1024x531.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1-300x156.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1-768x398.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1-360x187.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/filed-settings-1.png 1533w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Apply Conditional Logic (Optional)<\/h2>\n\n\n\n<p>You can choose to show the shortcode field only when specific conditions are met.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Enable Condition<\/strong>: Toggle ON to activate conditional display.<\/li>\n\n\n\n<li><strong>Conditional Match<\/strong>: Choose whether <strong>All<\/strong> or <strong>Any<\/strong> conditions must be met.<\/li>\n\n\n\n<li>Set rules using form field values (e.g., show shortcode only if the user's name is &#8220;john&#8221; or &#8220;alex&#8221;).<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-1024x425.png\" alt=\"\" class=\"wp-image-31904\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-1024x425.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-300x125.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-768x319.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-1536x638.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1-360x150.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/enable-condition-logic-1.png 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Preview<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"764\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/preview-1.png\" alt=\"\" class=\"wp-image-31906\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/preview-1.png 791w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/preview-1-300x290.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/preview-1-768x742.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/07\/preview-1-360x348.png 360w\" sizes=\"(max-width: 791px) 100vw, 791px\" \/><\/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\">Use Case Examples<\/h2>\n\n\n\n<p>Here are some real-world use cases where the shortcode field shines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Display WooCommerce products inside a contact or quote form.<\/li>\n\n\n\n<li>Embed Elementor sections or reusable blocks.<\/li>\n\n\n\n<li>Show blog posts using <code>[recent-posts]<\/code> shortcodes.<\/li>\n\n\n\n<li>Add sliders, galleries, or forms from third-party plugins.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Shortcode Field in HT Contact Form allows you to embed dynamic content directly into your form using WordPress shortcodes. Whether it&#8217;s displaying WooCommerce products, Elementor sections, or custom blocks \u2014 this field offers powerful flexibility for advanced form layouts. Follow this guide to learn how to add, configure, and use the Shortcode Field effectively. [&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-31883","docs","type-docs","status-publish","hentry","doc_category-ht-contact-forms"],"acf":[],"year_month":"2025-11","word_count":244,"total_views":"201","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 Shortcode Field in HT Contact Form allows you to embed dynamic content directly into your form using WordPress shortcodes. Whether it's displaying WooCommerce products, Elementor sections, or custom blocks \u2014 this field offers powerful flexibility for advanced form layouts. Follow this guide to learn how to add, configure, and use the Shortcode Field effectively.&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/31883","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=31883"}],"version-history":[{"count":13,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/31883\/revisions"}],"predecessor-version":[{"id":31920,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/31883\/revisions\/31920"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=31883"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=31883"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=31883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}