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