Align contact-form field with button (horizontal)

[martytb]

Hi there,

on the bottom of my homepage (work-in-process project) I have Contact Form 7 form with a call back request.
See here: https://imgur.com/GUCQ5xP
The temp URL is: https://pno.rotsoord3.nl/

This is the code in the form:
<span style="display:inline-block;width:50%;">[tel* tel-256 placeholder "Telefoonnummer"]</span><span style="display:inline-block;width:2%;"></span><span style="display:inline-block;width:30%;">[submit "Bel me terug"]</span>

I can’t get the button and the field to align. Any help would be really welcome!

Thanks in advance!
Regards

[jade]

Hi @martytb,

It seems that you have the fields shortcodes wrapped in span tag so kindly add vertical-align: top; to the span tag that contains the submit button’s inline CSS.

Then add this code to the Global CSS:

.wpcf7 .ajax-loader {
    position: absolute;
    right: 0px;
    margin: 0;
}

Hope this helps.

[martytb]

Thanks! I was just about to edit my original post because the form-code wasn’t displayed correctly - but you already had a solution :o

One more question though, the input field and the button seem to have a different height. Any quick way to fix this?

Thanks again!

[jade]

Hey @martytb,

Please add this code as well:

.wpcf7-form .wpcf7-submit {
    max-height: 53px;
}

Hope this helps.

[martytb]

It did! Thanks a bunch

Have a nice day you guys!

[christian]

You’re welcome and have a nice day too.