Contact form 7 b

Support
#1

HI
I started on the path of learning WPCF7, and there are many positives, however I am finding styling to be finicky. I am not quite sure what I am doing wrong; a lot of the help materials I have been able to find are for prior versions of CS and X, so it’s hard to clarify.

Q1. is the Global CSS editor (under theme options) the place where you put all styling? I say this because some changes I make there simply do not show up, in fact very simple changes. Some do… but only sometimes!
Q2. Any chance that CS will ever write an element specifically to integrate with WPCF7? That would be a huge advantage, or your own built in form editor. Getting info of people is why we build pages in the first place!!! This needs to be baked into the theme!

Now more specifically;
At first I was getting results applying styling to labels, then it just stopped working. What could be going on?

.wpcf7 label {
…
}

on CF7 itself, i tried to create labels two ways; using paragraph tag, and label tag. Neither of them takes the styling applied via Global CSS, and confusinly, some font and and size changes did take, then stopped working.

Please advice *(and thank u)

#2

Hello @flashfog,

Thanks for writing in.

There are a few possibilities why CSS codes added in the Global CSS of the Theme Options do not work. It could be that the CSS selector use is incorrect or there is another CSS block with higher precedence that overrides your CSS code. Another is when there is a CSS syntax error in your code which stops other codes after it not to work as expected.

If you can provide us with the link to the page and element that you are trying to add CSS to, we can check provide you more details.

To check for CSS errors, please code the entire codes you have in the Global CSS here:

http://csslint.net/

We do currently do not have plans making a form editor for now. The only option at the moment would be to style the form using CSS codes.

We have a series on our Youtube channel dedicated to Creative Contact Forms that you might want to check out:

These videos in the series might help you with the CSS codes you are trying to work on.

Hope this helps.

#3

Amazing that you guys have already zeroed in on cf7 as being important to x users. I will watch and see if this alone gets me out of the woods. THANKS

#4

Hi @flashfog,

You’re always welcome. Feel free to open a new thread for other inquiry. Cheers!

#5

ok, so things are looking better…

i just need help spacing the submit button. details to follow.

#6

Hello @flashfog,

There is supposed to be a top margin that will give a space between the form fields and the submit button. However, you have added this code to the submit button:

  /* to center the button: */
      display: block;
    margin: 0 auto;

Instead of using the shorthand margin notation, try removing margin: 0 auto; then update:

  margin-right: 1em;
  margin-left: 1em;

to

  margin-right: auto;
  margin-left: auto;

You can find the code above in this block of code:

.wpcf7 input[type=submit] {
  margin-top: 3em;
  margin-bottom: 1em;
  margin-right: 1em;
  margin-left: 1em;
  padding:.5em 1em; 
  background: linear-gradient(to right, #FFD164, #FFB264);
  color:black;
  font-size:.9em;
  font-weight:800; 
  line-height: 1.4;
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 3em;
  border-radius: 3em; 

  /* to center the button: */
      display: block;
    margin: 0 auto;
  
}

Hope this helps.

#7

omg can’t belive i am still making these basic mistakes! THANKS

#8

You’re most welcome @flashfog!

#9

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