- This topic has 7 replies, 2 voices, and was last updated 8 years, 1 month ago by
.
Hi,
Can you please advise if there is any way and if so, which classes to use to apply the theme form element styling to forms created with either Gravity Form plugin or Contact Form 7 plugin?
Form created with the Contact Form 7 plugin is rendering pretty close, but it is missing the little check mark that indicates if the form field is required or not.
See attached screenshots for reference.
Can you please help?
Hi @laszlo_oe,
I hope you are well today and thank you for your questions.
Can you please advise if there is any way and if so, which classes to use to apply the theme form element styling to forms created with either Gravity Form plugin or Contact Form 7 plugin?
You have to develop custom CSS code to apply styling on them and then use that CSS code by adding it in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
Form created with the Contact Form 7 plugin is rendering pretty close, but it is missing the little check mark that indicates if the form field is required or not.
By default the contact form 7 only displays required text as shown in your shared screenshot but we can also display check mark by developing custom CSS code.
Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamThank you for the prompt follow up. Here is a link to a page that I just created for the purpose of showing the Contact Form 7 rendering. http://crunchtechnologiesdemo.onlinexperience.com/check-form-styling/
Thank you for any suggestions!
The shared page is not accessible for me and displaying 404 page not found error.
Could you please make sure that it is accessible?
Hi,
I a sorry for the confusion. Updated the demo site and that removed this page. Can you please try again?
http://crunchtechnologiesdemo.onlinexperience.com/check-form-styling/
Thank you.
Laszlo
Solution for this topic
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.wpcf7-form p:nth-of-type(1) label, .wpcf7-form p:nth-of-type(2) label { position: relative; } .wpcf7-form p:nth-of-type(1) label:before, .wpcf7-form p:nth-of-type(2) label:before { font-family: 'simple-line-icons'; color: #47c9e5!important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; content: "\e080"; font-size: 14px; padding-left: 5px; position: absolute; left: 47%; top: 6px; }It worked, thank you for your help!
You are most welcome here 🙂
