How to add clickable icons to custom contact form to use for option selection

  • Author
  • #1504615


    I want to add icons to a RSVP custom form I am using on our wedding blog. Idea is to have icon of a cow and carrot so guests can confirm their meat/vegetarian menu options by clicking on these icons, rather than the typical radio button in the standard form.
    Is this possible?


    The blog I need help with is


    I’ve tried several things and have not been able to add anything after “Meat” or “Vegetarian”. I’m not giving up on it though. :)


    Thanks thesacredpath! your help is appreciated!


    hi have you been able to get any further with adding clickable icons in a rsvp form?


    I gave this a try. It’s pretty tricky, and I think you *might* be able to get it to work if you remove the text from the radio button form fields.

    Note that this example uses the only fields that are radio buttons. If you could get this to work, then you could change the yes/no to a dropdown and use radio buttons for the “Meat or vegetarian?” question. {
    	content: " ";
    	display: block;
    	padding-right: 64px;
    	min-height: 32px;
    }[value="Yes"]:after {
    	background: url( 20px 0 no-repeat;
    }[value="No"]:after {
    	background: url( 20px 0 no-repeat;

    There might be a better way to do this that I’m not thinking of, but it turned out to be a tougher request than I thought it would be!

The topic ‘How to add clickable icons to custom contact form to use for option selection’ is closed to new replies.