{"id":591,"date":"2016-05-12T09:24:37","date_gmt":"2016-05-12T16:24:37","guid":{"rendered":"https:\/\/traverstodd.com\/?p=591"},"modified":"2016-05-13T09:11:00","modified_gmt":"2016-05-13T16:11:00","slug":"add-custom-classes-to-ninja-form-wrappers","status":"publish","type":"post","link":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/","title":{"rendered":"Add Custom Classes to Ninja Form Wrappers"},"content":{"rendered":"<p>Let me start by saying, I love <a href=\"https:\/\/ninjaforms.com\/\">Ninja Forms<\/a>. It&#8217;s incredibly easy to use, and best of all, it&#8217;s free! While my love affair with Ninja Forms still burns deep, there was one thing that was making my life just a little bit more difficult than it needed to be.<\/p>\n<p>The issue showed itself when I used the export tool to add the forms I created on my local development environment to a staging version of the site.\u00a0 I was working on a site as a part of a team and the staging site was our source of record.\u00a0 Ninja Forms automatically assigns an ID number to each form and uses that number to add various ID&#8217;s to different elements in the form including the form wrapper.\u00a0 These ID&#8217;s are useful for targeting individual forms. However, the problem arises when dealing with multiple environments.\u00a0 The ID on my local environment did not always match the ID on the staging environment.\u00a0 This is not an issue if you are the only one controlling content since you can simply import\/export the whole database but it can become a real pain when importing\/exporting the forms individually.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-593\" src=\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-blog1.jpg\" alt=\"ninja-forms-blog\" width=\"777\" height=\"144\" srcset=\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-blog1.jpg 777w, https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-blog1-300x56.jpg 300w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/p>\n<p>What I wanted to do was have the ability to add a custom ID or class to the outer most div of my Ninja Form.\u00a0 In the image above, you can see that an ID is assigned based off of the form ID number and the common class of &#8220;ninja-forms-cont&#8221; gets added to all forms created with Ninja Forms.\u00a0 I searched high and low in the form tools for a way to assign a custom class to the whole form as you can do for individual fields but had no luck.<\/p>\n<h2>Let&#8217;s Hack this thing!<\/h2>\n<p>After some research I learned that you could tap into some of the Ninja Forms functionality using the WordPress add_filter function.\u00a0 I didn&#8217;t want to update the plugin files directly since any plugin update would wipe out my changes.\u00a0 Here&#8217;s what I came up with.<\/p>\n<pre><code class=\"language-php\">\r\n\/\/Ninja Forms -- Adds class to the form wrapper based on form title\r\nfunction ninja_wrap_class($wrap_class, $form_id){\r\n\t$form_title = Ninja_Forms()-&gt;form( $form_id )-&gt;get_setting( 'form_title' );\r\n\t$form_title = strtolower($form_title);\r\n\t$form_title = str_replace(' ', '-', $form_title);\r\n\t$wrap_class .= ' ninja-wrap-' . $form_title;\r\n\r\n\treturn $wrap_class;\r\n}\r\nadd_filter( 'ninja_forms_cont_class', 'ninja_wrap_class', 10,2 );\r\n<\/code><\/pre>\n<p>I did a search through the plugin files to find out how to access the form title. From there, I used some PHP functions to take the title and modify it to the correct syntax to be added as a class. I then appended that class to the class already given to all Ninja Forms form wrappers.<\/p>\n<p>Here&#8217;s the resulting code:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-595 size-full\" src=\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-custom-class.jpg\" alt=\"ninja-forms-custom-class\" width=\"746\" height=\"141\" srcset=\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-custom-class.jpg 746w, https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-custom-class-300x57.jpg 300w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><\/p>\n<p>My form title &#8220;Share Your Story&#8221; gets added as a class to the form container allowing me to target the form for CSS or JS without having to target the auto-iterated form ID number.\u00a0 Now I can make iterations to my form locally and export them without having to worry about my form ID&#8217;s not matching on my other environments.<\/p>\n<p>Leave me a comment if this helps you out on your next project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let me start by saying, I love Ninja Forms. It&#8217;s incredibly easy to use, and best of all, it&#8217;s free! While my love affair with Ninja Forms still burns deep, there was one thing that was making my life just a little bit more difficult than it needed to be. The issue showed itself when [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":599,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,4],"tags":[11,12],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd\" \/>\n<meta property=\"og:description\" content=\"Let me start by saying, I love Ninja Forms. It&#8217;s incredibly easy to use, and best of all, it&#8217;s free! While my love affair with Ninja Forms still burns deep, there was one thing that was making my life just a little bit more difficult than it needed to be. The issue showed itself when [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/\" \/>\n<meta property=\"og:site_name\" content=\"User Experience Design, Strategy, and App Development | Travers+Todd\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-12T16:24:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-13T16:11:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1281\" \/>\n\t<meta property=\"og:image:height\" content=\"402\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paul Au\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Au\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/\",\"url\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/\",\"name\":\"Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd\",\"isPartOf\":{\"@id\":\"https:\/\/traverstodd.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg\",\"datePublished\":\"2016-05-12T16:24:37+00:00\",\"dateModified\":\"2016-05-13T16:11:00+00:00\",\"author\":{\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/b4049fc8f712bdccca1fc9f95aec36ac\"},\"breadcrumb\":{\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage\",\"url\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg\",\"contentUrl\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg\",\"width\":1281,\"height\":402},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/traverstodd.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Custom Classes to Ninja Form Wrappers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/traverstodd.com\/#website\",\"url\":\"https:\/\/traverstodd.com\/\",\"name\":\"User Experience Design, Strategy, and App Development | Travers+Todd\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/traverstodd.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/b4049fc8f712bdccca1fc9f95aec36ac\",\"name\":\"Paul Au\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/32bd4fd72878cb07a5330c50160438f9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/32bd4fd72878cb07a5330c50160438f9?s=96&d=mm&r=g\",\"caption\":\"Paul Au\"},\"url\":\"https:\/\/traverstodd.com\/author\/paul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/","og_locale":"en_US","og_type":"article","og_title":"Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd","og_description":"Let me start by saying, I love Ninja Forms. It&#8217;s incredibly easy to use, and best of all, it&#8217;s free! While my love affair with Ninja Forms still burns deep, there was one thing that was making my life just a little bit more difficult than it needed to be. The issue showed itself when [&hellip;]","og_url":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/","og_site_name":"User Experience Design, Strategy, and App Development | Travers+Todd","article_published_time":"2016-05-12T16:24:37+00:00","article_modified_time":"2016-05-13T16:11:00+00:00","og_image":[{"width":1281,"height":402,"url":"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg","type":"image\/jpeg"}],"author":"Paul Au","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Paul Au","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/","url":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/","name":"Add Custom Classes to Ninja Form Wrappers - User Experience Design, Strategy, and App Development | Travers+Todd","isPartOf":{"@id":"https:\/\/traverstodd.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage"},"image":{"@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage"},"thumbnailUrl":"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg","datePublished":"2016-05-12T16:24:37+00:00","dateModified":"2016-05-13T16:11:00+00:00","author":{"@id":"https:\/\/traverstodd.com\/#\/schema\/person\/b4049fc8f712bdccca1fc9f95aec36ac"},"breadcrumb":{"@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#primaryimage","url":"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg","contentUrl":"https:\/\/traverstodd.com\/wp-content\/uploads\/ninja-forms-post-bg1.jpg","width":1281,"height":402},{"@type":"BreadcrumbList","@id":"https:\/\/traverstodd.com\/add-custom-classes-to-ninja-form-wrappers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/traverstodd.com\/"},{"@type":"ListItem","position":2,"name":"Add Custom Classes to Ninja Form Wrappers"}]},{"@type":"WebSite","@id":"https:\/\/traverstodd.com\/#website","url":"https:\/\/traverstodd.com\/","name":"User Experience Design, Strategy, and App Development | Travers+Todd","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/traverstodd.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/traverstodd.com\/#\/schema\/person\/b4049fc8f712bdccca1fc9f95aec36ac","name":"Paul Au","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/traverstodd.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/32bd4fd72878cb07a5330c50160438f9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32bd4fd72878cb07a5330c50160438f9?s=96&d=mm&r=g","caption":"Paul Au"},"url":"https:\/\/traverstodd.com\/author\/paul\/"}]}},"_links":{"self":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts\/591"}],"collection":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":0,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/media\/599"}],"wp:attachment":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}