Home Web Design CSS Custom Radio Button Survey With CSS and jQuery | Rate Survey Form

Uncategorized

Custom Radio Button Survey With CSS and jQuery | Rate Survey Form

March 30, 2020

3896

How we can create a rating survey form with custom radio buttons? Solution: See this Custom Radio Button Survey With CSS and jQuery, Rate Survey Form.

Previously I have shared some radio input related programs, but there the buttons in a survey. Basically, the radio button is the circular type option button which allows users to choose one option, the selected button has a circle in the middle of the button. And a survey form contains a rating between 1 to 5, the user has to rate the things according to their choice. This program is a survey form, but there the options are custom radio buttons.

Today you will learn to create Rate Survey Form. Basically there is a survey with 5 dummy questions and with 5 rating options, 1 to 5. The options are radio buttons you have to choose one, and the selected button has a colorful border style. The main thing is in the program is custom radio input buttons. There is smooth animation you will select an option by changing the previous one. Also, there is a submit button with a hover effect.

So, Today I am sharing Custom Radio Button Survey With CSS and jQuery. There I have used HTML to create the layout, CSS for styling and animations, jQuery for functioning. The main attraction of this program is custom radio buttons which are placed in a survey form. You can use it as a survey or take the radio buttons CSS code to create your own.

If you are thinking now how this radio buttons survey actually is, then see the preview given below.

Preview Of Rate Survey Form

See this video preview to getting an idea of how these buttons look like.

https://webdevtrick.com/wp-content/uploads/radio-buttons-survery.mp4?_=1

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Custom Radio Button Source Code

Before sharing source code, let’s talk about it. First I have created the main div named container and placed all the elements inside it. I have created a paragraph tag for the question and created div and spans for radio options. The same code I have copy-pasted 5 times because there are 5 survey items. And there is an active class I have placed in radio buttons to show this option is selected. Also, I have put a button for submitting or submit button.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. There I have put custom height, width, and color for styling the radio buttons. The border is playing an important part to create an attractive design.

jQuery handling here only changes the active option on click. There jQuery detecting the click and remove the active class from the previously selected button and put it on the new one. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and third for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Custom Radio Buttons Survey | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">

  <p>1. On a scale of 1 to 5 how cubic are you?</p>
  <div id="s1" class="rb">
    <div class="tab activeTab" data-value="1">
      <div class="spot">
        <span class="txt">1</span>
      </div>
    </div><div class="tab" data-value="2">
      <div class="spot">
        <span class="txt">2</span>
      </div>
    </div><div class="tab" data-value="3">
      <div class="spot">
        <span class="txt">3</span>
      </div>
    </div><div class="tab" data-value="4">
      <div class="spot">
        <span class="txt">4</span>
      </div>
    </div><div class="tab" data-value="5">
      <div class="spot">
        <span class="txt">5</span>
      </div>
    </div>
  </div>

  <p>2. On a scale of 1 to 5 how would you rate the universe?</p>
  <div id="s2" class="rb">
    <div class="tab" data-value="1">
      <div class="spot">
        <span class="txt">1</span>
      </div>
    </div><div class="tab activeTab" data-value="2">
      <div class="spot">
        <span class="txt">2</span>
      </div>
    </div><div class="tab" data-value="3">
      <div class="spot">
        <span class="txt">3</span>
      </div>
    </div><div class="tab" data-value="4">
      <div class="spot">
        <span class="txt">4</span>
      </div>
    </div><div class="tab" data-value="5">
      <div class="spot">
        <span class="txt">5</span>
      </div>
    </div>
  </div>

  <p>3. On a scale of 1 to 5 how much do you like stalactites?</p>
  <div id="s3" class="rb">
    <div class="tab" data-value="1">
      <div class="spot">
        <span class="txt">1</span>
      </div>
    </div><div class="tab" data-value="2">
      <div class="spot">
        <span class="txt">2</span>
      </div>
    </div><div class="tab activeTab" data-value="3">
      <div class="spot">
        <span class="txt">3</span>
      </div>
    </div><div class="tab" data-value="4">
      <div class="spot">
        <span class="txt">4</span>
      </div>
    </div><div class="tab" data-value="5">
      <div class="spot">
        <span class="txt">5</span>
      </div>
    </div>
  </div>

  <p>4. On a scale of 1 to 5 what is your favorite color in the alphabet?</p>
  <div id="s4" class="rb">
    <div class="tab" data-value="1">
      <div class="spot">
        <span class="txt">1</span>
      </div>
    </div><div class="tab" data-value="2">
      <div class="spot">
        <span class="txt">2</span>
      </div>
    </div><div class="tab" data-value="3">
      <div class="spot">
        <span class="txt">3</span>
      </div>
    </div><div class="tab activeTab" data-value="4">
      <div class="spot">
        <span class="txt">4</span>
      </div>
    </div><div class="tab" data-value="5">
      <div class="spot">
        <span class="txt">5</span>
      </div>
    </div>
  </div>

  <p>5. On a scale of one to shrimp, how random are you?</p>
  <div id="s5" class="rb">
    <div class="tab" data-value="1">
      <div class="spot">
        <span class="txt">1</span>
      </div>
    </div><div class="tab" data-value="2">
      <div class="spot">
        <span class="txt">2</span>
      </div>
    </div><div class="tab" data-value="3">
      <div class="spot">
        <span class="txt">3</span>
      </div>
    </div><div class="tab" data-value="4">
      <div class="spot">
        <span class="txt">4</span>
      </div>
    </div><div class="tab activeTab" data-value="5">
      <div class="spot">
        <span class="txt">5</span>
      </div>
    </div>
  </div>

  <div class="button-box">
    <button class="button trigger">Submit!</button>
  </div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!DOCTYPE html>

