Often these types of pages bring with them a lot of small details to cover, such as how products can be filtered in the search engine or related advertising designs.
That said, we can realize when the level of detail to be able to cover within our own Web sites. However, it all depends on the level of creativeness that we may have to engage in our website. Because, before that, we are going to tell you about a little detail that you can cover in a few minutes, and this is the ContactForm 7.
ContactForm 7 is one of the most used form plugins by identification of different web pages. This is because it is a very efficient way for our visitors to interact with us through a contact page or other location.
But you have the little detail that it often turns out to be a pretty basic survey plugin, to the point that many consider its looks quite. unpleasant. That's why we need 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 for its aesthetics. It is really cool to see. For this reason, it can be a little annoying to use ContactForm 7 within a web page with Divi, because the two styles do not match.
That's why we have to format ContactForm 7 so that it can be seen in the same aesthetic sense as Divi. See below how you can do it.
ContactForm 7 customization for Divi
In fact, be 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 wish. But if we have Divi as a theme, we might have the small problem of finding that this plugin doesn't match our theme at all.
This is why we need to reformulate the look of ContactForm 7 and adapt it to the look of Divi. We can do it in a very simple way. To do this, we need to enter the menu Divi and then in the option that appears as "Theme Options", here we will find the CSS customized. Within this we will have to insert the following code.
.wpcf7-text,.wpcf7-textarea,.wpcf7-captchar {
background-color: #eee!importante;
edge: none! important;
width: 100%! important;
-moz-border-radius: 0! important;
-webkit-border-radius: 0!importante;
edge-radius: 0! important;
font size: 14px;
color: # 999! important;
padding: 16px! importante;
-moz-box-sizing: border-box;
-sizing-box-webkit: frame-border;
box-size: border-box;
}
.wpcf7-submit {
color: # 8B3C90! important;
margin: 8px automatic 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,7 em;
bottom: transparent;
border: solid 2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
- webkit translation: 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 e #8B3C90, you will need to change it to be able to customize the colors more according to the ones you use on your web page. Now you just have to use the Divi builder to be able to customize the module.
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 question is that it's not really as useful as using ContactForm 7, it doesn't have many options and it's not that intuitive and straightforward. That's why it's best to stick with ContactForm 7 and change it as needed.
TagsTutorial
