Link to a specific WooCommerce product page based off user input

Hi,

You are trying to use the WooCommerce integration with the CFF in the wrong direction.

The WooCommerce add-on, in the developer version of the plugin, allows to integrate a form with a specific product of WooCommerce. So, you can create the forms as usual, and then, integrate the form with specifics products, from the products edition.

If you want to create a form, and redirect to the user to specific products, in function to values entered through the input fields, you can create a form, independient of the WooCommerce products, like in the following example:

I’ll assume that your form includes two numeric fields: fieldname1, and fieldname2, and can occur any of following cases:

– If fieldname1 is equal to 1 and fieldname2 is equal to 1, redirect to the user to: https://www.yourdomain.com/product1.html

– If fieldname1 is equal to 1 and fieldname2 is equal to 2, redirect to the user to: https://www.yourdomain.com/product2.html

– If fieldname1 is equal to 2 and fieldname2 is equal to 1, redirect to the user to: https://www.yourdomain.com/product3.html

– If fieldname1 is equal to 2 and fieldname2 is equal to 2, redirect to the user to: https://www.yourdomain.com/product4.html

Now, you should follow the steps below:

1. Untick the option: “Eval dynamically the equations associated to the calculated fields”, from the “Form Settings” tab of form builder.

2. Select the option: “No”, in the attribute: “Display submit button?” in the form’s settings.

3. Inserts a button field in the form, and select, the “Calculate” option as the button type.

4. Inserts a calculated field in the form, and tick the option: “Hide Field From Public Page”, because the new field is not relevant in the form’s interface.

5. Finally, enter the following equation associated to the calculated field:

(function(){
var a = fieldname1;
var b = fieldname2;

if(a == 1 && b == 1) document.location.href = 'https://www.yourdomain.com/product1.html';

if(a == 1 && b == 2) document.location.href = 'https://www.yourdomain.com/product2.html';

if(a == 2 && b == 1) document.location.href = 'https://www.yourdomain.com/product3.html';

if(a == 2 && b == 2) document.location.href = 'https://www.yourdomain.com/product4.html';
})()

and that’s all.
Best regards.

This is great!! Thanks for explaining this in further detail. Is there another way to do this with the same instance above except there would be a “next” button below the product details then this takes them to purchase the product where they enter in name, phone, email and credit card information then a terms and condition check box?

So, it’s more like steps in the form…
User enters in numbers in two fields (same calculation above) with “next” button below
Step One – Review product details and total price (previous and next button)
Step Two – Purchase Product (Fill in name, phone, credit card options, Terms and conditions)

Thanks,
M

Hi,

If you want to create a form with multiple pages, you simply should insert a “Page Break” field between the fields that belong to the first page, and fields that belong to the second page. You can insert multiple “Page Break” fields to distribute the form’s fields in multiple pages.

Best regards.

Hi,

Can the “next” button be custom coded with the calculation above? (- If fieldname1 is equal to 1 and fieldname2 is equal to 1, redirect to the user to: https://www.yourdomain.com/product1.html) etc…

After it redirects to that page with the product details and another next button, will that still be a part of the same form?

Thanks

Hi,

If you want to redirect to the user to a different webpage, you should follow the instructions that were sent in a previous entry, and not the “Next” and “Previous” buttons, because they are used for moving forward and backward, between pages of a same form.

However, if you want connecting different forms, and use the data sent from a form in another one, please, read the following article in our technical blog:

https://blog.net-factor.com/how-to-use-the-data-submitted-by-a-form-in-another-one/

Best regards.

Hi,

Thanks for your help!

Just an FYI – I tried to use the example above to direct the user to another URL but when I went to preview and test the form, it automatically directed to a URL. It wouldn’t allow me to enter in any numbers in the fields because it redirected me to a URL when I went to preview. How can i fix this issue? I need to be able to enter the numbers in the two fields in the form, then click on “next” to then direct to a specific url?

thanks

Hi,

The behavior you describe is happening because you have not followed all the steps on description, specifically the first step:

1. Untick the option: “Eval dynamically the equations associated to the calculated fields”, from the “Form Settings” tab of form builder.

If the option is ticked, the equations are evaluated dynamically after loading the webpage, and in your case the webpage is redirected to the URL selected in the equation.

Best regards.

I do have that option unticked and it opens the form on preview then redirects me to the URL. It won’t allow me to enter in any values. How can I fix this issue?

Hi,

I will need the URL to your webpage to check the form’s structure.

Best regards.

Is there anyway I can email you privately because this is in production?

Hi,

Yes, of course, please, creates a new entry in our private support service:

https://wordpress.dwbooster.com/support

Best regards.

Great, sent you a private support message.

Thanks

I figured out the issue on the form. In your code you forgot a semi-colon at the end of the code. When I added this to the code, it worked! Thanks so much for your help.

(function(){
var a = fieldname1;
var b = fieldname2;

if(a == 1 && b == 1) document.location.href = ‘https://www.yourdomain.com/product1.html’;

if(a == 1 && b == 2) document.location.href = ‘https://www.yourdomain.com/product2.html’;

if(a == 2 && b == 1) document.location.href = ‘https://www.yourdomain.com/product3.html’;

if(a == 2 && b == 2) document.location.href = ‘https://www.yourdomain.com/product4.html’;
})();

Hi,

I’m sorry, my mistake.

Best regards.

Hi, thanks so much for your help above.

Is there anyway to do the same calculation above but also capture the information entered in the form and into the new URL page that contains another form to fill out their personal information (name, email, number) ? We need the information filled in the two fields to be emailed to us after the user submits their personal information.

Thx