{"id":10820,"date":"2024-09-19T17:27:50","date_gmt":"2024-09-19T17:27:50","guid":{"rendered":"https:\/\/purelysupp.com\/wordpress\/?p=10820"},"modified":"2024-09-19T17:35:01","modified_gmt":"2024-09-19T17:35:01","slug":"align-forminator-checkboxes-horizontally-using-a-custom-class","status":"publish","type":"post","link":"https:\/\/purelysupp.com\/wordpress\/code-snippets\/align-forminator-checkboxes-horizontally-using-a-custom-class\/","title":{"rendered":"Align Forminator check boxes horizontally"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To align checkboxes horizontally in WPMUDEV Forminator using a custom class, you&#8217;ll need to add some custom CSS. Here\u2019s a step-by-step guide:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Add a Custom Class to Your Form:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit your form in Forminator.<\/li>\n\n\n\n<li>In the &#8220;Advanced&#8221; tab of your form field settings, add a custom class name to the checkboxes (e.g., horizontal-checkboxes).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">2. Add Custom CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress dashboard.<\/li>\n\n\n\n<li>Navigate to Appearance &gt; Customize &gt; Additional CSS.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">3. Enter the Custom CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code indent ticss-77d7011e\"><code>.horizontal-checkboxes .forminator-checkbox {\n    display: inline-flex;\n    align-items: center; \/* Vertically aligns the checkbox and label *\/\n    margin-right: 15px; \/* Adjust spacing as needed *\/\n}\n\n.horizontal-checkboxes input&#91;type=\"checkbox\"] {\n    margin-right: 5px; \/* Space between checkbox and label *\/\n}\n\n.horizontal-checkboxes label {\n    margin: 0; \/* Remove any default margin from labels *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">4. Save Changes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <code>Publish<\/code> button to apply the changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This CSS will make the checkboxes align horizontally and adjust the spacing between them. If you need further customization, you can tweak the <code>margin-right<\/code> values or add additional styles as needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To align checkboxes horizontally in WPMUDEV Forminator using a custom class, you&#8217;ll need to add some custom CSS. Here\u2019s a step-by-step guide: 1. Add a Custom Class to Your Form: 2. Add Custom CSS: 3. Enter the Custom CSS: 4. Save Changes: This CSS will make the checkboxes align horizontally and adjust the spacing between\u2026&nbsp;<a href=\"https:\/\/purelysupp.com\/wordpress\/code-snippets\/align-forminator-checkboxes-horizontally-using-a-custom-class\/\" class=\"rmlink\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":3547,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","iawp_total_views":36,"wds_primary_category":0,"footnotes":""},"categories":[56,58],"tags":[262,263,133,260,63],"class_list":["post-10820","post","type-post","status-publish","format-standard","has-post-thumbnail","category-code-snippets","category-plugins","tag-alignment","tag-check-boxes","tag-css","tag-forminator","tag-wpmudev","entry"],"featured_image_src":"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2018\/09\/code-snippits-600x400.jpg","featured_image_src_square":"https:\/\/purelysupp.com\/wordpress\/wp-content\/uploads\/sites\/2\/2018\/09\/code-snippits-600x515.jpg","author_info":{"display_name":"Jack Alltrade","author_link":"https:\/\/purelysupp.com\/wordpress\/author\/jacka11trade\/"},"_links":{"self":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/10820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/comments?post=10820"}],"version-history":[{"count":3,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/10820\/revisions"}],"predecessor-version":[{"id":10836,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/posts\/10820\/revisions\/10836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/media\/3547"}],"wp:attachment":[{"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/media?parent=10820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/categories?post=10820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/purelysupp.com\/wordpress\/wp-json\/wp\/v2\/tags?post=10820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}