• Resolved viagozo

    (@dudematters)


    I am trying to figure out how the custom field styling works, cannot find any details about this in the documentation.

    I have an AVG field and I need to style this. So I’ve entered a custom css class name in the field styling options ‘avg’.

    In the Appearance section at custom css I added the following:
    .avg {
    font-family: verdana;
    font-size: 10px;
    line-height: 13px;
    }

    But nothing helps. I might have made a mistake in how to use this. Can someone help me?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @dudematters !

    Hope you’re having a good day!

    In order to style the fields you’ll need to use a different class. By default Forminator will add an ID attribute to all of the fields and you can use it in your CSS, so instead of .avg, please use something like:

    #forminator-field-number-1 {
      font-family: verdana;
      font-size: 10px;
      line-height: 13px;
    }

    The important part is the number-1 – this should match the value provided in {} brackets on each field on the Fields tab.

    Kind regards,
    Pawel

    Thread Starter viagozo

    (@dudematters)

    Hi Pawel,

    Thank you. It is still not very clear to me, sorry.
    I tried, as ‘gdprcheckbox-1’ is the name on the field tab:

    #forminator-field-gdprcheckbox-1 {
    font-family: verdana;
    font-size: 10px;
    line-height: 13px;
    }

    and I tried, as I named the field ‘avg’ in styling tab of the field:

    #forminator-field-avg {
    font-family: verdana;
    font-size: 10px;
    line-height: 13px;
    }

    but both do not work (use the css), so I must be misunderstanding the use. Can you clarify?

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @dudematters

    I hope you are doing well.

    If you are using a custom class:
    https://monosnap.com/file/z271QaOCFjgaCtx220UBKmdtTfwixF

    For the name field or any other field you can use:

    .avg input{
        
    }
    
    .avg label{
        
    }

    If you want to use Fominator class you can find it on the source code by clicking on the right button of mouse > inspect:

    https://monosnap.com/file/InibW0xbV91PSrJ2nzJ14sqTUzgDFZ

    About the ReCaptcha field, we can’t modify the style, because the ReCaptcha loads from iFrame so the style need to be modified in the iFrame source ( Google ) which is out of our control.

    But you can modify the position for a better user experience:

    https://monosnap.com/file/iLKEXJnN7YD1AE67WIPIRRMPCVuxsz

    Best Regards
    Patrick Freitas

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @dudematters

    I hope you are doing well and safe!

    We haven’t heard from you in a while, I’ll mark this thread as resolved.

    Feel free to let us know if you have any additional questions or problems.

    Best Regards
    Patrick Freitas

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

The topic ‘Custom Field Styling’ is closed to new replies.