How do I get html text input boxes and a button into Confluence page?

[Vishali]

The requirement given to me is - Have input text boxes for Username, Password, Loan Number, and have a Browse button from where they can upload a file. Can this be done on a confluence page? Could you please help?

[Bob Swift · Accepted solution]

Run Plugin for Confluence can provide the input fields. You will need some sort of script to process the information (Script Plugin for Confluence or HTML Plugin for Confluence or ...)

[Shaikh Moiz]

Hello Bob,

I have similar query, We are using SQL plugin, and we are willing to add an extra column to sql result set with some text field, once we add some text it should be added as a column data,

In general one inline edit cell into sql result set.

We have https://bobswift.atlassian.net/wiki/display/RUN plugin also,

Can we achieve this,

Thanks in advance.

[waqas Wilan2026]

To add HTML text input boxes and a button to a Confluence page, you'll need to use Confluence's HTML macro. Follow these steps:

1. Edit Page: Go to the Confluence page where you want to add the input boxes and button. Click on the "Edit" button.

2. Insert HTML Macro: In the editor, click on the "+" icon to add a new macro. Search for "HTML" and select the "HTML" macro from the dropdown.

3. Edit HTML Macro: Once the HTML macro is added to the page, click on it to edit its content.

4. Enter HTML Code: Inside the HTML macro, input your HTML code for the text input boxes and button. For example:

```html
<input type="text" id="input1" name="input1" placeholder="Input 1">
<input type="text" id="input2" name="input2" placeholder="Input 2">
<button type="button" onclick="submitForm()">Submit</button>

<script>
function submitForm() {
// Add your JavaScript code here to handle form submission
var input1Value = document.getElementById("input1").value;
var input2Value = document.getElementById("input2").value;
// Process the input values as needed
console.log("Input 1 Value: ", input1Value);
console.log("Input 2 Value: ", input2Value);
}
</script>
```

5. Save Changes: After entering your HTML code, click "Save" to save the changes to the Confluence page.

6. Preview and Test: Preview the Confluence page to ensure that the HTML input boxes and button are displayed correctly. Test the functionality of the input boxes and button to ensure they work as expected.

Remember to ensure that any HTML and JavaScript code you use complies with Confluence's security and content guidelines. Additionally, consider the implications of adding custom HTML and JavaScript to your Confluence pages, as it may affect page performance and security.

[Nicketa]

https://docs.atlassian.com/aui/7.8.3/docs/forms.html