rich contact form

(2 posts) (2 voices)

1. 

   FabioQ
   Member

   Hi,
   how can I setup a rich contact form?
   I saw shortcodes but what I want is a rich contact form, for example, I need to put selectable images into the form, or some images with a radiobutton/checkbox under.
   More specific for my case, if a customer want to buy a ticket for the Valencia MotoGP race, I want he to click on the race image before send post, so I can see where he want to go.
   I've attached a pic of what I mean. What I want to know is: Is possible to use [contact_form] to create a rich contact form or I have to use plugin and third-party code?

   Thanks a lot again!
   -FabioQ.

   

   Attachments

   1. hospitality_draft_info.jpg (135.8 KB, 1 downloads) 7 months old

   Posted 7 months ago #
2. 

   Ruderic
   Support

   Hello,

   The feature of adding images instead of radio buttons is obviously out of the box functionality for a contact form. What you can do here, is add your 3 radio buttons as if they were regular ones. Then, apply some jQuery scripts in order to replace the button with your desired image.

   You can learn how to add radio buttons to your form here: http://mysitemyway.com/docs/index.php?title=Contact_Form

   About the jQuery script, you would need to target each of your radio fields individually, and assign new CSS properties to it. For example:

   jQuery(document).ready( function() {
     jQuery('span.radio').first().css('background', 'url("http://website.com/image.png") no-repeat top left');
     jQuery('span.radio:nth-child(3)').css('background', 'url("http://website.com/image.png") no-repeat top left');
   });

   In that case, I targeted the first and third radio buttons. Pay special attention to the URL of your background image, since it has to be a full path.

   Now, in the "Custom CSS" field of the theme options panel, you have to change the height and width of the radio elements, so they can contain your images:

   .mysite_form .radio {
     height: 45px;
     width: 45px;
   }

   Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.