Contact Form 7 – Responsive Checkboxes

Looks like you’ve solved your problem with:

span.wpcf7-list-item {
    display: block;
}

??
in https://www.peasandpeanutsphotography.com/wp-content/uploads/pp/static/1412011119_style.css??

I am having problems with my contact form.

I am asking for questions to be answered by drop down responses, but that information is not getting emailed to me. Just their name and email address.

What am I doing wrong?

Appreciate any feedback.

@buzztone, that line of code takes the checkboxes and radio buttons on the desktop site and stacks them, rather than listing them all on one line.

However, on mobile, the checkboxes aren’t on the same line as their respective text. You’d think this code would fix it, but it’s not fixing it. Check on your smartphone and you’ll see what it looks like, kind of like this

[ ]
option 1
[ ]
option 2
[ ]
option 3

unfortunately I can’t provide a screenshot.

Still looking for some code– maybe it needs to be tailored to media query? thanks!

@realtorfrances

As per the Forum Welcome, please post your own topic.

Posting in an existing topic prevents being able to track issues by topic.

@jboepple

.wpcf7-list-item is the most relevant class in this case.

But I’d also have a look at your styling of .wpcf7-form. That looks be unresponsive and could be contributing to your styling issues.

I also have the same problem
https://clients.emagid.com/pier36v2/feedback/

If you open that link on your phone, my checkboxes overlap the texts next to it (as if the width is too small). However, on my chrome browser, using the iphone4 emulator, it looks perfectly fine.
Is this an ‘iphone’ thing? My coworker told me that it’s because iPhone automatically does that

P.S: Also notice how the ‘Submit’ button has a radius and is styled differently than the Clear button. I didn’t style it that way. I only put background color to black. Also the checkboxes look different on mobile.

Anyone has a solution to this problem?

Oh and additionally, I tried filling out everything, but there’s never a ‘success’ message – it treats it as if I failed to fill out the form..
Anyone knows why?

@rushingparachutes

RE: Oh and additionally, etc.

As per the Forum Welcome, please post your own topic.

Posting in an existing topic prevents being able to track issues by topic.