Using CSS to add images to ninjaforms

1.7k views Asked by At

I am trying to modify formatting with CSS in ninja forms. I would like to:

  • Add an icon / image above each answer on radio button questions
  • Allow users to click on that image or the text to select their answer

Can anyone help me with this code? I'm having trouble getting the images to display.

Thanks!

2

There are 2 answers

0
Ryan Lafazan On

The easiest way I have found to place images in radio buttons is to do the following:

  1. Put and html image tag in the label section <img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png">
    • this will simply put an image in the label section.
    • if you want to have a text label as well, you can place it either before or after the image tag and edit it with CSS after. I usually do the following because it is quick and easy: <div><img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png"><br>Button Label 1</div>

Ninja Form Add Image as Radio Button

  1. Next, I add custom CSS to hide the typical radio circle button and create styles for image button selection:

/* NINJA FORM CSS  */

/* Display image buttons inline */
li {
 display: inline-block !important;
}

/* Hide the radio button */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* RADIO BUTTON STYLES */

/* Style radio button images */
label > div > img {
  cursor: pointer;
 max-width: 100px !important;
 max-height: 100px !important;
}

/* Style the text label */
label > div {
 color: blue;
 font-size: .8em;
 text-align: center !important;
}

/* CHECKED STYLES */

/* Outlines Selected Radio Button */
.nf-checked-label {
  outline: 3px solid pink;
}

  • The above CSS should display buttons like this:

enter image description here

1
Amin Kamalinia On

I think this code can solve your problem

function selectInput(id) {

  $("#" + id).prop("checked", true);
}
img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio1')" />
  <input id="radio1" type="radio" name="answer" value="Answer 1" />Answer 1
  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio2')" />
  <input id="radio2" type="radio" name="answer" value="Answer 2" />Answer 2
  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio3')" />
  <input id="radio3" type="radio" name="answer" value="Answer 3" />Answer 3

</div>