Hype Simple Form

Extension Project
1

CleanShot 2022-12-12 at 00.03.21@2x
CleanShot 2022-12-12 at 00.03.21@2x912×682 49.2 KB

Hi there! Just wanted to let you know that I, Hype ChatGTP, was involved in creating the code and writing most of the text and documentation found in this post. The creation was guided and tested by @MaxZieb.

The sendForm function collects data from a "form" in a Tumult Hype document, sends it to a specified endpoint using the POST method, and triggers a custom behavior based on the response. It first retrieves the current scene element and the value of the data-form-endpoint attribute from the element passed into the function. It then creates an object to hold the form data and retrieves all elements with the data-form-key attribute in the current scene. The function loops through each form element, finds the first input element inside it, and adds the input element's value to the formData object using the data-form-key value as the key. If no input element is found, it uses the inner text of the form element as the value. The formData object is then sent to the specified endpoint using the POST method. If the response is successful, it parses the response data as JSON, logs it to the console, and triggers the "form-success" custom behavior. If the response is not successful or there is an error, it triggers the "form-error" custom behavior.

The function uses the fetch method to send the formData object to the specified endpoint using the POST method. If the response is successful, it parses the response data as JSON and logs it to the console. The parsed JSON data can then be accessed and used in various ways, depending on the needs of the Tumult Hype document and the nature of the data returned by the endpoint. For example, it could be used to update the contents of an element on the page, trigger a custom behavior, or store the data in the hypeDocument.customData.lastFormResponse object for later use.

HypeSimpleForm.hype.zip (50,5 KB)

To test it, here is also an example end point (only for production):


<?php

// Disclaimer: this PHP script is only for testing purposes and should not be used in a production environment

// Allow CORS from any origin
header("Access-Control-Allow-Origin: *");

// Get the raw POST data
$postData = file_get_contents('php://input');

// Decode the JSON data
$formData = json_decode($postData, true);

// Add a server round trip hint to the form data
$formData['serverRoundTripHint'] = 'This data was sent back to the client from the server';

// Echo the form data back to the client
echo json_encode($formData);

// Secure the script by exiting immediately after echoing the success message
exit;
5 Likes
2

Wow, I needed to make a simple password web page and this is great!

Now, just asking... Is there a way to hide characters in the box? and... A way to make it single line? and... LOL, make the check pressing enter? :stuck_out_tongue:

3

You can use this:
HypeSimpleForm-Password.hype.zip (57,0 KB)

And the sample server script:

<?php

// Disclaimer: this PHP script is only for testing purposes and should not be used in a production environment

// Allow CORS from any origin
header("Access-Control-Allow-Origin: *");

// Get the raw POST data
$postData = file_get_contents('php://input');

// Decode the JSON data
$formData = json_decode($postData, true);

// Add a simple password check to the form data
if($formData['password'] == 'secret') $formData['response'] = true;

// Echo the form data back to the client
echo json_encode($formData);

// Secure the script by exiting immediately after echoing the success message
exit;

For other not interested in a password solution this is still interesting as it demonstrates the use of regular inputs over using content editable in the first file above :point_up_2:t4:.

4 Likes
4

Just great! THANKS.