Hey Folks!

During March of 2020, and possibly April, answers may be delayed more than it usually happens. This is caused by my personal situation that requires a lot of time from me to be dedicated elsewhere, and also because of the local things that are happening currently cause of the all things connected to "Corona Virus".

Please be patient, all answers are coming as soon as possible, even if I have to stay late at night :-)

Sorry for any inconvenience.

Air.
Before you ask please READ THIS

Q: CSS-Tag to make GDPR-text in Contact Form smaller?

I’ve spent around three hours now in investigating how to make this clickable legal GDPR text within the WPForms smaller.

The exhaustive WPForms CSS documentation [1], [2] unfortunately doesn’t comment this use case and also doesn’t give any hint what tag needs to be edited. :-/

Investigating the source code also occurs, that element also references / relies at this point to some PhotoProofs CSS font settings. Thus I’ve tried to figure out by developers mode and click element feature. Noticed that the tags ...

/* Tag to make the WP Forms GDPR Disclaimer Text smaller */
.wpforms-container .wpforms-field-label-inline {
font-size: 10px;
}

/ * Tag to makes the text starting at left alignment * /
.wpforms-container ul,
.wpforms-container ul li {
margin: 0;
}

effects such text. However, changing the font size makes font smaller, but remains its prior line-height. Thus no space can be won. Adding line-height tag seems to have no effect. Whatever I coded here didn’t work.

I would be thankful, if you could let me know which tag needs to be changed in order to make the obligatory GDPR disclaimer text a little smaller, so that the legally sufficient text (which isn’t what WPForms thinks it is) doesn’t waste half of the screen.

Thanks very much for a hint.

[1] https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/#global-selectors
[2] https://wpforms.com/docs/how-to-add-a-terms-of-service-checkbox-to-a-form/

Comments

  • AirAir
    Posts: 10,288
    Hey :-)
    MLG76 said: However, changing the font size makes font smaller, but remains its prior line-height. Thus no space can be won. Adding line-height tag seems to have no effect. Whatever I coded here didn’t work.
    This will be tricky because of construction made there. Let me prepare custom CSS right for your HTML in your specific case:
    #wpforms-8576-field_10 {
        margin-left: 0;
        padding-left: 1.5em;
        position: relative;
    }
    #wpforms-8576-field_10_1 {
        position: absolute;
        top: 0;
        left: 0;
    }
    #wpforms-8576-field_10 .wpforms-field-label-inline {
        font-size: 12px;
        line-height: 15px;
        display: block;
    }
    With kind regards.
  • Posts: 62
    Wow!

    Thought it's tricky. Looks brilliant with your Custom CSS settings.

    I've put additionally ...

    #wpforms-9009-field_3 {
    margin-left: 0;
    padding-left: 1.5em;
    position: relative;
    }
    #wpforms-9009-field_3_1 {
    position: absolute;
    top: 0;
    left: 0;
    }
    #wpforms-9009-field_3 .wpforms-field-label-inline {
    font-size: 12px;
    line-height: 15px;
    display: block;
    }

    ... for the German version of the contact page. Hopefully I've altered the code correct. At least it looks as it works. ;-)

    Btw, this formatting looks much much better than the prior default version.

    Many thanks!
  • AirAir
    Posts: 10,288
    Great to hear that! High five for teamwork 🙏

    With kind regards.
  • Posts: 62
    High five! ;-)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!