Support » Plugin: Contact Form 7 » Designing a contact form

  • Hello guys,

    is there any way to edit the design of the form? I want to make it smaller. I would also like the text not to be bold. I was looking for my answers, but probably in a wrong way. Could somebody direct me? Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Thanks for the reply, but that doesn’t solve my problem completely.

    How can I please make the text above fields not bold?

    The form is here http://infact.cz/kontaktujte-nas/

    Thanks

    Each field on your form can have an individual id assigned to it by you.
    This ID can then be referenced in CSS.

    So if you inserted a text label and field like this:
    <p> FirstName </p>

    You could add an ID
    <p ID=”FName” > FirstName </p>

    Then you can go to your child theme Custom CSS and set attributes for the field:

    #FName{
    font-size: px; /* %, px or em */
    color: #ffffff; /* Add a Hex Color */
    font-style: ; /* italic, normal or oblique */
    font-variant: ; /* small-caps */
    font-weight: ;
    }

    If you want to affect more than one field at a time but not all fields on your site, you can add a class instead of an ID. So each field may have a class assigned to it:

    <p class=”myclass”> First Name </p>
    Then your CSS custom code would use a . instead of a #

    .myclass {
    font-size: px; /* %, px or em */
    color: #ffffff; /* Add a Hex Color */
    font-style: ; /* italic, normal or oblique */
    font-variant: ; /* small-caps */
    font-weight: ;
    }

    So for some fields you may wish to set specific configuration whilst others all want to look the same.

    I’m a novice but this works for me, I’m sure an adult will come along shortly and put me on the naughty step.

    I use the Avada theme and often find I need to put !Important on the end of my CSS to ensure that it takes precedence, for-example, font-size:10px!important;

    All the best,
    Sam

    I have posted a complete two column form with form code and custom css here, if it is of interest:
    https://wordpress.org/support/topic/the-fields-are-too-small/

    All the best,
    Sam

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Designing a contact form’ is closed to new replies.