Being able to create content for a web page involves a lot of attention to detail. Every little detail can be improved, this is a rule. And, this applies even more when we have a large website or with many small details to cover. An example of this is if we own a web store created on platforms like Blogger.
Often these types of pages bring with them a lot of small details to cover, such as the way in which the products can be filtered in the search engine or in the advertising designs for it.
Given this, we can realize how much detail we can cover within our websites. However, it all depends on the level of creativity that we can have to put effort into our website. Because, before this, we will tell you about a small detail that you can cover in just minutes, and that is the ContactForm 7.
ContactForm 7 is one of the most used form plugins among users of different web pages. This is because it is a very efficient way to allow our visitors to interact with us through a contact page or another place.
But, you have the small detail that often turns out to be a somewhat simple survey plugin, to the point that many consider its appearance somewhat unsightly. That is why we have to think of better ways to adapt this popular plugin to our theme.
With the latter in mind, we can mention Divi as one of the most popular themes in WordPress and due to its aesthetics. It is really nice to look at. Because of this, it can end up being a bit annoying to use ContactForm 7 within a web page with Divi, because the two styles don’t match each other.
That is why we have to format ContactForm 7 so that it can be viewed in the same aesthetic sense as Divi. See below how you can do this.
Customizing ContactForm 7 for Divi
Actually, being able to use ContactForm 7 is a blessing when we want to receive a message from our visitors and be able to interact with them if we want to. But if we have Divi as a theme, we may have the small problem of finding that this plugin does not combine at all with our theme.
This is why we have to reformulate the appearance of ContactForm 7, and adapt it to how Divi looks. We can do this in a very simple way. To do this, we must enter the Divi menu, and then in the option that appears as “Theme Options”, here we will find the custom CSS. Within this we will have to enter the following code.
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee! important;
border: none! important;
width: 100%! important;
-moz-border-radius: 0! important;
-webkit-border-radius: 0! important;
border-radius: 0! important;
font-size: 14px;
color: # 999! important;
padding: 16px! important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: # 8B3C90! important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit: hover {
background-color: #eee;
border-color: #eee;
padding: 6px 20px! important;
}
Keep in mind that each of the places where it says #eee and # 8B3C90, you must change it to be able to customize the colors more in line with the ones you use on your website. Now you just have to use the Divi constructor to be able to customize the form.
Why not use other alternatives?
You may be wondering why you shouldn’t make better use of the contact form tool that comes with Divi. The answer to this is that it is not really as useful as using ContactForm 7, it does not have as many options and it is not as intuitive and straightforward. That is why it is best to stick with ContactForm 7 and modify it as needed.