Dynamic URL using calculation widget is not working

Hello,

I'm having a strange issue where the paragraph element is sometimes interpreting a form field as the actual data and sometimes as the form field name.

The solution is need is to somehow create a dynamic URL in the correct format.

Here is a screen recording with more detailed context:
https://www.loom.com/share/4b020f15704145e59bbbb9f2759df2cc?sid=ac0a3068-74e8-47be-896f-6c7099fb0af6

Here is the form I am working on:

https://www.jotform.com/build/241218013321136

I've tested two different URL formats using two different form fields:

{checkoutLink} and {checkoutLinkB}

Here is the source code in the paragraph element I am using:

<p><a href="{checkoutLink}" target="_blank" rel="nofollow noopener noreferrer"> <img style="display: block; margin-left: auto; margin-right: auto;" src="https://manceppo.com/wp-content/uploads/2019/05/download-button.png" alt="Submit0" width="200;" height="70" /> </a></p>

Hi Elias,

Thanks for reaching out to Jotform Support. You can go with the link with the URL encoding. But, Instead of building the <a href></a> submit button inside the paragraph element, you can do it directly from the 'Checkout Link Builder (URL Encoded)' calculation widget, and just use the paragraph element to load the button itself. So technically, you will be building the submit button with the designated link using the calculation widget. Check this out:

The hard part here is, you will have to apply the inline CSS for designing the button inside the calculation widget as well. Here's a clone version of your form 241638019928969, with the working link. I didn't manage to apply the same styling of the button to save time, but you can clone the form to your account to further inspect how I set up the <a href></a>.

Give it a try and let us know if you need any more help.