HIPAA FORMS CUSTOM CALLBACK EXAMPLE
------------------------------------

This example will get the first name from the form and pass it to the redirected URL.  We will include as part of the example information for an optional paramater set within the form settings.

You can then pull these parameters on the new page with a second Javascript function to be used however you need.  For example, you could populate fields in a secondary form on the new page.

This example with pass to a Thank You page URL - First Name, Thank you for submitting a form.

This example is using Gravity forms, but the process is very similar in Caldera.

Working Example of code is included at the end of this document.

CAUTION!
Using the custom callback option to pass data from the form to a new page will cause the data being passed to no longer be secured via our plugin.  

While passing the data from one page to another within your site under SSL should remain secure, passing data into a secondary non-secure form will not be secure or HIPAA compliant.

We highly recomend NOT passing actual protected health information (PHI) using this method.

It is your responsibility to ensure you remain HIPAA compliant using this option.


STEP 1:
WP Admin Dashboard -> Hipaa Forms -> Settings Tab -> Form Settings

Expand the selected form you want to add a custom callback to.

Select "Success Callback" under the "SUBMIT SUCCESS HANDLER" settings.

Add the name of your Javascript function you want to call, in this case the function name is testCallBack.

Add optional paramater values to pass to your function separated by comma.  In this case we're only going to pass one paramater value "test".

Hit save.


STEP 2:
There are three options as to where to create you function:
1.  Open an existing Javascript file within your theme to add your function.
2.  Create a new file and enqueue it within your functions.php file with the function.
3.  Easiest option is to create it within a HTML field anywhere within you form using <script> tags.

Add the following function to your Javascript file:
function testCallBack(optionalParam) { // NOTE: function name must match what you put in the form settings (in this case testCallBack)
    // GET THE FIRST NAME INPUT ELEMENT (REPLACE '#input_10_15_3' WITH THE ID OF THE FIRST NAME FIELD ON YOUR FORM)
    var firstNameInput = jQuery('#input_10_15_3');

    // GET THE VALUE FROM THE FIRST NAME INPUT
    var firstName = firstNameInput.val();

    // CONSOLE LOG THE FIRST NAME VALUE
    console.log(firstName);

    // SET THE REDIRECT URL WITH FIRST NAME & OPTIONAL PARAMS
    var redirectUrl = 'https://www.myredirecturl.com?first_name=' + firstName + '&optional_param=' + optionalParam;

    // FIRE THE REDIRECT (your could also use window.location.href instead of window.location.replace if you want the ability to hit the back button and go back to the form)
    window.location.replace(redirectUrl);
}

STEP 3:
On the recieving URL page, you will need Javascript to accept the passed parameter.  In this example the first name is being sent to be used in the message within the page
using Javascript <script> tags within the page.

	// DEFINING AND STYLING THE MESSAGE
	<p id="thankYouMessage" style="color: red; font-size: 30px; text-align: center;"></p>

	<script>
	// CUSTOMIZE THE MESSAGE
	var message2 = ", Thank you for submitted a form";
	
	// GET THE URL
	var url_string = window.location.href;
	
	// DEFILE THE URL
	var url = new URL(url_string);

	// GET THE PASSED FIRST_NAME PARAMETER
	var first_name= url.searchParams.get("first_name");

	//CONSOLE LOG THE FIRST NAME VALUE
	console.log(first_name);

	// COMBINE THE FIRST NAME AND MESSAGE TO CREATE ENTIRE MESSAGE
	var messageAll = first_name + message2

	//CONSOLE LOG THE MESSAGE
	console.log(messageAll);

	//DISPLAY THE MESSAGE
	document.getElementById("thankYouMessage").innerHTML = messageAll;
	</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------
Working Code for First Name example  

In HTML field within the form using <script> tags
This example uses Adavanced name field.  58: form ID, 1: field ID, 3: sub-name for First Name (6: is last Name)  If you are using Single Text feild for
first name, you would not have the sub-name parameter, only form ID and Field ID.
You will need to change YOUR DOMAIN.
------------------------------------------------------------------------------------------------------------------------------------------------------------

<script>function testCallBack() { 

    var firstNameInput = jQuery('#input_58_1_3');

    var firstName = firstNameInput.val();

    console.log(firstName);

    var redirectUrl = 'https://YOUR DOMAIN/thankyou2?first_name=' + firstName;

    window.location.replace(redirectUrl);
}
</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------
The following example will display the First Name, Thank you message on the receiving URL page.

The first line is an example of how to implement styling.
message2 - you can change the message to meet your requirements
There are a couple of console.log commands to help with testing. 

------------------------------------------------------------------------------------------------------------------------------------------------------------

<p id="thankYouMessage" style="color: red; font-size: 30px; text-align: center;"></p>

<script>
	var message2 = ", Thank you for submitting a form";
	var url_string = window.location.href;
	var url = new URL(url_string);
	var first_name= url.searchParams.get("first_name");
	console.log(first_name);
	var messageAll = first_name + message2 
	console.log(messageAll);
	document.getElementById("thankYouMessage").innerHTML = messageAll;
</script>