New to the community? Start here

[Other] How to Capture the Submitted Form data?

Hi Team, 

We need to capture the submitted form data and need to pass that form data into the ‘Double the Donation’ team using this Step 2.

1. Do we have any Hooks or any API to get this form data?
2. Do we have any third-party integration with Double the Donation?

Tue, 29 Mar 2022 5:52:44
  • Adam
    • Support Gorilla

    Hi Vince Smith

    I hope you’re well today and thank you for your question!

    There’s no integration in Forminator for Double the Donation. There’s integration with Zapier in Formiantor but I admit I couldn’t find any existing one from Zapier to Double the Donation so unless I missed something it would have to be custom solution.

    I can’t say much about Double The Donation but you can “intercept” all the form data from Forminator upon submission by code so that data can then be “re-used” in code in any way you want. You’d need to come up with the part to send it to Double the Donation API then.

    You can use a simple code like this to get submission data from Frominator: 

    add_action( 'forminator_form_after_save_entry', 'my_form_submit' );
function my_form_submit( $form_id ) {
    
	if ( $form_id == 13660 ) {
	
		$entry = Forminator_Form_Entry_Model::get_latest_entry_by_form_id( $form_id );
	
		error_log( print_r( $entry, true ) );
			
	}
}

    You would need to replace number 13660 above with an ID of the form you wish to intercept first.

    This line

    error_log( print_r( $entry, true ) );

    would print out all the data object into /wp-content/debug.log file if you enable debugging on site by adding these lines to “wp-config.php” file: 

    define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );

    This is of course only for testing/development so you could see how this works and what’s the data structure. Eventually, you’d want to keep debugging disabled and replace this “error_log” line with another piece of custom code that would use data from $entry object and send it to Double the Donation API but that part, I’m afraid, is out of the scope of this support as it’s related to custom coding for 3rd-party API.

    The “Forminator part” of the code that I shared above, however, should give you a solid starting point for further development.

    Best regards,
    Adam

  • Vince Smith
    • New Recruit

    Hi Adam ,

    Thanks for your reply. I can get the saved form data, but I have a few questions.

    1. Added Step 1 JavaScript in header.php file and ‘<div id=”dd-company-name-input”></div>’ HTML in Forminator HTML field. After page load, I can see the field content is loading with help JavaScript. But if we enter data in any one of the other fields and on focus out from that field then this HTML field becomes empty.

    2. Seems the HTML field is not allowing any <script></script> inside it, and it is displaying as-is by removing script tags. Ex: <script>var DDCONF = {API_KEY: “123xyz”};</script> this displaying as var DDCONF = {API_KEY: “123xyz”}; after rendering the form.

    3. Basically, Double the Donation JavaScript will load an input field, when you search some text in that field it will show results and on the selection of the resulted value it will generate some Hidden input fields, this data also does not come on the above add_action.

    4. Don’t we have any add_action before the form submit, as this auto-generated field HTML field data is not coming from the given ‘forminator_form_after_save_entry’ function.

    5. get_latest_entry_by_form_id will it give the latest entry from that form? If yes, what happened when there are multiple entries at the same time from different areas? Will it give the immediate results of whoever submitted the form?

    Best regards,
    Nanda K. M.

  • Adam
    • Support Gorilla

    Hi Vince Smith

    Thanks for response and additional information/questions!

    As for your questions 1 and 2: this won’t work because Forminator doesn’t allow such code (especially JS) to be “injected” into its fields for two reasons – security (e.g. possible XSS attacks) and “stability” (JS could potentially conflict with other JS of the site/form).

    3. Basically, Double the Donation JavaScript will load an input field, when you search some text in that field it will show results and on the selection of the resulted value it will generate some Hidden input fields, this data also does not come on the above add_action.

    The code that I shared wouldn’t cause anything to “come up” there because it’s a server-side hooked working in background. It would be useful for sending data upon submission in background via API to external service but not here.

    4. Don’t we have any add_action before the form submit, as this auto-generated field HTML field data is not coming from the given ‘forminator_form_after_save_entry’ function.

    There would be such action but it wouldn’t help either as it’s server-side.

    5. get_latest_entry_by_form_id will it give the latest entry from that form? If yes, what happened when there are multiple entries at the same time from different areas? Will it give the immediate results of whoever submitted the form?

    It will be correct ID. There’s a lot more going on “behind the scenes” so Forminator knows exactly which entry to return, they won’t “mix up”. They could mix if we’d use just generic WP way to read “last entry” in DB but it’s not the case and using code designed to get correct entry data.

    ————————-

    That being said, the solution that I suggested would be suitable for their REST API integration way rather than JS. I’m sorry I didn’t mention it but I just assumed that that this is what you are aiming for as you mentioned “Hooks/API” and “integration” (so I thought of it being similar to how other Formiantor integrations work).

    To recap that, the code that I shared would be a starting point for further integration where its “erorr_log()” line would be replaced with custom code based on this doc (it’s linked from the article that you shared):

    https://doublethedonation.com/api/360matchpro/apiref.html

    This page documents their REST API which means that it wouldn’t render any additional fields in the form and wouldn’t require any additional JS interacting with Formiantor form.

    Instead the “flow” would be like this:

    1. code that I shared is executed upon form submission

    2. this code instead of “error_log()” function calls your custom function

    3. and your custom function

    – takes needed data from $entry object (from my code)
    – and interacts with their REST API

    That part (point 3) is something you’d need to code on your own or, if needed, hire a developers to get it coded for you as, I’m afraid, creating custom code for 3rd-party APIs is out of the scope.

    The JS way that you tried is another way to go but due to how Forminator works and the fact it’s not really meant for this kind of (a bit “crude”) modifications it would be even more complex to get it working fine together without any issues.

    Kind regards,
    Adam

  • Vince Smith
    • New Recruit

    Hi Adam ,

    Maybe I am not able to explain properly for Point 1.

    Look at this form and check the first ‘Employer Match’ field. It is an HTML field having ‘<div id=”dd-company-name-input”>’ as the content for that field. The JS which I added in header.php is loading the INPUT search field inside the ‘<div id=”dd-company-name-input”>’. But the problem is if we move to any other field this field has become empty.

    Steps to Repro the issue:
    1. Open the Form
    2. Without touching any other fields, look for the first ‘Employer Match’ field under the student group field.
    3. ‘Search company name’ => Search ‘Microsoft’, the result will populate and select Microsoft.
    4. Move to any other field, and fill the data
    5. Now, you will observe the ‘Employer Match’ field will become empty.

    So, I need to add the ‘Employer Match’ field inside that Donation form, which is generated by Forminator Pro, and on submitting that form I need to pass the Employer Match values then only the

    3. and your custom function

    will work (Double the Donation REST API values).

    And I am a developer, so I can continue the custom code part once I can be able to show the Double the Donation Employer Match field inside the Donation form and retrieve those values along with the form submission.

    Best regards,
    Nanda K. M.

  • Adam
    • Support Gorilla

    Hi Vince Smith

    Thanks for additional information!

    I think you are clear but I’m might be missing the point anyway – mostly because I’m not much familiar with Double the Donation and I don’t know your site and the actual goal of the form. So it’s possible that I’m missing something.

    Let me first address part of your post about “disappearing field/data in HTML field”:

    I checked the form and yes, I can see the issue there but it’s not unexpected because Forminator does quite a heavy use of JS itself for handling forms/fields and validation and it’s not prepared to handle such “dynamically injected” field. In this case it looks like there’s some sort of a conflict between scripts from plugin and that integration. Furthermore, even if that data would stay there, it wouldn’t really be submitted anywhere as it would be part of HTML field – which is a “display” or “info” type of field. If some JS turns it into “input” field it’s still field that’s only rendered on front-end and is “invisible” to Frominator for further processing.

    So getting back to the issue, let’s take a step back, please, and try to establish the “workflow” so I could understand fully what’s the “functional” (rather than “technical”) goal here and how it should work. Would you describe example “user case” scenario?

    I mean something similar to this example:

    – user visits Forminator form
    – this form has attached additional field (such and such) that takes data from…
    – user does this and that
    – this and that is fetched/send here and there
    – user submits the form
    – this data is saved by Forminator as form submission and that data is sent somewhere

    I’m sure you got the idea – basically, a sort of simplified “algorithm” or “data events/flow” description.

    I know it delays things but knowing this exactly and knowing how Forminator works I could then check Double the Donation docs again and, hopefully, either suggest some other/better solution or at least give you more accurate/specific suggestions on how to go with this.

    Best regards,
    Adam

  • Vince Smith
    • New Recruit

    Hi Adam ,

    Thanks for your reply. I will try to explain the scenario in my best.

    1. Needed a Donation form with Stripe as a payment gateway for our NGO Org site, we successfully created the Donation form using Forminator Pro and it’s working as expected.

    2. The primary additional piece of information we require is the donor’s company information for that we are using the 360MatchPro by Double the Donation. 360MatchPro is designed to streamline the matching gift process. A simple JavaScript is required to add Double the Donation streamlined company search into our donation form.

    3. Once the Company Search Input field is available on the donation form using that JS then users can search and pick the company from that search field. This selection will fill the hidden field values below.
    <input type=”hidden” name=”doubledonation_status” value=”no_interaction”>
    <input type=”hidden” name=”doublethedonation_status” value=”no_interaction”>
    <input type=”hidden” name=”doublethedonation_entered_text”>
    <input type=”hidden” name=”doubledonation_company_id”>
    <input type=”hidden” name=”doublethedonation_company_id”>
    <input type=”hidden” name=”doubledonation_company_name”>
    <input type=”hidden” name=”doublethedonation_company_name”>

    4. After the successful Donation form submit using Double the Donation JS or REST API, we need to pass these values to Doble the Donation for tracking the data. (I tried to see this form data using $_REQUEST but I couldn’t be able to get the data as this is happening in AJAX and the action forminator_form_after_save_entry is only after the record saved in DB)

    In Short

    – User visits Donation form
    – User filled in the form including the Employer Match search field (in the background Double the Donation JS will include this field dynamically)
    – User submits the form (in the background we need to send back some hidden fields, above hidden fields, values to Double the Donation)
    – User can see the Thank you message.

    The Donation form needs this additional search field by Double the Donation JavaScript. After the form submission, we need to pass the respective search hidden field values back to Double the Donation using their JS or REST API. So, how do we need to track these values?

    Best regards,
    Nanda K.M.

  • Adam
    • Support Gorilla

    HI Vince Smith

    Thanks for response!

    I’ll skip point one as it’s just the fact and address the rest of them.

    2. The primary additional piece of information we require is the donor’s company information for that we are using the 360MatchPro by Double the Donation. 360MatchPro is designed to streamline the matching gift process. A simple JavaScript is required to add Double the Donation streamlined company search into our donation form.

    Don’t add/try to add any JS-generated form via Forminator’s HTML field. Instead it would be best to incorporate this form on page separately, completely “outside” the Forminator form. You can always use CSS to make it look more “streamlined”. But it should make implementation easier and either completely eliminate JS conflicts or at least make them easier to troubleshoot/overcome.

    There’s no benefit of “injecting” that other form into Forminator form either as there’s no integration and custom development is necessary anyway.

    3. Once the Company Search Input field is available on the donation form using that JS then users can search and pick the company from that search field. This selection will fill the hidden field values below. (…)

    I understand that the hidden fields that you mentioned are field of type “hidden” that you added to Forminator form, right?

    So assuming you got that other form put on site separately, this is the first part that requires completely custom coding. In this case you’d need custom JS script that would just (fired upon some event like e.g. “onchange” or similar) copy data from that Double the Donation form field and set them as values of those hidden filed in Forminator. Such code wouldn’t be related/based on any API (like Forminator’s one or Double the Donation) – it’d be just regular JS to copy field values between forms/form fields.

    Similar to this:

    https://stackoverflow.com/a/22016422

    Note: this isn’t a “ready to use” solution but would be a good starting point and should be relatively easy to modify.

    4. After the successful Donation form submit using Double the Donation JS or REST API, we need to pass these values to Doble the Donation for tracking the data. (I tried to see this form data using $_REQUEST but I couldn’t be able to get the data as this is happening in AJAX and the action forminator_form_after_save_entry is only after the record saved in DB)

    For that, the solution that I previously suggested would be a perfect match. The code that I shared would intercept all the data submitted with Forminator and then you’d need to add to it your own PHP code to send selected data to the Doubel The Donation service via their REST API. We’ve discussed that earlier in this thread.

    I’d actually suggest going through this “in steps”, just like you outlined that in your post above and as I responded here – it would make it easier to get it all play together. As mentioned before, it all together makes it quite a complex custom development and providing a ready-to-use solution (and, especially, code to interact with 3rd-party API) is out of the scope but the way described above it should be possible to make it work.

    Kind regards,
    Adam