Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/add-styles: Style the form #7

Open
imranhsayed opened this issue Oct 26, 2019 · 1 comment
Open

feature/add-styles: Style the form #7

imranhsayed opened this issue Oct 26, 2019 · 1 comment
Assignees
Labels
enhancement New feature or request

Comments

@imranhsayed
Copy link
Owner

Please style the form

@imranhsayed imranhsayed added the enhancement New feature or request label Oct 26, 2019
@imranhsayed imranhsayed changed the title Style the form feature/add-styles: Style the form Oct 26, 2019
@luisherranz
Copy link
Collaborator

Instead of styling the form, I'd just add the CSS of contact-form-7 itself and let the theme do the rest. That way it will work exactly equal than the WP version.

https://smitpatadiya.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.4

You can use processors to add the CSS-in-JS.

For example, for this CSS:

span.wpcf7-not-valid-tip {
	color: #f00;
	font-size: 1em;
	font-weight: normal;
	display: block;
}

You can do:

const NotValidTip = styled.span`
  color: #f00;
  font-size: 1em;
  font-weight: normal;
  display: block;
`;

const notValidTip = {
  test: node => node.component === "span" && /wpcf7-not-valid-tip/.test(node.props.className),
  process: node => {
    node.component = NotValidTip;
    return node;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants