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,970
    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: 89
    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,970
    Great to hear that! High five for teamwork 🙏

    With kind regards.
  • Posts: 89
    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!