Add theme form element styling to Contact Form 7 or Gravity Form

Home › Forums › Jevelin Theme › Add theme form element styling to Contact Form 7 or Gravity Form

Home › Forums › Jevelin Theme › Add theme form element styling to Contact Form 7 or Gravity Form

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    RESOLVED Posts

  • laszlo_oe
    Participant

    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?

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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 team

    laszlo_oe
    Participant

    Thank 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!

    Shufflehound Support
    Moderator

    The shared page is not accessible for me and displaying 404 page not found error.

     

    Could you please make sure that it is accessible?

    laszlo_oe
    Participant

    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

    Shufflehound Support
    Moderator

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

    laszlo_oe
    Participant

    It worked, thank you for your help!

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)