Hide radio buttons and use images in landscape on a form

Hi

I'm hoping someone can help me - and it's probably (or at least i think it is) some css that I need.

I'm wanting to make the form here - http://bez.xcelsupport.com/form/ - to use images like it does for people to click, and get rid of the radio button so they just see the image - BUT, I want the image to be landscape rather than portrait.

Basically, the form will have 4 questions - and I want users to be able to answer each question by clicking the image that best suits their setup.

Any tips? Or any better form builders to do that easier? At the moment, its using GF for it.

Thanks
Farzan

  • Ken Kimbrell

    Hello Farzan-

    You can get this desired result with the use of CSS. If you do not want your users to see the radio button you would want to apply this line of code:

    /***You will need a class here ***/  input[type='radio'] {
    
       display: none;
    
    }

    As you can see, you will need to see if your form allows you to make classes for each form, if so, then you will want to use that class to apply to the CSS style or else if you only put input[type='radio']{display:none} it would hide all radio buttons in every form on your site.

    Now once you get rid of the radio buttons, then how will your users know what they clicked on?

    You can use CSS for that too :slight_smile:

    /***You will need a class here ***/ input[type='radio']:checked + label img {
    
       box-shadow: 10px 10px 8px 0px rgb(104, 209, 39);
    
    }
    
    /***You will need a class here ***/ img:hover {
    
    	cursor:pointer;
    }

    In the form used on their site, the img resides in the label. This line of code would be dependent on where your images are placed in the markup. This will add a green box-shadow around the selected image, that way it is clear to the user that they clicked on the correct image before they hit submit.

    Keep in mind that all three lines of CSS should carry the same class where I said, /***You will need a class here ***/

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Farzan-

    Could you please grant us temporary support access to your website so we can have a better look of your setup and settings? You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Also if you can provide me a current link where the form is located, or possibly set up a demo with all the contents added, e.g., images, radio buttons, etc.. I can look into it further for you :slight_smile:

    We'll wait for your confirmation reply here, as we don't get any notification when a member is granting us support access. We could then dig in and further investigate this!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Farzan-

    I have provided an example of what you could do on the demo form, you can find a link below:

    DEMO FORM

    The CSS code resides in the Add Custom CSS plugin you have installed. You can find this on the subsite's dashboard in the left pane you will see { } Add Custom CSS.

    As for the landscape of images. This really depends on the image itself. Right now the image is only 315 x 309. By uploading a different image that is wider, it would be applied in more of a landscape look. If you could upload the images you are looking to use on the form, I could look into that more. Because this image is a circle, i set a border radius to 100%, this is just because it makes the box-shadow wrap around like a circle, if you were to use a square image, then border-radius would not be necessary.

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Farzan Ahmed

    Thanks Ken

    That worked a treat - I ended up just copying and pasting the code again for the rest of the questions on there.

    Finally on this one, is there a way to make that question font size larger?

    I've tried this

    #gfield_label{
    font-size: 16px;
    }

    but it did nothing.

    Thanks
    Farzan

    PS: I need to try to add an image in to the header in there as well - do I need to open a new support ticket for that?

  • Ken Kimbrell

    Hello Farzan-

    Try this line of code to change the size of the labels:

    #top label {
    
        font-weight: bold;
        font-size: 2em;
        margin-bottom: 20px;
    
    }

    This will change the sizes across all labels, so no need to apply the code multiple times with different ids. I see some of your images are more square but still have the border radius style on it, did you like the effect? Or would your prefer for square images to have a square box-shadow?

    Let me know how I can help :slight_smile:

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Farzan-

    I changed it to a more square and subtle effect for you. Seems to be more universal with what you are trying to accomplish.

    Also, is there a way to get another image in the whitespace in the header - between the logo and the menu?

    Unfortunately with the current theme you are using, I did not see an option to add an additional widget or any content for that matter and append it to the header. This would have to be done with creating a CHILD THEME

    Then Modifying the header to allow you to add a menu, and potentially java script in order to scale the image once the menu header gets sticky. Or, it is possible to use their ID and attach it to the image you want to add and it should scale the image as it does in the header. You have some serious real estate there. I would certainly consider putting a call to action there, adsense, promotional content, etc..

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support