Customize the form design

  • Resolved Pesi Unwalla

    (@pesiunwalla)


    4 years, 2 months ago

    The form fields and text do not display well on my site which has a black background.
    I managed to customize the label colors but the form field backgrounds, borders, text, etc. do not show up well.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Amrit Kumar Shrestha

    (@shresthauzwal)

    4 years, 2 months ago

    Hi @pesiunwalla,

    Thank you for writing in,

    We have checked your form and found that most of the design is already customized with custom CSS. For the select and time fields, please add the following CSS code.

    .everest-forms .evf-field-container select,
.flatpickr-input[readonly] {
    cursor: pointer;
    color: #fff !important;
}

    If you do not know where to add custom CSS code, please check this documentation https://docs.wpeverest.com/everest-forms/docs/where-do-i-add-my-custom-css/.

    Regards!

    Plugin Support Amrit Kumar Shrestha

    (@shresthauzwal)

    4 years, 1 month ago

    Hi @pesiunwalla,

    Since we did not get a response from your end, we are marking this thread as resolved as we believe the things mentioned here are now resolved. Please create a new support thread if needed.

    Thanks!

    Thread Starter Pesi Unwalla

    (@pesiunwalla)

    4 years, 1 month ago

    Sorry for the delayed response to your message.
    The text fields – e.g. subject or comments, still show the text and the field as greyed out and are almost impossible to read on my website which has a dark background.
    I have added the following Custom CSS Code as you suggested:
    ——-
    `/* EVEREST FORMS*/

    .everest-forms label {
    color: #fff;
    }

    .everest-forms label .required {
    color: #fff !important;
    font-weight:700; border:0!important; text-decoration:none}

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    clear: both;
    margin-bottom: 10px;
    font-family: “Open Sans Condensed”;
    line-height: 1.3;
    }

    .everest-forms .evf-field-container select,
    .flatpickr-input[readonly] {
    cursor: pointer;
    color: #fff !important;
    }

    —-
    with no success.
    Please see the page https://mediapower.ca/videography-estimate/ as an example – especially the fields:
    Phone Number
    Date
    Start Time
    End Time
    Special Instructions
    …to illustrate what I mean.

    The dropdowns too show grey text and are difficult to read whereas the start and end time fields show white text in the drop downs(?)

    Many thanks,
    Pesi

    • This reply was modified 4 years, 1 month ago by Pesi Unwalla.
    Plugin Support Amrit Kumar Shrestha

    (@shresthauzwal)

    4 years ago

    Hi @pesiunwalla,

    Thank you for writing back,

    Please add the following CSS to change the color of the fields input.

    .everest-forms .StripeElement, .everest-forms canvas.evf-signature-canvas, .everest-forms input[type=date], .everest-forms input[type=datetime-local], .everest-forms input[type=email], .everest-forms input[type=file], .everest-forms input[type=image], .everest-forms input[type=month], .everest-forms input[type=number], .everest-forms input[type=password], .everest-forms input[type=range], .everest-forms input[type=search], .everest-forms input[type=tel], .everest-forms input[type=text], .everest-forms input[type=time], .everest-forms input[type=url], .everest-forms input[type=week], .everest-forms select, .everest-forms textarea {
    color: #fff !important;
}

    Regards!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Customize the form design’ is closed to new replies.