Contact form 7 is a very simple designed form. By default contact form input boxes and the button looks like themes design. But if you want to change the design using HTML and CSS. In this case, you have to know some basic HTML and CSS. Without knowing this you can also change the style of contact form 7 using an addon. The addon name is contact form 7 style.
Basic Information: This plugin required 5.6.0 or higher PHP version and minimum 4.0.1 WordPress version to install. It has 50 thousand plus active installation.
How to Install: From the WordPress dashboard admin menu click on the add new plugin. Write contact form 7 style in the search box and the plugin will appear to install.
- Style Color
- Use custom fonts
- Border color
- Background color
- Container style
- Transparent background color
- Placeholder opacity styling
- Container background image styling
- Quick edit option
- Different design for multiple forms
- Customize error message, success message, warning message.
- From the settings page, you can re-import deleted default templates. collecting data deactivation.
After Installation: It will create a new menu name contact style under the admin menu. There are four submenus
All styles: Here you will get 12 default styles where you can select the style you like also you will get the newly created style.
Default Styles: To use the default style you need to go to the contact>contact form menu. Then go to the contact form style template tab.
Click the left or right arrow to change the style. To active the style, you have to click on the design image (red box marked as active). At first, it will show as not active and when you will click then it will show as active.
Add new: You can add a new design from add new section. Here you will get several options to change the design as you like. If you know CSS then it will be more easy to understand the options. If you do not have CSS knowledge then you can do it also.
As an example, to create a new design click add new menu from the contact style and you will get the contact form name with a checkbox. Check the checkbox and click generate the preview and the contact form preview will show below in the preview area.
In the customization form, it has contact form elements and two element state. One is a normal state and another one is the hover state. There are lots of elements to change the design such as form, input, textarea, text, placeholder and more. I have selected the form and input element to change the design to let you know how you can do this. After selecting an element to modify go below for the options. Lots of options are available. Width, height, margin, padding, background and more. After changing the options click the publish button below and the form design will save in all style area. Before you save you can add a from the add title box.
If you already activate the new design then refresh the contact form page and it will show the new style.
CSS Editor: In the CSS editor you can add CSS code.
Settings: There are four settings available.
- Install predefined templates: From here you will be able to import the Contact Form 7 Style predefined templates. This works only if the predefined templates are Deleted Permanently (they don’t appear in Trash ).
- Show the frontend form edit button.
- Force CSS.
- Add Contact Form 7 Style in the admin bar.
So, Contact form 7 style is an easy addon to change and create the contact form design. With this addon you can easily change or create a form style without knowing CSS. If you do not like the simple cf7 style and do not want to create a new one you can use a design from the default style.