timhuk

I figured out how to solve this issue by using the feature Selectable recipient with pipes to generate my labels.

Originally I was using a standard <label></label> tag to create the labels for my radio buttons. However this separates the label from the radio so that CSS can’t see a link between a input[type="radio"]:checked and its label.

By using the Selectable recipient with pipes technique I can now style a selected label as follows.

CF7 Form:
[radio question-01 "Label for option 1|1"]
[radio question-01 "Label for option 2|2"]

CSS:
input[type=radio]:checked + .wpcf7-list-item-label {
    background-color: #bfb;
    border-color: #4c4;
}

Example here

Hi @daxinigaurav,
Thanks for your prompt reply!

Unfortunately I can’t get your code to work – maybe I implemented it wrong? I added your code to my page between <script></script> tags and also added:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script&gt;
Should I do anything else?

From your description, I’m looking for something a little different. All I was to do is display a warning to the user that some values are duplicates and then allow them to correct the dup values (with needing to refresh the page).

Thanks

I have created a 2nd sample page. Here I am showing some radio buttons created manually with HTML code and also some radio buttons created with CF7. All of the buttons are styled with the same CSS.

You will see that the top set of button labels change their style when selected.

How can I do the same with the CF7 radios and labels?

https://splinedesign.co.uk/wp/test/

Thanks for your prompt replies Takayuki-san,

How would you suggest I change my CSS (or the form) to style the labels or checked radios?

My main site is still changing, but here is my sandbox form:

https://splinedesign.co.uk/wp/assessment/

As you can see on “Step 2” the radio buttons show a different color on mouseover but I need them to also show a different style when checked.

• This reply was modified 2 years, 10 months ago by timhuk.

Great. Many thanks for your help!

OK. Thanks for your prompt reply

Many thanks for you kind help

Thank you for your prompt and helpful reply.

Is it possible to pass the booking details to a Google calendar? Do you have some information for sync’ing with Google calendar?

Thank You

The only way I could find to solve this was to use visibility:hidden; instead of display:none; for all except 1 of the gallery <div>s. In this way the galleries initiate properly, and then I use javascript to display 1 gallery at a time.

I realize this is not very efficient because when loading the page it loads ALL of the galleries (all required thumbnails) even though most of them are hidden. However this was the only way I could find to solve this.

(BTW, I have left “Gallery4 / Menu4” to show the original problem, just in case some smart person knows a more efficient way of solving this)

Here’s the code I’m using:

HTML:

    <div class="buttons">
    <ul>
      <li><a href="#" onclick="toggleVisibility('Menu1');">Gallery 1</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu2');">Gallery 2</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu3');">Gallery 3</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu4');">Gallery 4</a></li>
    </ul>
    <center>
      <div class="gallery" id="Menu1">[foogallery id="356"]</div>
      <div class="gallery" id="Menu2" style="visibility: hidden;">[foogallery id="357"]
    </div>
      <div class="gallery" id="Menu3" style="visibility: hidden;">[foogallery id="356"]
    </div>
      <div class="gallery" id="Menu4" style="display: none;">[foogallery id="357"]
    </div>
    </center>

JAVASCRIPT:

    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        //visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
          div.style.visibility = "visible";
    
        } else {
          div.style.display = "none";
        }
      }
    }

I have since found that the 2 bits of CSS I needed were as follows. I assume something in the Sydney theme had upset these.

tr.checkbox {
display: table-row !important;
}
.checkbox .helptext {
display: block;
float: left;
}

Many thanks for prompt reply, and sorry I forgot to include the link. This is the page I’m trying to style:

https://justbigsmiles.co.uk/wp/update-your-wedding-information/?pid=QDZLX

Notice the penultimate row (title = Testimonial) has its help text very squashed. Please let me know if there’s a quick fix for this.

Thanks for the bootstrap template info. I will also give that a go.

Regards

Great information. Works perfectly.

Many thanks Nickolas!!

[wordpress_file_upload_browser sortable=”false” pagination=”false” bulkactions=”false” browserrole=”all,guests” browseruser=”all,guests” candownload=”true” candelete=”true” columns=”file:s/File,date:n/Upload Date,custom1:/Renewal Date” userfilter=”all,guests” postfilter=”current” inctitle=”# ” datetitle=”Uploaded” downloadlabel=”??” deletelabel=” “]

https://responsiblelandlord.co.uk/wp/?page_id=27