Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 6, 2018 at 5:57 pm #1006760
    Samuel

    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}

    September 6, 2018 at 7:12 pm #1006783
    Jordan Shannon

    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

    September 7, 2018 at 9:10 am #1006962
    Samuel

    Sure, I just sent you the link.

    • This reply was modified 6 years, 3 months ago by Samuel. Reason: url update
    September 7, 2018 at 9:36 am #1006984
    Rikard

    Hi,

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

    Best regards,
    Rikard

    September 8, 2018 at 8:11 am #1007377
    Samuel

    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.

    wpforms css for hover button

    September 8, 2018 at 1:38 pm #1007415
    Rikard

    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

    September 8, 2018 at 3:47 pm #1007433
    Samuel

    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.

    September 8, 2018 at 7:30 pm #1007470
    Mike

    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

    September 10, 2018 at 5:47 am #1007758
    Samuel

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

    September 10, 2018 at 8:05 am #1007797
    Rikard

    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

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