frontity-contact-form-7 icon indicating copy to clipboard operation
frontity-contact-form-7 copied to clipboard

feature/add-styles: Style the form

Open imranhsayed opened this issue 6 years ago • 1 comments

Please style the form

imranhsayed avatar Oct 26 '19 12:10 imranhsayed

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;
  }
}

luisherranz avatar Oct 28 '19 11:10 luisherranz