PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Increase the input font size

  1. aum302
    Member

    Hi,

    I have just purchased Gravity Forms and created a Contact form. However, I found that the font size of the input text is too small.

    Pls let me know how to increase the font size?

    Thanks.

    Posted 9 years ago on Tuesday May 14, 2013 | Permalink
  2. Gravity Forms does not control the font size of the forms. It does not set a default font size. That is dictated and handled by your theme. Gravity Forms applies a base set of styles that works with most properly developed themes. With a properly developed theme built using best practices when it comes to both markup and CSS there are no design or layout issues with Gravity Forms out of the box.

    If the theme is properly coded as far as it's styles go then it should have a default font size that would work fine with Gravity Forms. Typically no CSS customizations are necessary to use Gravity Forms with most themes. But with thousands and thousands of WordPress themes out there and due to the nature of how CSS inheritance works, you can encounter themes that globally apply styles to form elements that produce results that aren't desired.

    If the font size within a text input is too small then it sounds like your theme is applying CSS to all form input elements globally. If the font size you are referring to is the font size of the field labels and descriptions, then it's due to the default font size that is being applied by your theme.

    In order to correct this you would either need to update the CSS styles in your theme to correct (or remove) styles it is applying to input elements or add additional CSS to your themes stylesheet to target and style the Gravity Forms elements however you want.

    Without providing a URL to view a page on your site with a form present so we can visually see what style issue you are having the only thing I can really do is provide some guidance on how you can customize the design of the forms using CSS.

    We have documentation on how to customize the design and layout forms which can be found here:

    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    The primary documentation you would want to look at would be the CSS targeting documentation that explains how to target and apply styles to specific form elements which can be found here:

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    I can't tell you what styles you would need to apply to achieve your desired effect because it's going to depend on what styles are being applied by your theme to cause the text to be so small.

    You would either need to adjust your themes styles or you would have to add some additional custom styles to your themes stylesheet to apply new styles to achieve the look you want. Any custom styles you apply would go in your themes stylesheet. Never edit the Gravity Forms plugin files directly as any changes would be overwritten by plugin updates and we can't support Gravity Forms plugin code that has been modified.

    Posted 9 years ago on Thursday May 23, 2013 | Permalink
  3. aum302
    Member

    Thanks so much for such a detailed response.

    True, the default font size of my theme (body text) is too small and I have rectified it by custom CSS with the help of the theme developer.

    Out of the two options you have suggested, I feel adding additional CSS to the themes stylesheet that targets and styles the Gravity Forms elements sounds more doable.

    Below is the url of my website's page for your reference:

    http://bookrecommendations.org/contact/

    My theme allows me to modify CSS through a customization panel without changing the actual theme's code. But, as I am not a coder, it will be really helpful if someone from your team can let me know exactly what CSS to insert there to modify the input font size.

    Thanks.

    Posted 9 years ago on Thursday May 23, 2013 | Permalink
  4. This CSS snippet should do the trick for you to increase the font-size inside of the inputs and textarea elements:

    [css]
    body .gform_wrapper input[type="text"], body .gform_wrapper input[type="url"], body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"], body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"], body .gform_wrapper textarea {
    font-size: 14px;
    }
    Posted 9 years ago on Thursday May 23, 2013 | Permalink
  5. aum302
    Member

    Thanks Rob. This has been really helpful.

    Posted 9 years ago on Thursday May 23, 2013 | Permalink
  6. No problem, glad to help. Just give a shout if you have any other styling questions.

    Posted 9 years ago on Thursday May 23, 2013 | Permalink

This topic has been resolved and has been closed to new replies.