{"id":205778,"date":"2022-02-23T02:37:52","date_gmt":"2022-02-23T02:37:52","guid":{"rendered":"https:\/\/wpmudev.com\/blog\/?p=205778"},"modified":"2022-02-23T02:37:52","modified_gmt":"2022-02-23T02:37:52","slug":"global-appearance-presets-forminator","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/global-appearance-presets-forminator\/","title":{"rendered":"Use a Form\u2019s Style Everywhere (for Free!) with Forminator\u2019s Global Appearance Presets"},"content":{"rendered":"<p>Maintaining the same form styles and appearance across all of your forms has never been easier with Forminator\u2019s Global Appearance Presets.<\/p>\n<p>The look and style of a form you create with our free plugin, <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">Forminator<\/a>, can be replicated and used for all of your forms. Even change existing forms to your new style and appearance <em>with a click of a button!<\/em><\/p>\n<p>This article shows you how it\u2019s done. We\u2019ll be covering how to\u2026<\/p>\n<ul>\n<li><a href=\"#update\">Update the Default Preset<\/a><\/li>\n<li><a href=\"#create\">Create a New Preset<\/a><\/li>\n<li><a href=\"#apply\">Apply Your Preset to Multiple Forms in Bulk<\/a><\/li>\n<li><a href=\"#add\">Add Preset to Individual Form<\/a><\/li>\n<\/ul>\n<p>Using a form to your specification across multiple platforms is excellent for branding, saves you time, and helps manage your form creation as simple as possible.<\/p>\n<p>Let\u2019s get to it!<\/p>\n<h2 id=\"update\">Update the Default Preset<\/h2>\n<p>Forminator starts from scratch with its Default preset. Before we dive into making new presets, here\u2019s a look at how you can change the default settings.<\/p>\n<p>The whole process begins in <strong>Settings<\/strong> and <strong>Appearance Presets<\/strong>. You\u2019ll see at the top of the page an area called<strong> Preset<\/strong>.<\/p>\n<figure id=\"attachment_205785\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205785\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/preset.png\" alt=\"A look at the preset dropdown.\" width=\"600\" height=\"53\" \/><figcaption class=\"wp-caption-text\">This Preset dropdown is what shows up first.<\/figcaption><\/figure>\n<p>The preset design that pops up is Forminator\u2019s <strong>Default Preset<\/strong>.<\/p>\n<figure id=\"attachment_205786\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205786\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/default.png\" alt=\"The default design style\" width=\"600\" height=\"378\" \/><figcaption class=\"wp-caption-text\">This is the blank slate of style for your form.<\/figcaption><\/figure>\n<p>Underneath this, jazz things up for the default design. You have your choice of any <strong>Color, Hundreds of Fonts, Form Container, <\/strong>and even<strong> Custom CSS<\/strong>.<\/p>\n<p>Check out all of the configurations options in <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator\/#design-style\" target=\"_blank\" rel=\"noopener\">our documentation<\/a> and below\u2026<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Recording-2022-02-15-at-11.18.20-AM.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/Screen-Recording-2022-02-15-at-11.18.20-AM.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>There are a TON of configuration options.<\/small><\/p>\n<p>When you have it edited according to your configuration, hit <strong>Update<\/strong> \u2013 and that\u2019s it! We\u2019ll talk about how to apply it to all of your forms and more coming up in this article.<\/p>\n<h2 id=\"create\">Create a New Preset<\/h2>\n<p>Let\u2019s say you want to create a new preset and leave the default one alone. Or, you decide to change the default configuration and make a new configuration. Either way \u2013 it\u2019s simple to do!<\/p>\n<p>We\u2019ll head back to the banner on the top of the <strong>Settings<\/strong> and <strong>Appearance Presets<\/strong> web page<strong>. <\/strong>From there, it\u2019s just a matter of clicking on the plus sign for a <strong>New Preset.<\/strong><\/p>\n<figure id=\"attachment_205787\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205787\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/new-preset.png\" alt=\"Where you add a new preset.\" width=\"600\" height=\"160\" \/><figcaption class=\"wp-caption-text\">New Preset is a click away!<\/figcaption><\/figure>\n<p>You\u2019ll first give the form a <strong>Preset Name.<\/strong><\/p>\n<figure id=\"attachment_205788\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205788\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/create-preset.png\" alt=\"Where you create a preset.\" width=\"600\" height=\"411\" \/><figcaption class=\"wp-caption-text\">This window will appear after hitting New Preset.<\/figcaption><\/figure>\n<p>Additionally, you can import the style from an existing form that you created by clicking the <strong>Import Style From Form<\/strong> dropdown. It\u2019s up to you.<\/p>\n<figure id=\"attachment_205789\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205789\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/forms.png\" alt=\"List of created forms.\" width=\"600\" height=\"452\" \/><figcaption class=\"wp-caption-text\">All of my current forms are displayed.<\/figcaption><\/figure>\n<p>We\u2019ll create a new preset for this example and name it <em>Preset One<\/em>. Once named, you\u2019ll hit<strong> Create Preset<\/strong>.<\/p>\n<figure id=\"attachment_205790\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205790\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/preset-one.png\" alt=\"Where you create a preset.\" width=\"600\" height=\"452\" \/><figcaption class=\"wp-caption-text\">Name the preset anything you\u2019d like!<\/figcaption><\/figure>\n<p>After that, you\u2019ll see the new preset in the dropdown.<\/p>\n<figure id=\"attachment_205791\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205791\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/preset-dropdown.png\" alt=\"The preset dropdown.\" width=\"600\" height=\"331\" \/><figcaption class=\"wp-caption-text\">All of your presets will be shown here.<\/figcaption><\/figure>\n<p>And that\u2019s all it takes. If needed, you can access it at any time to edit.<\/p>\n<p>All of your presets will appear in the dropdown. You can create unlimited amounts of presets as you want!<\/p>\n<h2 id=\"apply\">Apply Your Preset to Multiple Forms in Bulk<\/h2>\n<p>There are several ways to apply a preset to multiple forms \u2013 either in bulk or individually. All of this is done from Forminator\u2019s dashboard under <strong>Forms<\/strong>.<\/p>\n<p>Let\u2019s say you want to apply a preset to ALL of your forms. That can be done in just a few clicks. Simply click the checkbox to the left of the dropdown, and click <strong>Apply Appearance Preset<\/strong>.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/bulk-edit.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/bulk-edit.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>This updates all of the forms at once.<\/small><\/p>\n<p>After choosing your bulk action, you\u2019ll select which preset you\u2019d like to apply. Select the one you\u2019ll use from the dropdown, click <strong>Apply Preset <\/strong>\u2013 and you&#8217;re done.<\/p>\n<figure id=\"attachment_205793\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205793\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/apply-preset-2.png\" alt=\"Where you choose a preset\" width=\"600\" height=\"417\" \/><figcaption class=\"wp-caption-text\">All the presets created will show in the dropdown.<\/figcaption><\/figure>\n<p>Additionally, you can check only certain forms to apply the appearance preset. The choice is yours!<\/p>\n<h2 id=\"add\">Add Preset to Individual Form<\/h2>\n<p>You can use the method I just touched on with bulk by checking the box to the form you want to change. However, there\u2019s another option.<\/p>\n<p>Each form has a <strong>Gear icon<\/strong>. When clicked, a dropdown appears of various functions (e.g. preview, duplicate, etc.). One of those options is<strong> Apply Preset<\/strong>.<\/p>\n<figure id=\"attachment_205794\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-205794\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2022\/02\/apply-preset.png\" alt=\"The gear icon\" width=\"600\" height=\"329\" \/><figcaption class=\"wp-caption-text\">All of your forms will have the gear icon.<\/figcaption><\/figure>\n<p>Just like with bulk presets, you\u2019ll choose which preset form you\u2019d like to apply. The preset will then be applied to that individual form.<\/p>\n<h2>Looks and Style at Peak Per-FORM-ance<\/h2>\n<p>As you can see, it\u2019s as easy as ever to apply Forminator\u2019s Global Appearance Presets to all or individual forms. It makes branding and form creation much more manageable than starting from scratch with each new form you create.<\/p>\n<p>This keeps the style of your form and looks consistent throughout, no matter where you\u2019re using them.<\/p>\n<p>If you haven\u2019t yet, be sure to start using our <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">Forminator <\/a>plugin to implement this useful feature and check out the <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator\/#appearance-presets\" target=\"_blank\" rel=\"noopener\">documentation<\/a> if you need help. Forminator is free to use, with over 200k active installs and a solid 5-star review.<\/p>\n<p>Keep your forms on form!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Maintaining the same form styles and appearance across all of your forms has never been easier with Forminator\u2019s Global Appearance Presets. The look and style of a form you create with our free plugin, Forminator, can be replicated and used for all of your forms. Even change existing forms to your new style and appearance [&hellip;]<\/p>\n","protected":false},"author":811449,"featured_media":205795,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"4","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260],"tags":[],"tutorials_categories":[11232],"class_list":["post-205778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","tutorials_categories-forminator-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/205778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/811449"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=205778"}],"version-history":[{"count":5,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/205778\/revisions"}],"predecessor-version":[{"id":205796,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/205778\/revisions\/205796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/205795"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=205778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=205778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=205778"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=205778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}