{"id":23953,"date":"2024-07-01T16:59:52","date_gmt":"2024-07-01T10:59:52","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=23953"},"modified":"2024-07-01T16:59:52","modified_gmt":"2024-07-01T10:59:52","password":"","slug":"drag-and-drop-file-upload-of-cf7-extensions","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/drag-and-drop-file-upload-of-cf7-extensions\/","title":{"rendered":"Drag and Drop File Upload of CF7 Extensions"},"content":{"rendered":"\n<p>&#8220;<strong>Extensions for CF7<\/strong>&#8221; allows users to add a drag-and-drop file upload field to their contact forms. With this feature, you can add an option for your visitors to upload a file or an attachment via drag and drop.<\/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=\"How to Enable Drag and Drop File Upload in Contact Form 7 | CF7 Tutorial Part: 6\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/18HwQaht75s?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 &#8220;Drag and Drop File Upload&#8221; Extension<\/h2>\n\n\n\n<p>To enable the &#8220;<strong>Drag and Drop File Upload<\/strong>&#8221; extension, go to your dashboard and navigate to the &#8220;<strong>HT CF7 Extension<\/strong>&#8221; menu.<\/p>\n\n\n\n<p>Afterward, open the tab called &#8220;<strong>Extensions<\/strong>&#8220;. There you will find a switcher option to enable the &#8220;<strong>Drag and Drop File Upload<\/strong>&#8221; extension.<\/p>\n\n\n\n<p>If you need a drag-and-drop file upload field in your contact form, turn the switcher on 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=\"386\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop-1024x386.png\" alt=\"\" class=\"wp-image-23955\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop-1024x386.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop-300x113.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop-768x289.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop-360x136.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/enable-drag-and-drop.png 1526w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Enable Drag-and-drop File Upload Extension<\/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\">The \u201cHT Drag and Drop File\u201d Option displayed on the Form<\/h2>\n\n\n\n<p>After enabling the extension, when you create or edit a contact form on your website, you will notice a new tag named &#8220;<strong>HT Drag and Drop File<\/strong>&#8220;. Now, you can insert the tag anywhere on your contact form. It will include a drag-and-drop file upload field over there.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-1024x492.png\" alt=\"\" class=\"wp-image-23956\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-1024x492.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-300x144.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-768x369.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-1536x738.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag-360x173.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-and-drop-tag.png 1604w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>HT Drag and Drop File Displayed<\/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\">Introducing the options to configure the &#8220;HT Drag and Drop File&#8221; tag<\/h2>\n\n\n\n<p>When you click the &#8220;<strong>HT Drag and Drop File<\/strong>&#8221; tag, a popup will appear where you can set up the necessary options before adding a drag-and-drop file upload field.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop-1024x531.png\" alt=\"\" class=\"wp-image-23959\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop-1024x531.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop-300x156.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop-768x399.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop-360x187.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/popup-options-of-drag-drop.png 1453w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>HT Drag and Drop File Options<\/strong><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Field Type<\/strong>: This option allows you to choose whether visitors are required to fill out the field.<\/li>\n\n\n\n<li><strong>Name<\/strong>: Set a unique name for the field.<\/li>\n\n\n\n<li><strong>File size limit (bytes)<\/strong>: Set a limit for the file size in bytes.<\/li>\n\n\n\n<li><strong>Acceptable File Types<\/strong>: Specify the file types\/extensions that your contact form will accept. Please be sure to separate the file types\/extensions by using a pipe ( | ) sign. For instance, .zip|.txt|.png<\/li>\n\n\n\n<li><strong>Maximum File Upload<\/strong>: Limit the number of files that a user can upload while submitting the form.<\/li>\n\n\n\n<li><strong>ID Attribute<\/strong>: If you want to add an ID attribute to the field, insert a unique ID.<\/li>\n\n\n\n<li><strong>Class Attribute<\/strong>: If you want to add a class attribute to the field, insert a class name.<\/li>\n<\/ul>\n\n\n\n<p>Finally, click &#8220;<strong>Insert Tag<\/strong>&#8221; to include the field in the form.<\/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 Inserting the &#8220;HT Drag and Drop File&#8221; tag<\/h2>\n\n\n\n<p>After configuring the tag, it will appear like the following in the form.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-1024x492.png\" alt=\"\" class=\"wp-image-23960\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-1024x492.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-300x144.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-768x369.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-1536x739.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag-360x173.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/after-insert-drag-drop-tag.png 1601w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>After Inserting The Tag<\/strong><\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">After completing the setup of the Drag and Drop File Extension<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2024\/02\/drag-drop.mp4\"><\/video><\/figure>\n\n\n\n<p>As you can you here you can upload files that you allow to the Acceptable File Types filed. So user are not able to upload unnecessary file.<\/p>\n\n\n\n<p>When you visit the front-end of your website, you'll see that a new upload field has been added to your contact form. With this field, your visitors can easily upload files based on prior configuration.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Extensions for CF7&#8221; allows users to add a drag-and-drop file upload field to their contact forms. With this feature, you can add an option for your visitors to upload a file or an attachment via drag and drop. Enable The &#8220;Drag and Drop File Upload&#8221; Extension To enable the &#8220;Drag and Drop File Upload&#8221; extension, [&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-23953","docs","type-docs","status-publish","hentry","doc_category-cf7-extensions"],"acf":[],"year_month":"2025-11","word_count":466,"total_views":"1104","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":"&#8220;Extensions for CF7&#8221; allows users to add a drag-and-drop file upload field to their contact forms. With this feature, you can add an option for your visitors to upload a file or an attachment via drag and drop. Enable The &#8220;Drag and Drop File Upload&#8221; Extension To enable the &#8220;Drag and Drop File Upload&#8221; extension,&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23953","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=23953"}],"version-history":[{"count":15,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23953\/revisions"}],"predecessor-version":[{"id":27343,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/23953\/revisions\/27343"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=23953"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=23953"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=23953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}