Everyone knows that creating rich interesting content is what attracts new readers and keeps your old ones coming back. Valuable information that answers a question many people may be looking for is easy to insert in a blog post, video, or other types of media, but getting people to interact with that content can be difficult with limited computer skills. Here is an example of how through the utilization of forms, you can add another element to your blog posts and provide your readers with even more info in a quick and concise manner, while having them spend more time on your site.  If you are unfamiliar with coding, do not worry, we will walk you through the steps of creating this form with our example on how it could be used to greatly enhance a simple blog post.

How To Create A Form Calculator

Creating a calculator using a form in html is very simple and there are only a few elements that you will need to know. Here is a brief description of what these elements are along with their functions.:

<form></form> This is the code that will create the form for you to use. You will want to name your form as well as describe what should happen when the information is entered in the form (oninput).

Oninput This is where you will place the main formula for your calculator. When data is input into the form, this area describes what will be done with that data.

Input The input is the information that the user types into the form and the area in which they can type. In our case with calculators, we would set the type as a value (type=“value”) and can determine the amount of decimal spaces using step (step=“0.01”). Have text already in the input area using placeholder (placeholder=“TYPE HERE”)

Output This is what information you are returning to the user based on what they entered into the form. You also can set the type, step and placeholder text.

These are the basic coding elements to creating a calculator by using an html form.

Styling the form and adding other common elements to get it to look how you want. You will get a better understanding of how the forms work with our example below. It will show you how to combine these codes into a calculator form built perfectly for your blog.

Example

Lets say you run a crafts blog that always has new projects for your readers and your latest post is about how to create a flowerbed in the shape of a trapezoid. Your readers can build the trapezoid in the size they need to fit their yard and then fill it with the amount of soil that they need when they are done. When you are suggesting how much soil they will need, you could post the formula for surface area of a trapezoid directly into your blog post like this –

A = 1/2(b1 + b2)h = 1/2 * sum of bases * height

Working through this formula may be difficult for some people. This will have readers leaving your blog in search for information that is easier to understand.

The other option is to build an easy to use calculator right into your post like the one below:

Base 1:

Base 2:

Height:;

Sq Ft of Soil:

This allows your readers to only have to take three measurements of their flowerbed to determine how much sold they will need, instead of having to try and work out that difficult formula themselves or looking for another helpful blog.

Here is the coding for the calculator form above:

Calc Form Code

 

Code Breakdown

As you can see, there are not too many lines of code and it can be easily understood by comparing it to the actual form above. Lets break down what each line of code means.

Line 1 – <form name=”form” oninput=”soil.value = .5*((+b1.value) + (+b2.value))*(h.value)”>

This is where the form is created using <form>. The name=“form” simply means that the calculator form is named “form”. Next you have the oninput which as described above, tells you what is displayed when data is put into the form. The oninput is where we have the formula for surface area or where you would enter the formula for any calculation you are looking to use.

.5*((+b1.value) + (+b2.value))*(h.value) = A = 1/2(b1 + b2)h = 1/2 * sum of bases * height

You will see in the next lines how the names of each element (b1, b1, h, soil) are used in the formula above.

Line 2 – <b>Base 1:</b> <input name=”b1″ type=”value” step=”0.01″ >

Here is where our first input box is created. The text “Base 1:” is bolded with the <b> tag and the <input> appears after. As you can see, the first inout is named “b1” it has a type of “value” meaning numbers should be entered here, and the step of 0.01 is the amount of decimal places that can be entered.

Line 3 – <b>Base 2:</b> <input name=”b2″ type=”value” step=”0.01″ >

This is the same as the previous line.

Line 4 – <b>Height:</b>;<input name=”h” type=”value” step=“0.01″>

Again, this is another input box area.

Line 5 – <b>Sq Ft of Soil: <output name=”soil” type=”value” ></output> </b>

Here is where the output is displayed. It has same naming and type as the other areas and the <b> tag encompasses the output, meaning it will be displayed in bold.

Line 6 – </font>

This is to close the code and create the form.

Styling Your Form

Now that you understand what you need to create a calculator, you will want to style it to better suit the design of your blog. Here are some of the common and easy to use styling elements, just add style=“” to the input code. Inside the parentheses, you will enter the styling element you want, followed by a colon (:), and then the descriptor followed by a semi-colon(;).

Height: 50px; – The height of the input box will be 50 pixels.

Width: 30px; – The width of the input box will be 30 pixels.

text-align: center; – The text will be centered, you can also use “left”, “right”, and others.

Example: <b>Base 1:</b> <input name=”b1″ type=”value” step=“0.01″ style=“Height: 50px; Width: 30px; ext-align: center;” >

Here is another example of the same form but with some styling elements added in:

<form name=”form” oninput=”soil.value = .5*((+b1.value) + (+b2.value))*(h.value)”>

<b>Base 1:</b> <input name=”b1″ type=”value” step=”0.01″ style=”WIDTH: 40px; HEIGHT: 40px; text-align:center;”>

<b>Base 2:</b> <input name=”b2″ type=”value” step=”0.01″ style=”WIDTH: 40px; HEIGHT: 40px; text-align:center;”>

<b>Height:</b>;<input name=”h” type=”value” step=“0.01″ style=”WIDTH: 40px; HEIGHT: 40px; text-align:center;”>

<font color=”be0b29″><b>Sq Ft of Soil: <output name=”soil” type=”value” ></output> </b></font>

</form>

 

Click Here and paste the form code above between the <body> </body>  codes in the html area to mess around with the code to get a better understanding of how to style your calculator.

Here you can find some other styling elements to help you build a calculator that is perfect for your blog. Using CSS to style your forms is another excellent option for getting them to fit the theme of your site perfectly.

Using this html form code will enhance the content of your blog post and allow for more success. Making the content interactive will have readers staying on your posts longer and not looking elsewhere to get the info they want. Getting creative with this technique can lead to some overall better quality content without having the knowledge of an experienced coder. Honing this technique is a good first step toward understanding how coding works and continuing to build on your knowledge in this area.