Sending an arbitrary value via Contact Form 7

This article explains how to send an arbitrary value via Contact Form 7. Perhaps this method will help send you product names or any of their data via the Contact Form 7 plugin.

Although it is quite labor intensive to use this method, it is still the easiest way out in many situations. The tools will be as follows:

1. Contact Form 7 – Dynamic Text Extension. A plugin for using dynamic fields.
2. jQuery.
3. Then of course there’s WordPress with CF7.

It’s time to get to the task at hand!

Initial task

So, it’s time to figure out what this is even going to be about. We have a random object whose value needs to be sent. See screenshot.

So, the challenge is this. When you click the order button, a feedback form should pop up. After filling it out, the data should be sent to the mail, including the name of the active tab. But how do you send something that doesn’t apply to Contact Form 7? That’s right, get the tab value and send it to some field on the feedback form. And to keep it from looming, it’s best to make it hidden.

Decision

In that case, here’s what we do:

1. Install Contact Form 7 – Dynamic Text Extension. Of course, you can manage without it, but this plugin gives you the ability to make hidden fields with dynamic value.
2. Creating a child theme! There’s an assets/js folder in there. Create a script.js file there. Why in the child thread? If you put it into a working one, it may break all the custom code when you upgrade. It’s up to you, though.
3. Let’s start coding hard!

First of all, we need to calculate the text value of the desired field. Let there be total randomness!

We have an active tab, the styles path to it looks like this .vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text

Especially pay attention to .vc_active, this field will be key when substituting the value in the CF_7 field. The other tabs are set to .vc_hiden to cut off unnecessary values.

So, to accomplish this task, the following code is suitable and needs to be entered into the newly created script.js:

jQuery(document).ready(function($) { //Add only if there is no such line.
$('.popup-button').on('click', function() { //"Order" button class
      var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();
    $("#products_name").val(value);
  });
}); //we add only if we added the first line.

Now let me explain the principle on which all this works. First, we create a function that will be activated when a button or widget with the desired class is clicked. In this case, .popup-button. Clicking on this button will start the execution of the following code.

var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();

Use this string to get the text value of the active tab’s title bar. This value can now be sent to Contact Form 7. To do this, open the plugin and create a feedback form. Accordingly, we specify the required class in the field.

As you’ve probably already noticed, I’ve put the value in the visible field for clarity. But you hardly need such an approach, because it is better to make a hidden field, title will be seen only by you, but in the form will not bother your eyes.

To do this, you will need the Dynamic Text Extension. It allows you to create hidden dynamic fields.

Insert the specified field, add the required ID to it and you’re done.

I just need to finish the last line:

$("#products_name").val(value);

This line sends the received value to the field with id products_name, you can use a class instead of an id. at your discretion.

How to send data via email, I hope you know. Actually, by this principle you can send any random value to the required field, which can sometimes simplify your life. The main thing is that the right classes should prevail over similar classes.