Reduce form field size

  • Hello,

    I’m trying to change some sections of my form by going to personalized CSS but I can’t succeed.

    Right now on my website, when we click on ? Contact Us ?, we see the form but some fields of the form are below the fold and we need to scroll to fill the form entirely and send it.

    What I would like to do is to reduce some fields (reduce the message box, reduce the space between the ? close ? and ? who are you ? fields, etc.) so that users can see the entire form (until ? submit ? button) above the fold (without scrolling).

    Can you let me know how to do it?

    Thanks a lot!

    • This topic was modified 9 months, 2 weeks ago by ehtonio.
    • This topic was modified 9 months, 2 weeks ago by ehtonio.

    The page I need help with: [log in to see the link]

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

  • You will not be able to completely prevent scrolling, as there are plenty of screens that are not that high.

    The style properties in your project come from a child theme, which was probably created individually for you. They are also responsible for this view. If necessary, it would make more sense to contact the person who created the theme for you.

    Alternatively, I have the following suggestion:

    body .block-form .container { padding: 1em; }
    body .block-form .close { margin-bottom: 1em }
    body .block-form textarea { height: 120px !important; }
    Thread Starter ehtonio

    (@ehtonio)

    Hi threadi,

    Thank you for following up. I really appreciate it.

    Yes indeed it was done buy an agency but i would like to learn to do small changes by myself.

    Sounds good I can try your suggestion.

    Can you tell me how I shall proceed for that change?

    Thanks a lot,

    Best,

    Antoine

    You would have to insert this CSS code in a place that allows you to make such individual adjustments. Unfortunately, you have a customized theme, so I don’t know where the best place is.

    With classic themes, it can be found under Appearance > Customizer > Additional CSS.

    For block themes, it is under Appearance > Editor > Styles > Additional Styles (option on top right).

    Alternatively, you can also use an extra plugin for this or adjust the style.css of the theme, although the latter is dangerous if there is an update from your developer.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce form field size’ is closed to new replies.