WordPress – Contact Form 7 – Dynamically Change Fields

# WordPress – Contact Form 7 – Dynamically change fields

yes you can use a plugin “something cf7 dynamic fields”, but their is a better way, or at least let’s call it, my way.
We can change the fields via JavaScript on document ready…
First of all Give the field an id (in contact form 7 creation ):

[email* your-email-2 id:cf7-send-email-to placeholder “send to..”]

Then attach the data from wherever on your app to a data attribute on some element that make sense so you can retrieve this field via javascript (pass from php to javascript nicely).
Than add this:

<script>
    jQuery(document).ready(function($) {
        var vendorEmailField = $('#cf7-send-email-to'); // get the form field
        var vendorNameField  = $('#cf7-company-name'); // get the form field
        var usernameField    = $('#cf7-your-name'); // get the form field
        var userEmailField   = $('#cf7-your-email'); // get the form field

        var vendorName  = $('p.vendor-title').text(); // get vendor name.
        var vendorEmail = $('#opensupsendform').data('vendormail');
        var userName = $('#opensupsendform').data('username');
        var userEmail = $('#opensupsendform').data('useremail');

        vendorEmailField.css('display','none');
        vendorNameField.css('background','#eee');
        vendorNameField.val(vendorName);
        vendorEmailField.val(vendorEmail);

        usernameField.val(userName);
        userEmailField.val(userEmail);

        vendorNameField.attr('readonly', true);

        // jobNumber.css('color','#aaa');
        // jobTitle.val(jobTitleData);
        // jobTitle.attr('readonly', true);
        // jobTitle.css('color','#aaa');
        // $('.wpcf7-response-output').css( "display", "none" );
    }); 
</script>

this dynamically add data to the form on ready().
val = $(‘selector’).data(‘key’) – retrieve a data attribute val
string = $(‘selectior’).text() – retrieve a element text (within the tags).
$(‘selector’).val() – replace their value of the element (on this case the data in the field).