CODEWITHSUNDEEP
wordpresscss-floatcontact-form-7
Barbara D.
Barbara D.

Reputation: 23

WP - Contact form 7 - Input & Btn next to each other

here my website I´m working on: http://www.whatsahoy.com/

My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be in the middle.

Can somebody help me please?! Thank you very much! Barbara

Upvotes: 1

Views: 6874

Answers (2)

Ameeq khan
Ameeq khan

Reputation: 31

.wpcf7-form-control-wrap {
display: inline-block !important;
     margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
    
    display: flex !important;
    justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
    border-radius:0px !important;
    width: 30%;
}

@media only screen and (min-width: 50px) and (max-width: 600px)  {

div#wpcf7-f698-p10-o1 {
    width: 130%;
}

@media only screen and (min-width: 50px) and (max-width: 600px)  {

input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    width: 235px;
    }
    form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
    display: flex !important;
    
 padding-right: 70px;
}}

Upvotes: 1

Axel
Axel

Reputation: 431

To provide you with the best solution, it would be helpful to see the source code of your form. The <br> is probably in there somewhere. However, here is my reply based on what I can see. If it does not help, I suggest you update your question.

Adding the following styles to your custom CSS will put the field and button next to eachother until screen width of 767px.

.wpcf7-form p {
    display: inline-block;
    width: 470px;
    max-width: 95%;
}

.wpcf7-form p br {
    display: none;
}

If you would like them next to eachother on smaller screens, you could change the width of the frame. This changes on 767px as set by your theme. I'm not sure this will not have an undesired effect elsewhere on your site, but you could try.

@media only screen and ( max-width: 767px ) {
    .et_pb_row {
        width: 600px;
    }
}

However, it then will be crippled on screens as from 600px. It may be better to make the text field smaller then...

@media only screen and ( max-width: 600px ) {
    .wpcf7 input {
        max-width: 50%;
    }
}

You might want to fine tune this a bit, but I hope you get the idea. GL!

Upvotes: 3

Related Questions