{"id":26897,"date":"2023-05-09T12:07:05","date_gmt":"2023-05-09T12:07:05","guid":{"rendered":"https:\/\/fluentforms.com\/?p=26897"},"modified":"2025-07-11T06:02:30","modified_gmt":"2025-07-11T06:02:30","slug":"fluent-forms-ui-update","status":"publish","type":"post","link":"https:\/\/fluentforms.com\/fluent-forms-ui-update\/","title":{"rendered":"Major changes in Fluent Forms UI Update &#8211; (Before\/After, UI &#038; UX)"},"content":{"rendered":"\n<p>Fluent Forms is the lightweight, yet powerful, and fastest form builder in the WordPress community. Our aim was to make it the most user-friendly tool at an affordable price. That\u2019s why Fluent Forms\u2019 free version is way more powerful than other form builders in the market. However, from 2018 to 2022 we focused on updating the features, and functionalities of the plugin, and by that time, we\u2019ve reached 300K active installations.<\/p>\n\n\n\n<p>Now, it\u2019s time to update the interface of the plugin to give our users a more eye-catching, and easy-to-navigate experience. In this post, I\u2019ll show you some comparisons of the before, and after UI of Fluent Forms. So that, you can easily understand the differences. So, let\u2019s see what we have for you!<\/p>\n\n\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id_1af70d-1c .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id_1af70d-1c .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_1af70d-1c .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id_1af70d-1c .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">New changes in Fluent Forms<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-1024x536.jpg\" alt=\"Fluent Forms UI update, update, WordPress, plugin\" class=\"wp-image-26939\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-1024x536.jpg 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-300x157.jpg 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-768x402.jpg 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-360x188.jpg 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1-1536x804.jpg 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/What-changes-weve-made-to-the-UI-1.jpg 1910w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Changes we made to Fluent Forms UI<\/em><\/figcaption><\/figure>\n\n\n\n<p>We didn\u2019t change the whole plugin interface completely but tried to improve the look of the tool to make it more convenient to use. I\u2019ll discuss some major parts below. Let\u2019s dive in!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Better user experience<\/h3>\n\n\n\n<p>Navigation is an important part of any tool to move from one place to another easily. In this update of Fluent Forms, we made it more easier to understand. For instance, earlier, we had smaller buttons, texts, and tabs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-1024x422.png\" alt=\"Forms, WordPress, plugin\" class=\"wp-image-26916\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-1024x422.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-300x124.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-768x316.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-360x148.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4-1536x633.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-4.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>But now, we\u2019ve made the buttons and tabs bigger, designed larger fonts, and had better eye-catching contrast to give the best user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-1024x498.png\" alt=\"Forms\" class=\"wp-image-26919\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-1024x498.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-300x146.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-768x373.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-360x175.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7-1536x747.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-7.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pre-built templates<\/h3>\n\n\n\n<p>Previously, we had a basic pre-built template interface. I won\u2019t say that wasn\u2019t beautiful, or hard to understand. But the interface of the <strong>Add a New Form<\/strong> button was a bit confusing with the dropped-down menu bar, where we added the conversational forms option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"410\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-1024x410.png\" alt=\"Add a New Form button, plugin\" class=\"wp-image-26912\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-1024x410.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-300x120.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-768x307.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-360x144.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image.png 1190w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Besides, all types of templates were in one place, where you had to find the suitable template as per your requirement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-1024x516.png\" alt=\"pre-built templates\" class=\"wp-image-26921\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-1024x516.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-300x151.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-768x387.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-360x181.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9-1536x774.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-9.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this update, we\u2019ve put different categories of templates in the first place.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-1024x371.png\" alt=\"New templates\" class=\"wp-image-26920\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-1024x371.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-300x109.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-768x278.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-360x130.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8-1536x556.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-8.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For example, if you click on the <strong>Choose a Template<\/strong> option, you\u2019ll get all the categories on the left sidebar to choose from.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-1024x580.png\" alt=\"Form templates\" class=\"wp-image-26923\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-1024x580.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-300x170.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-768x435.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-360x204.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11-1536x870.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-11.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When you\u2019ll tap on the different categories, you\u2019ll get the dedicated templates for that option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-1024x495.png\" alt=\"Form templates\" class=\"wp-image-26922\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-1024x495.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-300x145.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-768x372.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-360x174.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10-1536x743.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-10.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Form editor<\/h3>\n\n\n\n<p>After selecting a form template, you\u2019ll be driven to the form editor as always. Formerly, the editor was good-looking and understandable with the form fields on the right sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-1024x527.png\" alt=\"Form fields, Fluent Forms new editor\" class=\"wp-image-26928\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-1024x527.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-300x154.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-768x395.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-360x185.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16-1536x791.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-16.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, the editor looks fresher with some color contrast, larger buttons, and text. Besides, the fields also look defined and popped out to catch users\u2019 attention.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-1024x505.png\" alt=\"Fluent Forms editor, new editor\" class=\"wp-image-26926\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-1024x505.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-300x148.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-768x379.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-360x178.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14-1536x758.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-14.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fields section<\/h3>\n\n\n\n<p>Previously, we had three column fields part for each section, such as <strong>General Fields<\/strong>, <strong>Advanced Fields<\/strong>, <strong>Payment Fields<\/strong>, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"1024\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3-868x1024.png\" alt=\"Form fields, general fields\" class=\"wp-image-26915\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3-868x1024.png 868w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3-254x300.png 254w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3-768x906.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3-360x425.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-3.png 990w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/figure>\n\n\n\n<p>Now we put the fields into a two-column section and made the boxes larger. So, the section is striking more attention than before.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"1024\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM-838x1024.png\" alt=\"Fluent Forms, input fields, new UI\" class=\"wp-image-27634\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM-838x1024.png 838w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM-245x300.png 245w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM-768x939.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM-360x440.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-08-at-5.28.55-PM.png 972w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Form Style<\/h3>\n\n\n\n<p>Fluent Forms has a very amazing form style. We kept it simple, yet beautiful, and easy to understand. As a result, users can customize it on their own preferences.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-1024x613.png\" alt=\"form preview, fluent forms, plugin\" class=\"wp-image-26918\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-1024x613.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-300x180.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-768x460.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-360x215.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6-1536x919.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-6.png 1758w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the newest update of the tool, we made the form style more elegant. Added some tweaks to it to present it in a more appealing way.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-1024x682.png\" alt=\"UI &amp; UX, form responsiveness\" class=\"wp-image-27464\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-1024x682.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-300x200.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-768x512.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-360x240.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-1536x1023.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-1200x800.png 1200w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18-600x400.png 600w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-18.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Furthermore, earlier, we had an <strong>edit<\/strong> section and a <strong>preview<\/strong> option only at the top of the form preview option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-1024x390.png\" alt=\"WordPress, plugin\" class=\"wp-image-27465\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-1024x390.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-300x114.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-768x292.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-360x137.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19-1536x585.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-19.png 1818w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>But now, we brought the Settings &amp; Integrations option, and the <strong>Entries<\/strong> button at the top of the form preview section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"321\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-1024x321.png\" alt=\"Fluent Forms, WordPress, update\" class=\"wp-image-27466\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-1024x321.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-300x94.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-768x240.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-360x113.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20-1536x481.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-20.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>More so, we\u2019ve added different screen responsive buttons at the top right corner of the form. So, you can check how the form would look on different devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"370\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-1024x370.png\" alt=\"Fluent Forms, Update, UI &amp; UX\" class=\"wp-image-27463\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-1024x370.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-300x108.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-768x277.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-360x130.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17-1536x554.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-17.png 1574w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Global Styler section<\/h3>\n\n\n\n<p>As I said earlier, Fluent Forms is already rich in features and functionalities. You can give your form a modern, and updated look with the global styler, or custom CSS feature of the tool. Earlier, we had a basic interface for the settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5-1024x655.png\" alt=\"\" class=\"wp-image-26917\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5-1024x655.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5-300x192.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5-768x491.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5-360x230.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-5.png 1066w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, it\u2019s more attractive with some tweaks, and Twitch to the global styler editor. The settings panels are well-defined with a bordered area, and the fonts are designed to look more elegant.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2-1024x693.png\" alt=\"\" class=\"wp-image-26914\" width=\"780\" height=\"527\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2-1024x693.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2-300x203.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2-768x519.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2-360x243.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-2.png 1038w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n\n\n\n<p>More so, from now on, you can customize the preset of the default form template style by clicking on the <strong>Customize Selected Preset<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-1024x456.png\" alt=\"\" class=\"wp-image-28058\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-1024x456.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-300x133.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-768x342.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-360x160.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23-1536x683.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-23.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can also import any other form\u2019s template in a file format.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"442\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-1024x442.png\" alt=\"\" class=\"wp-image-28059\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-1024x442.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-300x129.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-768x332.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-360x155.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24-1536x663.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-24.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Settings &amp; Integrations part<\/h3>\n\n\n\n<p>The <strong>Settings &amp; Integrations<\/strong> section of the plugin was already loaded with tons of features to arrange your form in a more organized way and protect it from any kind of harm. But in the first part of it which is Form Settings, users had to scroll a lot to get each customization option. It looked something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-1024x502.png\" alt=\"\" class=\"wp-image-26925\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-1024x502.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-300x147.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-768x377.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-360x176.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13-1536x753.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-13.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you scroll down to the next part, the left sidebar option was lost, and every time you had to scroll up to get the main settings option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-1024x511.png\" alt=\"\" class=\"wp-image-26924\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-1024x511.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-300x150.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-768x383.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-360x179.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12-1536x766.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-12.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>But now, the problem is solved. All the sections are beautifully defined on the left sidebar, and one has to scroll only a bit if there need to make any changes to any specific part.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-1024x535.png\" alt=\"\" class=\"wp-image-26927\" srcset=\"https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-1024x535.png 1024w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-300x157.png 300w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-768x401.png 768w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-360x188.png 360w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15-1536x802.png 1536w, https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/image-15.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you&#8217;re already a Fluent Forms user, you can check the beta version of the new UI release. Please fill out the form below to join the beta testing team.<\/p>\n<\/blockquote>\n\n\n<style>.kb-row-layout-id_9bbf28-0a > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id_9bbf28-0a > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id_9bbf28-0a > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id_9bbf28-0a > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id_9bbf28-0a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id_9bbf28-0a > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id_9bbf28-0a alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column_cc3126-61 > .kt-inside-inner-col{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kadence-column_cc3126-61 > .kt-inside-inner-col,.kadence-column_cc3126-61 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_cc3126-61 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_cc3126-61 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_cc3126-61 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_cc3126-61 > .kt-inside-inner-col{background-color:#dae3fe;}.kadence-column_cc3126-61 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_cc3126-61{position:relative;}@media all and (max-width: 1024px){.kadence-column_cc3126-61 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_cc3126-61 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column_cc3126-61\"><div class=\"kt-inside-inner-col\"><div class='fluentform ff-default fluentform_wrapper_217  ff_guten_block ff_guten_block-217 ffs_custom_wrap'><form data-form_id=\"217\" id=\"fluentform_217\" class=\"frm-fluent-form fluent_form_217 ff-el-form-top ff_form_instance_217_1 ff-form-loading ffs_custom\" data-form_instance=\"ff_form_instance_217_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Fluent Forms UI Beta Request<\/legend>        <div\n                style=\"display: none!important; position: absolute!important; transform: translateX(1000%)!important;\"\n                class=\"ff-el-group ff-hpsf-container\"\n        >\n            <div class=\"ff-el-input--label asterisk-right\">\n                <label for=\"ff_217_item_sf\" aria-label=\"Notify\">\n                    Notify                <\/label>\n            <\/div>\n            <div class=\"ff-el-input--content\">\n                <input type=\"text\"\n                       name=\"item_217__fluent_sf\"\n                       class=\"ff-el-form-control\"\n                       id=\"ff_217_item_sf\"\n                \/>\n            <\/div>\n        <\/div>\n        <input type='hidden' name='__fluent_form_embded_post_id' value='26897' \/><input type=\"hidden\" id=\"_fluentform_217_fluentformnonce\" name=\"_fluentform_217_fluentformnonce\" value=\"39eaa1bfd1\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/wp-json\/wp\/v2\/posts\/26897\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group  ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_217_names_first_name_' id='label_ff_217_names_first_name_' >First Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_217_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"First Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group  ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_217_names_last_name_' id='label_ff_217_names_last_name_' >Last Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_217_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Last Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_217_email' id='label_ff_217_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_217_email\" class=\"ff-el-form-control\" placeholder=\"Email Address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><div class='ff-el-help-message ff-hidden'>Please use your wpmanageninja.com (if any) account email address<\/div><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-lg ff_btn_style wpf_has_custom_css\"  aria-label=\"Request Beta Access\">Request Beta Access<\/button><\/div><\/fieldset><\/form><div id='fluentform_217_errors' class='ff-errors-in-stack ff_form_instance_217_1 ff-form-loading_errors ff_form_instance_217_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_217_1 = {\"id\":\"217\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"helpMessagePlacement\":\"on_focus\",\"errorMessagePlacement\":\"inline\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_217_1\",\"form_id_selector\":\"fluentform_217\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\"},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\"}}},\"debounce_time\":300};\n                            <\/script>\n            <\/div><\/div>\n\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Upgrade soon!<\/h2>\n\n\n\n<p>With the latest framework of Fluent Forms, it\u2019s faster and smoother than before. The symmetric view of the tabs, and fields of the tool will make it more user-friendly.<\/p>\n\n\n\n<p>Now that you\u2019re going to get the new version of the plugin, get the beta tester of the plugin to experience it before the final release. And we\u2019ll release it, you\u2019ll get the final version immediately. If you&#8217;re not a Fluent Forms user, try the tool to get an amazing experience.<\/p>\n\n\n<style>.kadence-column16792_ffab46-25 > .kt-inside-inner-col,.kadence-column16792_ffab46-25 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16792_ffab46-25 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16792_ffab46-25 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16792_ffab46-25 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16792_ffab46-25 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16792_ffab46-25{position:relative;}.kadence-column16792_ffab46-25, .kt-inside-inner-col > .kadence-column16792_ffab46-25:not(.specificity){margin-bottom:35px;}@media all and (max-width: 1024px){.kadence-column16792_ffab46-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16792_ffab46-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}.kb-dynamic-html.kb-dynamic-html-id-31266_50dc67-18 a {    color: #ffffff;}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16792_ffab46-25\"><div class=\"kt-inside-inner-col\">\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-499968f5 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-fill\" style=\"font-size:18px\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/fluentforms.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Fluent Forms Pro<\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Fluent Forms is the lightweight, yet powerful, and fastest form builder in the WordPress community. Our aim was to make it the most user-friendly tool at an&#8230;<\/p>\n","protected":false},"author":4,"featured_media":27424,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[252],"tags":[],"class_list":["post-26897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-update"],"acf":[],"taxonomy_info":{"category":[{"value":252,"label":"Update"}]},"featured_image_src_large":["https:\/\/fluentforms.com\/wp-content\/uploads\/2023\/05\/Fluent-Forms_-Before-and-After-2-1024x536.jpg",1024,536,true],"author_info":{"display_name":"Prema Anjum","author_link":"https:\/\/fluentforms.com\/author\/prema\/"},"comment_info":0,"category_info":[{"term_id":252,"name":"Update","slug":"update","term_group":0,"term_taxonomy_id":252,"taxonomy":"category","description":"","parent":0,"count":41,"filter":"raw","cat_ID":252,"category_count":41,"category_description":"","cat_name":"Update","category_nicename":"update","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/posts\/26897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/comments?post=26897"}],"version-history":[{"count":0,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/posts\/26897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/media\/27424"}],"wp:attachment":[{"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/media?parent=26897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/categories?post=26897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentforms.com\/wp-json\/wp\/v2\/tags?post=26897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}