Sggest Me a WP Theme

[gg786]

hi all,'
I am looking for a WordPress theme which has transparent contact form 7 on the revslider on the front page I have tried but I could not found yet any theme with the same features so if anyone knows kindly help me. if it is available on this forum it will be a Plus.

Many Thanks & Regards

 

[gg786]

any Luck ??

 

[guguk]

If you struggle doing that via revolution slider & contact form 7
Then check out landing page templates.
Im sure you will find what you want.

 

[gg786]

Sir,
Thank you for the reply, I have searched too many times but could not found exactly what I need, actually, I need a transparent contact form on the rev slider but there is no luck yet.

 

[whitebee]

Perhaps you shouldn't try to find a theme, but should be trying to find a way to make the contact form transparent using CSS or something else, so it could be added to anything and it stays transparent.

I found a guide about transparent ContactForm 7, hopefully it's what you're looking for:

https://kriesi.at/support/topic/contact-form-7-how-to-make-fields-transparent/

 

[guguk]

Sir,
Thank you for the reply, I have searched too many times but could not found exactly what I need, actually, I need a transparent contact form on the rev slider but there is no luck yet.

Just provide a sample? what you want to do exactly?
If the problem just "tarnsparent" it's easy peasy

 

[gg786]

Just provide a sample? what you want to do exactly?
If the problem just "tarnsparent" it's easy peasy

yes sir I need to make a slider and put contact form on it which I have already done but I want to make the contact form transparent and field borders in custom color or just white enter txt is also need to be white.

 

[guguk]

yes sir I need to make a slider and put contact form on it which I have already done but I want to make the contact form transparent and field borders in custom color or just white enter txt is also need to be white.

if you already made it one slider, just drop a link here and we can suggest you a lil bit CSS

 

[gg786]

if you already made it one slider, just drop a link here and we can suggest you a lil bit CSS

Please find the Link below and kindly suggest me how can I make it more attractive.

slider - UWRE Property

“A HIGHER FORM OF REALTY”

uwreproperty.com

 

[guguk]

Please find the Link below and kindly suggest me how can I make it more attractive.

slider - UWRE Property

“A HIGHER FORM OF REALTY”

uwreproperty.com

mmm how can say.
I just i did not imagine like that when you make transparent it will be not seem "good" i think.

I just suggest you these:
- You should use input placeholder instead of "form label" (I can not do that via CSS you can make that via form fields)
- If you want to use form on slider you should consider to using "border". I mean, only use frame border with little radius and do not use left-right and top border for inputs.
- You should consider to make "send" button full-width or just text without background color.

 

[gg786]

Dear Sir,

this would be nice i have tried custom css but it is not working for the form I am stucked on this stage. can you please help me how to get the result as now you understand my opinion

 

[frizzel]

You cannot override the CSS in the first form as it's set on the element itself. That's probably done via theme settings or something like that?
The second form (with only the email field) you can override, simply add this to your CSS:

.wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], textarea.wpcf7-form-control, .form textarea.wpcf7-form-control {
    background: transparent}

However, you might want to consider not a completely transparent background. You can do this with

   {background: rgba(255, 255, 255, 0.5)}

(where 0.5 indicates the percentage of opacity, in this case 50 percent.)

The text inside the boxes is a so-called placeholder, for which you can change the color as follows:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  opacity: 1; /* You have to set this for Firefox because it sets a lower opacity for placeholders */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
}

 

[frizzel]

But, but, but... on the Home Page of the link you gave there's already a nice looking form. Why don't you simply apply the styles of that form to your CF7 form?

 

[gg786]

But, but, but... on the Home Page of the link you gave there's already a nice looking form. Why don't you simply apply the styles of that form to your CF7 form?

yes I tried but couldn't fount the particular CSS on that form.

 

[gg786]

You cannot override the CSS in the first form as it's set on the element itself. That's probably done via theme settings or something like that?
The second form (with only the email field) you can override, simply add this to your CSS:

.wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], textarea.wpcf7-form-control, .form textarea.wpcf7-form-control {
    background: transparent}

However, you might want to consider not a completely transparent background. You can do this with

   {background: rgba(255, 255, 255, 0.5)}

(where 0.5 indicates the percentage of opacity, in this case 50 percent.)

The text inside the boxes is a so-called placeholder, for which you can change the color as follows:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  opacity: 1; /* You have to set this for Firefox because it sets a lower opacity for placeholders */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
}

Thank you sir this really works I tried but the text is not changing the color I will check it later.

 

[frizzel]

They have included a placeholder color already, so you have to override that with a class attribute, like so:

.form-control:-ms-input-placeholder {color: #FFF}
.form-control::-ms-input-placeholder {color: #FFF}
.form-control::-webkit-input-placeholder {color #FFF}
.form-control::placeholder {color: #FFF}