<head>

<title>jQuery Custom Radio Buttons Survey | Webdevtrick.com</title>

</head>

<body>

<p>1. On a scale of 1 to 5 how cubic are you?</p>

</div>

</div><div class="tab" data-value="2">

</div>

</div><div class="tab" data-value="3">

</div>

</div><div class="tab" data-value="4">

</div>

</div><div class="tab" data-value="5">

</div>

<p>2. On a scale of 1 to 5 how would you rate the universe?</p>

</div>

</div><div class="tab activeTab" data-value="2">

</div>

</div><div class="tab" data-value="3">

</div>

</div><div class="tab" data-value="4">

</div>

</div><div class="tab" data-value="5">

</div>

<p>3. On a scale of 1 to 5 how much do you like stalactites?</p>

</div>

</div><div class="tab" data-value="2">

</div>

</div><div class="tab activeTab" data-value="3">

</div>

</div><div class="tab" data-value="4">

</div>

</div><div class="tab" data-value="5">

</div>

<p>4. On a scale of 1 to 5 what is your favorite color in the alphabet?</p>

</div>

</div><div class="tab" data-value="2">

</div>

</div><div class="tab" data-value="3">

</div>

</div><div class="tab activeTab" data-value="4">

</div>

</div><div class="tab" data-value="5">

</div>

<p>5. On a scale of one to shrimp, how random are you?</p>

</div>

</div><div class="tab" data-value="2">

</div>

</div><div class="tab" data-value="3">

</div>

</div><div class="tab" data-value="4">

</div>

</div><div class="tab activeTab" data-value="5">

</div>

<button class="button trigger">Submit!</button>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html, body {
  min-height: 100%;
}

body {
  font-family: sans-serif;
  background: #f3f3f3;
  color: rgba(255,255,255,.5);
}

.container {
  width: 80%;
  max-width: 420px;
  margin: 50px auto;
  padding: 1.3em;
  background: #20253d;
  border-radius: .75em;
}
p {
  font-size: .9em;
}

.rb {
  height: 50px;
  line-height: 38px;
  text-align: center;
  background: rgba(255,255,255,.03);
  border-radius: .3em;
}

.tab {
  display: inline-block;
  position: relative;
  width: 20%;
  font-size: 40px;
}

.txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .5em;
  color: #FFFFFF;
}

.spot {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 100%;
  cursor: pointer;
  transition: ease .5s;
}

.activeTab .spot {
  background: rgba(0,0,0,.35);
  border: 2px solid rgb(253,0,51, 0.6);
}

.button-box {
  padding: 10px 0;
  text-align: center;
}

button {
  display: inline-block;
  width: 80%;
  margin-top: 1.2em;
  padding: 1em;
  max-width: 220px;
  font-size: .9em;
  color: #fd0033;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .15em;
  background: white;
  border: none;
  outline: none;
  border-radius: 5em;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.3);
  transition: 
    color 0.6s, 
    box-shadow 0.3s, 
    transform 0.3s;
  cursor: pointer;
}

button:hover {
  box-shadow: 0 3px 5px -5px rgba(0, 0, 0, 0.3);
  color: #fff;
  background-color: #fd0033;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html, body {

min-height: 100%;

}

body {

font-family: sans-serif;

background: #f3f3f3;

color: rgba(255,255,255,.5);

}

.container {

width: 80%;

max-width: 420px;

margin: 50px auto;

padding: 1.3em;

background: #20253d;

border-radius: .75em;

}

p {

font-size: .9em;

}

.rb {

height: 50px;

line-height: 38px;

text-align: center;

background: rgba(255,255,255,.03);

border-radius: .3em;

}

.tab {

display: inline-block;

position: relative;

width: 20%;

font-size: 40px;

}

.txt {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: .5em;

color: #FFFFFF;

}

.spot {

position: absolute;

width: 35px;

height: 35px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: transparent;

border: 2px solid rgba(255,255,255,.3);

border-radius: 100%;

cursor: pointer;

transition: ease .5s;

}

.activeTab .spot {

background: rgba(0,0,0,.35);

border: 2px solid rgb(253,0,51, 0.6);

}

.button-box {

padding: 10px 0;

text-align: center;

}

button {

display: inline-block;

width: 80%;

margin-top: 1.2em;

padding: 1em;

max-width: 220px;

font-size: .9em;

color: #fd0033;

text-transform: uppercase;

text-decoration: none;

letter-spacing: .15em;

background: white;

border: none;

outline: none;

border-radius: 5em;

box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.3);

transition:

color 0.6s,

box-shadow 0.3s,

transform 0.3s;

cursor: pointer;

}

button:hover {

box-shadow: 0 3px 5px -5px rgba(0, 0, 0, 0.3);

color: #fff;

background-color: #fd0033;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
//Switcher function:
$(".tab").click(function(){
  //Spot switcher:
  $(this).parent().find(".tab").removeClass("activeTab");
  $(this).addClass("activeTab");
});

// Code By Webdevtrick ( https://webdevtrick.com )

//Switcher function:

$(".tab").click(function(){

//Spot switcher:

$(this).parent().find(".tab").removeClass("activeTab");

$(this).addClass("activeTab");

});

That’s It. Now you have successfully created Custom Radio Button Survey With CSS and jQuery, Rate Survey Form. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.