Please include a link to your Contact Form 7 form. If others here are able to understand your actual problem, they may be able and willing to offer a possible solution.
The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.
To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Thread Starter
Tini21
(@tini21)
Hi, thanks for your response.
i checked out your link and implemented the code to my style.css
it was exactly the code i was searching for 🙂
thank you!
Tina
Thread Starter
Tini21
(@tini21)
Now unfortunately i have another problem…
The submit button is disappearing when i have the smallest window size?!
I do not see it when i view the site on my smartphone or scale the desktop window down.
http://www.freies-arbeiten.de/werbepartner-zeitgard/
I added the following code for the boxes to my style.css
input[type=”text”]
{
width: 50%;
}
input[type=”email”]
{
width: 50%;
}
Can you help me with a solution for the submit button?
Thank you
Tina
I have examined your form at the link provided.
Here is the code that I see
ERROR CODE:
@media (max-width: 25rem){
button, input[type="button"], input[type="reset"], input[type="submit"] {
display: none;
}
}
COREECTION CODE:
@media (max-width: 25rem){
.wpcf7-form .wpcf7-submit {
display: block;
}
}
Use Chrome Dev Tools to examine the HTML and CSS of your CF7 using the mobile view option. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.
Thread Starter
Tini21
(@tini21)
Hi davmerit,
thanks a lot for your quick help! I implemented your correction code into my style.css and it worked! 🙂
I definitely need to work on my knowledge of CSS..
Tina
If this resolves your question, it helps others contributing here, you can flag your post as [resolved]
