Effortlessly Embedding HTML Forms in Confluence Pages

Introduction

A customer called with the following problem

“Hi Idalko

I need to create a very simple form which collects some data from the user, do some calculation on it and show the result in the same page.
Is this possible in Confluence?”

The customer was wondering how to create an HTML form in Confluence. We thought that this problem might be faced by some of you, so we wanted to share our solution.

Solution

It is pretty simple, but you should install the HTML add-on of bob swift (just to be sure that not anybody can inject JavaScript on pages)

Add the macro and put the following code in

<!DOCTYPE html>
<html>
<head>
</head>
 
<body>
 
 
 
<form>
    <p>
        <select id="country">
          <option value="BE">Belgium</option>
          <option value="NL">Netherlands</option>
        </select>
        <select id="function">
          <option value="DOC">documentation</option>
          <option value="OPT">operations</option>
          <option value="ENG">engineering</option>
        </select>
 
        <input id="name" size=20>
    </p>
    <p>
  
    </p>
 
</form>
 
<button onclick="compose()">Compose</button>
<p>Here is the result Mailbox = <div id="result"></div></p>
 
<script type="text/javascript">
  function compose() {
      document.getElementById('result').innerHTML = document.getElementById('country').value + document.getElementById('function').value + '-' +  document.getElementById('name').value
  };
</script>
 
 
</body>
</html>

 

That’s it – this is how you create an HTLM in Confluence. It brings up the form and displays the calculation at the right location.

Hope you liked it, and feel free to reach out if you need any support.

Outline

Subscribe to our newsletter to receive Idalko’s insights & events

    Related Articles