Need help? Check out our Support site, then


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

  1. lezanneandgideon
    Member

    Hi

    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?

    Thanks

    The blog I need help with is thekretschmers.com.

  2. 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. :)

  3. lezanneandgideon
    Member

    Thanks thesacredpath! your help is appreciated!

  4. lezanneandgideon
    Member

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

  5. 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.

    input.radio:after {
    	content: " ";
    	display: block;
    	padding-right: 64px;
    	min-height: 32px;
    }
    input.radio[value="Yes"]:after {
    	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) 20px 0 no-repeat;
    }
    input.radio[value="No"]:after {
    	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32.png) 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!

Topic Closed

This topic has been closed to new replies.

About this Topic