Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1006760

    Hi, I just realized that Enfold theme comes with a form in the layout editor. It seems better than most of forms plugins I’ve seen. How do I edit the css? Below is the css for wpforms, how can I edit from there? Thanks.

    div.wpforms-container-full .wpforms-form button[type=submit] {background-color: #000; color: #FFF; font-weight: bold; border-radius: 10px}
    div.wpforms-container-full .wpforms-form button[type=submit]:hover {background-color: #333; color: #FFF; font-weight: bold; border-radius: 10px}

    #1006783

    Hey samuelngyl,

    Please provide a link to the site/page in question so we can inspect your exact classes and provide proper css.

    Best regards,
    Jordan Shannon

    #1006962

    Sure, I just sent you the link.

    • This reply was modified 5 years, 10 months ago by Samuel. Reason: url update
    #1006984

    Hi,

    Thanks for the link, what exactly are you looking to alter on that form?

    Best regards,
    Rikard

    #1007377

    Hi, I would like to use css to change the look of the submit button and hover button.

    I was able to change it for wpforms plugin (refer to the link below) and now I would like to change it for the enfold form. By doing that I can get rid of wpforms plugin. Thanks.

    #1007415

    Hi,

    Thanks for the feedback. Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-190 input[type='submit'] {
      background-color:red !important;
    }
    
    .page-id-190 input[type='submit']:hover {
      background-color:yellow !important;
    }

    Best regards,
    Rikard

    #1007433

    Hi RIkard, I tested out the code but it doesn’t work for me. Also, I would like all the buttons of my forms to look the same regardless of the page. It’s not just for one page. Let me know what else I can do, thanks.

    #1007470

    Hi,
    I took a look at the page you linked to and believe this css should work on any page:

    .avia_ajax_form input.button[type=submit] {
    background-color: #000 !important; 
    color: #FFF !important; 
    font-weight: bold !important; 
    border-radius: 10px !important; 
    }
    .avia_ajax_form input.button[type=submit]:hover {
    background-color: #333 !important;  
    color: #FFF !important; 
    font-weight: bold !important; 
    border-radius: 10px !important; 
    }

    Best regards,
    Mike

    #1007758

    Thanks Mike! It works, even without the !important. You can close this thread.

    #1007797

    Hi,

    Great, glad Mike could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Enfold Web Form CSS’ is closed to new replies.