Look of the contact field

Hi! How can I adjust the look of the contact field at my site http://yo-pa.de/kontakt/ so that it looks like the one here: https://demo.theme.co/lawyer/demo-contact/ ??

Its made with WPForms.

Hi @Antigone84,
I couldn’t figure out your issue. I assume customising the form would need a full version.

However I found a way using “Contact Form 7” which comes for free. Once installed add a new contact form > Customise it as you wish. You will find further instruction: Contact Form 7.

Finally, you need to customise your theme by adding custom CSS. Go to Theme Option > CSS > Copy and Paste the following:

.wpcf7 textarea, .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select{
color: rgb(222, 222, 222);
opacity: 1;
width: 100%;
background-color: rgb(69,72,78);
border-color:rgba(0,0,0,0);
border-bottom-color:rgb(222, 222, 222);
}

.wpcf7 textarea:focus, .wpcf7 input[type=text]:focus, .wpcf7 input[type=email]:focus, .wpcf7 input[type=url]:focus, .wpcf7 input[type=tel]:focus, .wpcf7 input[type=number]:focus, .wpcf7 .wpcf7-select{
border-bottom-color:rgb(42, 42, 42);
}

.wpcf7-form p label {
padding: 0 0 10px 0;
color: rgb(222, 222, 222);
}

PS: Code is already customised to your needs/colors according to your webpage.

Hope that helps! Best of luck, any questions let me know or drop me a PM
Regards, Jannes

Hi Jannes,

Thanks for providing the solution, but the form is not developed in Contact Form 7 and that is why the code will not work.

Hi Marcela, the correct code will look like the following.

.wpforms-field textarea, 
.wpforms-field input[type=text], 
.wpforms-field input[type=email], 
.wpforms-field input[type=url], 
.wpforms-field input[type=tel], 
.wpcf7 input[type=number]
{
    color: rgb(222, 222, 222);
    opacity: 1;
    width: 100%;
    background-color:transparent;
    border-color:rgba(0,0,0,0);
    border-bottom-color:rgb(222, 222, 222);
}

.wpforms-field textarea:focus,
.wpforms-field input[type=text]:focus, 
.wpforms-field input[type=email]:focus, 
.wpforms-field input[type=url]:focus, 
.wpcf7 input[type=tel]:focus, 
.wpforms-field input[type=number]:focus
{
    border-bottom-color:rgb(42, 42, 42);
}
.wpforms-field p label 
{
    padding: 0 0 10px 0;
    color:#45484f;
}

Hope it helps.
Thanks

Thank you, i added it to the CSS, but the field looks still the same. Do I nee to add a CSS-ID at WPForms??

Hi Jannes,

Glad that it is working and you don’t need to add any ID to the form. If the style conflict with any other form, just add the CSS to the Page CSS of the specific page so it will affect that page only.

Thanks

HI Sorry, but as I said, the fld still looks the same. I´ve added the snippet in the main CSS and in the specific site CSS. But anyway, it looks like this:

Hi Jannes,

I have added the same custom CSS code using the Stylebot app and it found worked.

I would suggest you check by adding the CSS to Page CSS of that page. If that does not work, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hello @Antigone84,

I tried to access your site dashboard but it seems that your site is down at the moment. Please let us know when it is accessible so that we can have a close look and advice you properly.

Thanks

Hi! Have you tried again? for me it was working all the time…:slight_smile:
Best regards!

Hi @Antigone84,

I went ahead and added the !important to every line of the custom CSS and it start overriding the default style of the WP Form.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.