Contact form fields are messed up

  • Resolved joindm

    (@joindm)


    3 years, 1 month ago

    I have a contact form on my website, if you scroll down it’s the one next to the image of the electrician right under “Book a consultation now” As you can see it looks a little weird, I want the name & email to be next to each other then the other fields & submit button right below it like a typical contact form. But for some reason it’s doing this. I do have a code applied to another form thats at the hero section. If you scroll to the top you will see where I applied code to get inline fields. the code is:

    @media only screen and (min-width:783px) {
    .forminator-row {
    float:left;
    -webkit-float:left;
    padding-right:20px;
    }
    .forminator-ui#forminator-module-458.forminator-design–default .forminator-button-submit {
    margin-top:20px;
    }
    }

    Could that be the problem & it’s effecting my other form? If so how can I fix this? Thanks.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    3 years, 1 month ago

    Hi @joindm

    Hope you are doing fine!

    Effectively, the CSS code is getting applied to all the forms and causing the fields to be placed together. You’ll need to specify the first block of the code to be applied just to the form 458. Replace the code above from the next block of code.

    @media only screen and (min-width:783px) {
.forminator-ui#forminator-module-458.forminator-design–default .forminator-row {
float:left;
-webkit-float:left;
padding-right:20px;
}
.forminator-ui#forminator-module-458.forminator-design–default .forminator-button-submit {
margin-top:20px;
}
}

    Please perform the suggested change and let know if you get the expected results

    Kind regards

    Luis

    Thread Starter joindm

    (@joindm)

    3 years, 1 month ago

    Thanks for your response, so when I input the new code it does fix the contact fourm, but it messes up the inline contact fourm at the top. It puts the submit button on the second line instead of aligned with the other fields.

    Plugin Support Dmytro – WPMU DEV Support

    (@wpmudevsupport16)

    3 years, 1 month ago

    Hello @joindm,

    Adding max-width rule should help making the elements fit in one line.
    For instance, you can try something like:

    @media only screen and (min-width:783px) {
.forminator-ui#forminator-module-458.forminator-design–default .forminator-row {
max-width: 89%;
float:left;
-webkit-float:left;
padding-right:20px;
}
.forminator-ui#forminator-module-458.forminator-design–default .forminator-button-submit {
margin-top:20px;
}
}

    Let us know if there’s still any issue.

    Best Regards,
    Dmytro

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    3 years, 1 month ago

    Hello @joindm ,

    We haven’t heard from you for 4 days now, so it looks like there are no more questions for us.
    
    Feel free to re-open this ticket if needed.

    Kind regards
    Kasia

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

The topic ‘Contact form fields are messed up’ is closed to new replies.