Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

The drop-down field works on all the browsers except mobile devices:

<div class="col-sm-12">
  <label>
    <span style="color: #ffffff;"> How did you hear about us?</span>
  </label>
</div>
<div class="col-sm-6">
  <label style="display: inherit;">
    <span style="color: #ffffff;">
      [select* how-did-you-hear-about-us id:hear-about-us first_as_label "Select your option" "Search Engine" "Direct Mail" "Auction" "Referral" "Other:"]
    </span>
  </label>
</div>  
<div class="col-sm-6">
  [text* specified-hear-about-us  placeholder "Please specify selection:"]
</div>

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

The drop-down field works on all the browsers except mobile devices:

<div class="col-sm-12">
  <label>
    <span style="color: #ffffff;"> How did you hear about us?</span>
  </label>
</div>
<div class="col-sm-6">
  <label style="display: inherit;">
    <span style="color: #ffffff;">
      [select* how-did-you-hear-about-us id:hear-about-us first_as_label "Select your option" "Search Engine" "Direct Mail" "Auction" "Referral" "Other:"]
    </span>
  </label>
</div>  
<div class="col-sm-6">
  [text* specified-hear-about-us  placeholder "Please specify selection:"]
</div>

• plugin-contact-form-7

Share Improve this question edited Nov 26, 2019 at 16:27 Aurovrata 1,3461111 silver badges1818 bronze badges asked Nov 3, 2017 at 16:15 Eliel DiazEliel Diaz 1122 bronze badges 3

• what is it doing on mobile devices that you don't like? – rudtek Commented Nov 3, 2017 at 16:44
• The drop-down button doesn't work. Clicking on the button on a mobile device doesn't drop down like on a desktop browser. – Eliel Diaz Commented Nov 6, 2017 at 15:58
• Sample: "Select your option:" Link: costex/new-customer-inquiry-form-test – Eliel Diaz Commented Nov 6, 2017 at 16:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you're looking to build responsive Contact Form 7 with a rich grid-layout (multiple-column layout) I would recommend you look at the Smart Grid-Lyout Extension for Contact form 7 plugin.

It has a UI editor that allows you to design a grid layout for your form fields.

In addition, it has the ability to turn dropdown fields into beautiful jquery select2 fields which are much more mobile-friendly as they don't need to scroll down long lists to select an option. Simply built your dropdown tag with the additional select2 class to convert them,

[select* how-did-you-hear-about-us id:hear-about-us class:select2 first_as_label "Select your option" "Search Engine" "Direct Mail" "Auction" "Referral" "Other:"]