{"id":23883,"date":"2024-07-01T17:00:44","date_gmt":"2024-07-01T11:00:44","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=23883"},"modified":"2024-07-01T17:00:44","modified_gmt":"2024-07-01T11:00:44","password":"","slug":"popup-form-response-of-cf7-extensions","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/popup-form-response-of-cf7-extensions\/","title":{"rendered":"Set Popup Form Response"},"content":{"rendered":"\n<p>Configure the popup form response to show a message to your users in an interactive popup. It will inform users whether their form submissions are successful or not.<\/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=\"Message Popup For Contact Form 7 | Contact Form 7 Popup Response | CF7 Tutorial Part: 7\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/24nhCbCEBuw?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 Popup Form Response Extensions<\/h2>\n\n\n\n<p>To enable the &#8220;<strong>Popup Form Response<\/strong>&#8221; extension, first, visit the &#8220;<strong>HT CF7 Extension<\/strong>&#8221; menu from your WordPress dashboard.<\/p>\n\n\n\n<p>Then open the &#8220;<strong>Extensions<\/strong>&#8221; tab, and you will notice an option to turn on the &#8220;<strong>Popup Form Response<\/strong>&#8221; extension.<\/p>\n\n\n\n<p>All you have to do is turn on the switcher to enable the extension and save the settings.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"391\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response-1024x391.png\" alt=\"\" class=\"wp-image-23885\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response-1024x391.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response-300x114.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response-768x293.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response-360x137.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-popup-response.png 1520w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Enable Popup Form Response Extensions<\/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\">Configure the Popup Response on the form.<\/h2>\n\n\n\n<p>In this step, you will learn how to activate the popup response in a particular contact form.<\/p>\n\n\n\n<p>First, open the contact form where you want to enable the popup response. Once you open the form, it will take you to the edit screen.<\/p>\n\n\n\n<p>There will be a new tab named &#8220;<strong>HT Popup Settings<\/strong>&#8220;, where you can enable the popup for your form.<\/p>\n\n\n\n<p>You can also choose what type of popup messages will appear once a user submits the form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-1024x383.png\" alt=\"\" class=\"wp-image-23886\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-1024x383.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-300x112.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-768x287.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-1536x575.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings-360x135.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/ht-popup-settings.png 1619w\" 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\">Enable the popup message settings.<\/h2>\n\n\n\n<p>After you enable the settings for success or error popup message, some necessary options will appear. You can leverage these options to configure the settings for the popup messages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"691\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-1024x691.png\" alt=\"\" class=\"wp-image-23887\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-1024x691.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-300x202.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-768x518.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-1536x1036.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it-360x243.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-to-configure-it.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">General Settings<\/h3>\n\n\n\n<p>General settings include the following options that enable you to configure some primary popup settings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Popup Text:<\/strong> Insert a text or message you want to display in the popup.<\/li>\n\n\n\n<li><strong>Button Text:<\/strong> Insert a text for the popup button.<\/li>\n\n\n\n<li><strong>Auto Hide After:<\/strong> Set a specific time duration after which the popup message will automatically disappear. e.g. 1000 = 1 sec.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Style Settings<\/h3>\n\n\n\n<p>When it comes to customizing the popup appearance, the options from the Style settings come into play.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Popup Width:<\/strong> Set a popup width in pixels or a percentage. You can also keep the width to &#8220;Auto&#8221;. e.g. 500px \/ 50% \/ Auto<\/li>\n\n\n\n<li><strong>Popup Border Radius: <\/strong>Add a border radius to your popup in pixels if you want to create rounded corners around the popup border. e.g. 5px<\/li>\n\n\n\n<li><strong>Popup Border Color:<\/strong> Set a border color for the popup.<\/li>\n\n\n\n<li><strong>Popup Text Color: <\/strong>Control the text color of the popup message.<\/li>\n\n\n\n<li><strong>Popup Background Color:<\/strong> If you need to design a popup with a particular background color, you can choose a popup background color.<\/li>\n\n\n\n<li><strong>Button Background Color:<\/strong> Set a background color for the button that closes your popup.<\/li>\n\n\n\n<li><strong>Button Text Color<\/strong>: Set a color for the close button text of your popup.<\/li>\n<\/ul>\n\n\n\n<p>After configuring the settings above, please make sure to save the changes.<\/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 you finish setting up the Popup Form Response Extension<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/03\/popup-form.mp4\"><\/video><\/figure>\n\n\n\n<p>After the popup form response extension added on the form then you can see the a popup message after submission the form. If you setup both Success and Error Message then you have seen it when form submission is successful you have seen a success popup or if your submission is not successful you can see a error popup.<\/p>\n\n\n\n<p>Once you are done configuring the &#8220;<strong>Popup Form Response<\/strong>&#8221; extension for any of the contact forms, a popup message will appear after submitting the form.<\/p>\n\n\n\n<p>If you set up both success and error messages for the popup, a popup message will be displayed when a user submits the form. A success message will appear for successful submissions, and an error message will appear for failed ones.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Configure the popup form response to show a message to your users in an interactive popup. It will inform users whether their form submissions are successful or not. Enable The Popup Form Response Extensions To enable the &#8220;Popup Form Response&#8221; extension, first, visit the &#8220;HT CF7 Extension&#8221; menu from your WordPress dashboard. Then open the [&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-23883","docs","type-docs","status-publish","hentry","doc_category-cf7-extensions"],"acf":[],"year_month":"2025-11","word_count":567,"total_views":"1010","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":"Configure the popup form response to show a message to your users in an interactive popup. It will inform users whether their form submissions are successful or not. Enable The Popup Form Response Extensions To enable the &#8220;Popup Form Response&#8221; extension, first, visit the &#8220;HT CF7 Extension&#8221; menu from your WordPress dashboard. Then open the&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23883","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=23883"}],"version-history":[{"count":27,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23883\/revisions"}],"predecessor-version":[{"id":27357,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23883\/revisions\/27357"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=23883"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=23883"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=23883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}