CSS issues to customize form fields

  • Resolved leonore33

    (@leonore33)


    5 years, 2 months ago

    Hello,

    I am working locally so unfortunately I cannot provide a link. I use Elementor and Ocean WP theme, and browse with Google Chrome. I am new to wp and CSS and to customize my newsletter form, I am running into 3 issues :

    1- I changed font family and letter spacing inside name and email fields using costumized CSS (I don’t display label names) but it put the text off center so I used padding from my theme customizer (General options -> Forms(Input-textarea)) to recenter it. As a result, the cursor is not centered and is larger than the text. Maybe you could provide some CSS to affect the cursor ?
    Here is the CSS I used :

    div.wpforms-container-full .wpforms-form input.wpforms-field-large, div.wpforms-container-full .wpforms-form select.wpforms-field-large, div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
    font-family: “Arima Madurai” !important;
    letter-spacing: 4px
    }

    2- I want to change the text color displayed inside both fields but every code I found failed. I can change the color of the input through my theme customizer but it doesn’t affect what is displayed before someone fills them. I tried those codes :

    div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    color: rgba(145,145,145,0.53)!important;
    }

    div.wpforms-container-full .wpforms-form .wpforms-field-label?{
    color: rgba(145,145,145,0.53)!important;
    }

    div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
    color: rgba(145,145,145,0.53)!important;
    }

    None of them worked (I don’t know if I have the right target).

    3- My submit button automatically grows when hovered in the theme customizing panel and makes the bottom section grow as well, but not in the Elementor panel, and in the Elementor panel the labels and * still show even though I checked not to display them from WPForms directly (but they don’t appear in customizer). I tried to make the growing disappear with this CSS but no luck either :

    .div.wpforms-container-full .wpforms-form input[type=submit]:hover {
    animation: none !important;
    }

    If you can give me any help I would highly appreciate it, I am sure those are basic issues but I haven’t found my answers after hours of searching online. Thank you so much in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter leonore33

    (@leonore33)

    Actually for point 3 I also tried this code without success :

    .div.wpforms-container-full .wpforms-form input[type=submit],
    div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    animation: none !important;
    }

    And I realize it is not really that it makes the bottom section grow, it makes the whole page (from submit button down) go a little down until I take the cursor off of it.

    Thread Starter leonore33

    (@leonore33)

    To help, here are 3 screenshots :

    – When submit button hovered (in the visit site panel): https://prnt.sc/p1g0h6

    – When submit button not hovered + text cursor off center and too large in email field (in the visit site panel): https://prnt.sc/p1g185

    – In Elementor with submit button hovered (no border and no effect on the rest of the page) and labels still showing: https://prnt.sc/p1g1t4

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @leonore33,

    Unfortunately the padding within the field input shifts all elements within the field, including the placeholder text, input text and the cursor as well.

    To change the color of the placeholder text, you can use the custom CSS found in this tutorial.

    It seems like the issue could be due to the preview screen of Elementor, which does not load the actual form styles correctly. Is the issue with the size change when hovering over the submit button present when the form is published?

    Please let me know.

    Thanks.

    Thread Starter leonore33

    (@leonore33)

    Thank you for your reply!

    Is there a way to recenter the placeholder text after I changed the font family without using padding?

    Thank you, the change of color worked perfectly.

    Actually the issue when hovering (that makes the rest of the page slightly move down) has been happening after the form was published, when I am in the customizer page or preview page. I does not happen in Elementor, which makes me think it will keep happening when the site is online. Any thought why it does that?

    Thank you in advance !

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @leonore33,

    Thanks for the update!

    To target the placeholder text specifically, you can try the following custom CSS:

    .wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
	padding-left: 15px !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	padding-left: 15px !important;
   opacity: 1;
}
 
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
	padding-left: 15px !important;
   opacity: 1;
}
 
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
	padding-left: 15px !important;
}
 
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
	padding-left: 15px !important;
}

    When you get the chance, could you share a link to the form on your site so we can take a closer look at the submit button issue?

    Thanks!

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @leonore33,

    We haven’t heard back from you in about a week, so I’m going to go ahead and close this thread for now. But if you’d like us to assist, please feel welcome to continue the conversation (please just see my post above).

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS issues to customize form fields’ is closed to new replies.