Giovanni De Stefanis
Giovanni De Stefanis

Reputation: 47

Autofill an external form in an iframe from... another form

I'd like to point your kind attentions to my question, topic should be similar to this post.

In a WP website i have two columns:

Column n.1 There is a CF7 form that is autofilled by an url from a CRM and injects data to a GSheet.

Column n.2 There is an iframe for booking an appointment with an external calendar tool that should pick data from the form (i have no way to edit form, but just the iframe link, for example:

Is there the possibility for this link to "pick" the data from the form or also from the crm url? Do you think that is possible or am I a fool?

Many thanks for your help :)

Upvotes: 0

Views: 819

Answers (1)

Ty Bailey
Ty Bailey

Reputation: 2432

You should look into using JavaScripts postMessage() functionality to pass data to/from iFrames.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Use something like this on the WordPress page

// This will get the value of the input and send it to the iFrame on the fly
$('#form-id input:not([type=submit])').each(function()  {
    var val = $(this).val();
    $(window).postMessage(val);
});

Then on the iFrame page:

// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for a message from the WP page
eventer(messageEvent, function(e) {
    if (e.data.length < 1) return;

    // jQuery
    $('#input-id').val(e.data);

    // Pure JS
    document.getElementById('input-id').setAttribute('value', e.data); 
}, false);

If the forms on different domains I think this is the only method for doing this.

Upvotes: 1

Related Questions