Effortlessly Embedding HTML Forms in Confluence Pages

adminUncategorized

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?”

We thought that this problem might be faced by some of you. So we wanted to share our solution.

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 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 – 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.