Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 3, 2023 at 11:08 am #1409465
    Xiscoj

    Hi!

    I am following this page https://kriesi.at/documentation/enfold/contact-form/#toggle-id-13 from the support to customize all the CF7 forms in my site. Specifically the code into “Styling contact form 7 to look like Enfold form” I put it on the Quick CSS unders General Styling but It does not work.

    Initially I am pasting it directly without changing anything, it seems that I am doing something wrong, obviously

    June 3, 2023 at 10:48 pm #1409503
    Mike

    Hey Xiscoj,
    Please link to a test page with your CF7 on it so we can check the elements, and perhaps add a Enfold contact forum under it to show the format you are expecting.

    Best regards,
    Mike

    June 5, 2023 at 6:55 pm #1409658
    Xiscoj
    This reply has been marked as private.
    June 6, 2023 at 2:47 am #1409704
    Ismael

    Hi,

    Thank you for the inquiry.

    Looks like the CSS changes are not being applied to the contact form fields. You may need to disable the plugin and the default file compression settings (Enfold > Performance > File Compression) in order for the changes to take effect. By temporarily disabling file compression, the CSS modifications should be properly applied to the contact form fields.

    If the above suggestion doesn’t help, and you still require further assistance, please provide the login details in the private field. This will allow us to access the admin area and investigate the problem further.

    Best regards,
    Ismael

    June 6, 2023 at 5:56 pm #1409789
    Guenni007

    by the way you can use the html classes from enfold on columns etc. to have similar look.
    f.e:

    to have those placeholders inside the input fields use the placeholder attribute – like on my screenshot
    [text your-name placeholder "Your name here"]

    June 7, 2023 at 9:44 pm #1409916
    Xiscoj

    Hi Ismael, I did that and did not work. Login details in private content.

    thank you Genni, it is very helpful indeed, but it is not exactly what i need.

    June 8, 2023 at 12:14 am #1409925
    Mike

    Hi,
    Thank you for your patience, I found some errors in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field and I corrected them and added this css:

    #top .wpcf7-form input[type='text'],
#top .wpcf7-form input[type='email'],
#top .wpcf7-form input[type='tel'],
#top .wpcf7-form .wpcf7-textarea {
border: 2px solid #222;
background: transparent;
color: #222;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1em;
padding: 13px!important;
border-radius: 2px;
}

#top .wpcf7-form .wpcf7-submit {
padding: 16px 20px;
border-radius: 2px;
border: 2px solid #222;
background: transparent;
color: #222;
font-size: 0.92em;
min-width: 142px;
}

    please clear your browser cache and check.

    Best regards,
    Mike

    June 8, 2023 at 8:58 am #1409952
    Xiscoj

    Marvelous, now it is working, mike. Thank you very much for your help.

    Please, do not close the thread because I am having others issues that I do not know if I can solve myself.

    June 8, 2023 at 11:21 am #1409959
    Mike

    Hi,
    Glad to hear that this helped, thank you for using Enfold.
    Please open a new thread for each issue, this helps other users find solutions based on the opening subject line quicker and helps keep the thread length manageable and on topic for multiple mods to assist. Thank you for your understanding.

    Best regards,
    Mike

    June 8, 2023 at 11:07 pm #1410022
    Xiscoj

    Ok! Thank you!

    June 9, 2023 at 4:47 pm #1410083
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Styling contact form 7 like Enfold’ is closed to new replies.