Okay
  Public Ticket #1078484
Reduce size of contact form
Closed

Comments

  • Marshall started the conversation

    Hi,

    I want to reduce the size of the contact form so that it fits above the fold on my screen (MacBook).

    How do I do this?

    Thanks

  •  1,593
    Barry replied

    Hi Marshall,

    You can use the Bootstrap columns to add the input fields into 2 columns for 1 row. So the height of the forms will be smaller. And maybe some CSS to reduce the height of the input fields.

    You can use the grid columns on the following way:

    <div class="row">
        <div class="col-xs-12 col-md-6">
            // Name input field
        </div>
        <div class="col-xs-12 col-md-6">
            // Friend's name input field
        </div>
        <div class="col-xs-12 col-md-6">
            // Email input field
        </div>
        <div class="col-xs-12 col-md-6">
            // Friend's email input field
        </div>
        <div class="col-xs-12 col-md-12">
            // Friend's phone input field
        </div>
        <div class="col-xs-12 col-md-12">
            // Message textarea
        </div>
    </div>
    

    To reduce the height of the input fields you can use the following CSS. Please add it via Appearance > Customize > Theme Options > Custom CSS:

    .wpcf7-text, .wpcf7-textarea, .wpcf7-select { padding: 10px 20px; }
    

    Please let me know if this fit your needs

    Best regards,
    Barry
    QreativeThemes.com  |  WordPress Themes