Bootstrap Contact Form 7 not clickable

Question

I am having troubles with my theme`s Contact Form 7, when I try to hover on the clickable items [name, email, phone], they are not clickable. This is not true for the message body, where I can type my message. The odd thing is that those boxes work in the mobile version.

I have highlithed the boxes that cannot be clicked

Any ideas?

<div class="contact-con">
<div class="contact_form mb-0" data-aos="fade-up">
        <div class="row">
            <div class="col-12">
                <ul class="list-unstyled mb-0">
                    <li class="">
                        <div class="form-group float-left small_box position-relative">
                            [text fname class:form_style id:fname placeholder "First Name"]
                        </div>
                    </li>
                    <li class="">
                        <div class="form-group float-left position-relative">
                            [text lname class:form_style id:lname placeholder "Last Name"]
                        </div>
                    </li>
                    <li class="">
                        <div class="form-group float-left small_box position-relative">
                            [email* email class:form_style id:email placeholder "Email"]
                        </div>
                    </li> 
                    <li class="">
                        <div class="form-group float-left position-relative">
                            [tel phone class:form_style id:phone placeholder "Phone"]
                        </div>
                    </li>
                    <li class="">
                        <div class=" message">
                            [textarea msg class:form_style class:w-100 id:msg placeholder "Message"]
                        </div>
                    </li>
                    <li class="button">
                        <div class="manage-button">
                            <button type="submit" id="submit" class="submit_now text-white text-    decoration-none">Submit<i class="fa-solid fa-arrow-right"></i></button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>  
    </div>
</div>

I actually do not know what to modify as it looks all good to me

Without being able to test this, the float property might be causing this. Also, Please do not use floats for layout. There are better methods now including flexbox and CSS Grid - and BS5 has them built in. Remove all the float-left classes to test. — disinfor
– disinfor, Commented Oct 30, 2024 at 15:15
The problem is you used <button type="submit"> instead of the CF7 Form Tag [submit] — Howard E
– Howard E, Commented Nov 10, 2024 at 13:40

gael · Accepted Answer · 2024-10-30 16:35:25Z

2

I was able to reproduce the problem which is due to wp cf7 stylesheet.

The plugin adds a container to the fields with the wpcf7-form-control-wrap class with the position relative attribute that make the textarea container overlap the whole form.

To solve this, you can add this css to your theme styles or even in wp Appearance > Customize > Additional CSS.

.wpcf7-form-control-wrap {
  position: static;
}

answered Oct 30, 2024 at 16:35

gael

1,5012 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antonello Nistoro Over a year ago

Thank you so much!!! That worked, appreciate the help!

Collectives™ on Stack Overflow

Bootstrap Contact Form 7 not clickable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related