Anyone Share a Custom HTML prompt that is Prompt for User Input with bigger text field?

Questions & Suggestions
1

I'm making a macro to quickly capture a paragraph of text. I'd normally use Prompt for User Input, but it only has a single line. I need to be able to see the whole paragraph and make corrections before posting.

I've tried making a Custom HTML Prompt, but it's too advanced for me. I've also tried adapting samples, and there's a whole HTML/CSS learning curve ahead of me.

Any chance one of y'all has already build an HTML version of Prompt for User Input with a bigger input text field? I'd appreciate your help. :slightly_smiling_face:

2

Here is a relatively simple HTML that includes a textarea and sets initial value from the Web Message variable, and saves that value back when you submit the form.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Keyboard Maestro Text Input Form</title>
	<style type="text/css">

body {
	background-color: #FFF;
	font: 11px "Lucida Grande", serif;
	color: #5A698B;
	width: 420px;
	margin: 0;
}

form {
	font: 11px "Chalkduster", serif;
}

#title {
	width: 100%;
	color: #5A698B;
	padding-top: 5px;
	padding-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
}

form {
	width: 100%;
}

.col1 {
	text-align: right;
	width: 105px;
	padding-top: 5px;
	height: 31px;
	margin: 0;
	float: left;
}

.message {
	height: 75px;
}

.col2 {
	width: 310px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
}

div.row {
	clear: both;
	width: 100%;
}

.submit {
	height: 29px;
	width: 100%;
	padding-top: 5px;
	clear: both;
} 

.input {
	width: 240px;
	background-color: #fff;
	color: #5A698B;
	margin: 4px 0 5px 8px;
	border: 1px solid #8595B2;
}

.center {
	text-align: center;
}

	</style> 
</head>
<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,160">
	<div id="title">
		Keyboard Maestro Text Input Form
	</div>
<form id="myform" action="#" method="post">
	<div class="row">
		<label class="col1 message">Message:</label> <span class="col2 message"><textarea class="input" rows="4" name="Web_Message" id="message" autofocus></textarea></span> 
	</div>
	<div class="center submit">
		<button name="Cancel" type="button" onclick="window.KeyboardMaestro.Cancel('Cancel')">Cancel</button> <button name="OK" type="button" onclick="if ( document.getElementById('myform').checkValidity() ) { window.KeyboardMaestro.Submit('OK') } else { document.getElementById('myform').reportValidity() }">OK</button>
	</div>
</form>
<script>

</script>
</body>
</html>
8 Likes
3

Is it possible to change the input font?

I can't seem to do this after fiddling around for quite a while...

4

Yep, here's an example. Just hunt down the font CSS to see the changes and change them to suit:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Keyboard Maestro Text Input Form</title>
	<style type="text/css">

body {
	background-color: #FFF;
	font: 11px "Lucida Grande", serif;
	color: #5A698B;
	width: 420px;
	margin: 0;
}

form {
	font: bold 14px "Lucida Grande", serif;
}

#title {
	width: 100%;
	color: #5A698B;
	padding-top: 5px;
	padding-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
}

form {
	width: 100%;
}

.col1 {
	text-align: right;
	width: 105px;
	padding-top: 5px;
	height: 31px;
	margin: 0;
	float: left;
}

.message {
	height: 75px;
}

.col2 {
	width: 310px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
}

div.row {
	clear: both;
	width: 100%;
}

.submit {
	height: 29px;
	width: 100%;
	padding-top: 5px;
	clear: both;
} 

.input {
	width: 240px;
	background-color: #fff;
	color: #5A698B;
	margin: 4px 0 5px 8px;
	border: 1px solid #8595B2;
	font: 16px "Georgia", serif;
}

.center {
	text-align: center;
}

	</style> 
</head>
<body data-kmwindow="SCREEN(Main,Left,20%),SCREEN(Main,Top,20%),420,160">
	<div id="title">
		Keyboard Maestro Text Input Form
	</div>
<form id="myform" action="#" method="post">
	<div class="row">
		<label class="col1 message">Message:</label> <span class="col2 message"><textarea class="input" rows="3" name="Web_Message" id="message" autofocus></textarea></span> 
	</div>
	<div class="center submit">
		<button name="Cancel" type="button" onclick="window.KeyboardMaestro.Cancel('Cancel')">Cancel</button> <button name="OK" type="button" onclick="if ( document.getElementById('myform').checkValidity() ) { window.KeyboardMaestro.Submit('OK') } else { document.getElementById('myform').reportValidity() }">OK</button>
	</div>
</form>
<script>

</script>
</body>
</html>
2 Likes
5

Thanks Mike!

I thought I tried adding a font parameter to the .input CSS last night, and it didn't work...

Oh, well. Your example works fine.

Thanks again.

1 Like
7

I would like it in the following ways. Please let us know if such modifications are possible.

  1. I need to be able hit return to submit. and option+return to add new line just like native prompt user action.

  2. To associate a keyboard shortcut to cancel button. (for example, for command+w, adding /w)

  3. I also could use even bigger text area.

I can't code so even if it is possible, i won't be able to modify the code.

8

All these thins are possible, but they all require appropriate HTML/DOM/JavaScript coding.

The Custom HTML Prompt action excepts to provide an infinitely expandable option to display and collect information in any way you want - pretty much like the world wide web. But it's not trivial to do.

If that's not something you can do, then your choices are either to use a simpler action with less control, or to find someone to help you create a prompt to your liking. Folks on this forum might be able to, or there are plenty of forums dedicated to HTML/DOM/JavaScript coding.

9

@fluid_eye It would be nice to have an example of such a macro in the Macro Library...

10

Thanks for the response.

@ALYB For now, I have a found a workaround.
This lets us use keyboard to submit or cancel (using tab key). Code can be easily changed by adding more new lines to expand the length of the text area.