Look of the contact field

Support
#1

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.

#2

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

#3

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

#4

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??

#5

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

#6

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:

image
image961×599 19.7 KB

#7

Hi Jannes,

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

Screenshot 2022-04-27 204018
Screenshot 2022-04-27 2040181778×837 62.1 KB

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.

secure-note
secure-note1040×250 15.3 KB

Thanks

#8

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

#9

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

#10

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

#11

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