How to embed an html form in a confluence page

rootUncategorized

Introduction

A customer called with the following problem

Hi Francis,

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?

Solution

It is actually 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 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 – it brings up the form, and displays the calculation at the right location