{"id":1156,"date":"2017-06-02T15:06:57","date_gmt":"2017-06-02T10:06:57","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=1156"},"modified":"2017-07-17T09:16:41","modified_gmt":"2017-07-17T04:16:41","slug":"rebrand-contact-form-7-forms-wordpress-form-customizer-5-minutes","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/rebrand-contact-form-7-forms-wordpress-form-customizer-5-minutes\/","title":{"rendered":"Rebrand Your Contact Form 7 Forms With WordPress Form Customizer in Under 5 Minutes"},"content":{"rendered":"<p>Type in the keyword Contact Form 7 plugin, and you&#8217;ll find plenty of results showing up in your browser. Let me explain a bit; for years we\u2019ve been using Contact Form 7, without even thinking about other solutions. But can we say that it is the be-all and end-all of contact forms for WordPress?<\/p>\n<p><!--more--><\/p>\n<p>I think NO! TBH, almost every theme I build I end up providing my clients with some basic styling for their use of\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" rel=\"nofollow noopener\" target=\"_blank\">Contact Form 7<\/a> plugin. Well, this is an easy fix for a\u00a0developer. However, at a certain point of time, you&#8217;ll get frustrated of doing things again and again merely because you need to add an extra crisp for your clients.<\/p>\n<p>I was facing the same issue and knowing that I can solve it was even more frustrating. Best products are built\u00a0when you solve a problem. And that\u2019s what I did. I have built a plugin which you can use to customize your contact form 7 forms, regardless of the theme you are using.<\/p>\n<p>So, let me introduce you to the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/cf7-customizer\/\" rel=\"nofollow noopener\" target=\"_blank\">WordPress Form Customizer<\/a>\u00a0plugin which I built to avoid repeating the styling process of contact forms.<\/p>\n<h2 class=\"plugin-title\"><a href=\"https:\/\/wordpress.org\/plugins\/cf7-customizer\/\" rel=\"nofollow noopener\" target=\"_blank\">WordPress Form Customizer | CF7 Customizer<\/a><\/h2>\n<p>[ecko_fullpage_image]<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1173\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43.png\" alt=\"\" width=\"1884\" height=\"614\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43.png 1884w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-300x98.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-768x250.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-1024x334.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-1680x548.png 1680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-1240x404.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-860x280.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-680x222.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-500x163.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-400x130.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-200x65.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-02-14.55.43-50x16.png 50w\" sizes=\"(max-width: 1884px) 100vw, 1884px\"><\/p>\n<p>[\/ecko_fullpage_image]<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/cf7-customizer\/\" rel=\"nofollow noopener\" target=\"_blank\">CF7 Customizer<\/a>\u00a0is an intuitive plugin to design your contact forms via WordPress live customizer, right at the front-end. Cherry on the top, it will be\u00a0free forever.<\/p>\n<p>It is a simple to use and nice plugin for you to customize the look and feel of Contact Form 7 plugin based forms. The plugin is compatible with every WordPress theme which means awesome style, increased productivity and of course great peace of mind.<\/p>\n<p>Here&#8217;s a quick introductory video for your guidance:<\/p>\n<p>[ecko_fullpage_image]<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/139903612\" width=\"500\" height=\"245\" frameborder=\"0\" title=\"CF7 Customizer by WPTie\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<p>[\/ecko_fullpage_image]<\/p>\n<h2>CF7 Customizer Features<\/h2>\n<p>Let&#8217;s now explore some of the features which the CF7 Customizer plugin offers.<\/p>\n<ul>\n<li><strong>Form Text &amp; BG Colors<\/strong>: The plugin allows you to customize form&#8217;s text and background color. You can also add a background image or change the font-size.<\/li>\n<li><strong>Input Field Styling<\/strong>: Style the input fields of a form by adding width, colors, border, padding, and margins.<\/li>\n<li><strong>Form Padding, Margin &amp; Border<\/strong>: You can add padding, margin or even border to your form and also customize the border color.<\/li>\n<li><strong>Button Styling<\/strong>: Customize the form button with colors, border, even change the hover state colors.<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>Now let\u2019s get started with plugin functionality and setup.<\/p>\n<ul>\n<li>Install &amp; Activate <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" rel=\"nofollow noopener\" target=\"_blank\">Contact Form 7<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/cf7-customizer\/\" rel=\"nofollow noopener\" target=\"_blank\">CF7 Customizer<\/a> plugin.<\/li>\n<li>Add a New Form and hit the Save button.<\/li>\n<li>Copy the shortcode of the form you just created and paste it inside your Contact Page.<\/li>\n<li>Now open your contact page (at the front-end) and open the Customizer from the top admin bar.<\/li>\n<li>Here, you&#8217;ll find the CF7 Customizer panel. Click it and customize your contact forms right away.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1166\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings.jpg\" alt=\"cf7 customizer settings\" width=\"2560\" height=\"1404\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings.jpg 2560w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-300x165.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-768x421.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-1024x562.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-1920x1053.jpg 1920w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-1680x921.jpg 1680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-1240x680.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-860x472.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-680x373.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-500x274.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-400x219.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-200x110.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CF7-Customizer-Settings-50x27.jpg 50w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>Here are a few screenshots of <a href=\"https:\/\/wordpress.org\/plugins\/cf7-customizer\/screenshots\/\" rel=\"nofollow noopener\" target=\"_blank\">CF7 Customizer<\/a>\u00a0for WordPress.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1167\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2.png\" alt=\"\" width=\"800\" height=\"743\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2.png 800w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-300x279.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-768x713.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-680x632.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-500x464.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-400x372.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-200x186.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-2-50x46.png 50w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1168\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3.png\" alt=\"\" width=\"800\" height=\"743\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3.png 800w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-300x279.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-768x713.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-680x632.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-500x464.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-400x372.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-200x186.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-3-50x46.png 50w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1169\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4.png\" alt=\"\" width=\"800\" height=\"743\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4.png 800w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-300x279.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-768x713.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-680x632.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-500x464.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-400x372.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-200x186.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-4-50x46.png 50w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1170\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5.png\" alt=\"\" width=\"800\" height=\"743\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5.png 800w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-300x279.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-768x713.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-680x632.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-500x464.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-400x372.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-200x186.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-5-50x46.png 50w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1171\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6.png\" alt=\"\" width=\"800\" height=\"743\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6.png 800w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-300x279.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-768x713.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-680x632.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-500x464.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-400x372.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-200x186.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/screenshot-6-50x46.png 50w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/p>\n<h2>Conclusion<\/h2>\n<p>CF7 Customizer plugin caters the needs of both a developer and a beginner. It is lightweight and saves a lot of your time. Now it&#8217;s your turn to give this plugin a spin. Let me know about your feedback. How? You can post comments below, or you can reach out to me through our\u00a0Twitter (<a class=\"ProfileHeaderCard-screennameLink u-linkComplex js-nav\" href=\"https:\/\/twitter.com\/TheWPCouple\" rel=\"nofollow noopener\" target=\"_blank\"><span class=\"username u-dir\" dir=\"ltr\">@<b class=\"u-linkComplex-target\">TheWPCouple<\/b><\/span><\/a>) account.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Type in the keyword Contact Form 7 plugin, and you&#8217;ll find plenty of results showing up in your browser. Let me explain a bit; for years we\u2019ve been using Contact Form 7, without even thinking about other solutions. But can we say that it is the be-all and end-all of contact forms for WordPress?<\/p>\n","protected":false},"author":3,"featured_media":1176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[18],"tags":[],"coauthors":[],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/CFC_Brush-1680x840.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1156"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=1156"}],"version-history":[{"count":0,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1156\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/1176"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=1156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=1156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=1156"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=1156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}