× Form Help

Adding onclick="" attribute and <img> tag between submit <button> html tag

  • Jaime
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

Jaime created the topic: Adding onclick="" attribute and <img> tag between submit <but

Hi,

I've search the different forums for an answer but couldn't find anything on how to achieve this, expect for these 2 posts that were kinda close but not giving any precise answers:
crosstec.org/en/forums/35-form-help/1153...e-tracking-code.html
crosstec.org/en/forums/35-form-help/1244...l-tracking-code.html

I would like to know how to insert a custom onclick="" attribute and adding an <img> tag between the <button> tag of the submit button.

Those are the code snippets I want to insert between the button tag:
LinkedIn Ad code:
<img height="1" width="1" style="display:none;" alt="" src=" dc.ads.linkedin.com/collect/?pid=575490&...ionId=585794&fmt=gif " />

Google tag manager code:
onclick="return gtag_report_conversion(' example.com/your-link ')"

The final button code would look like this:
<button type="button" id="bfSubmitButton" class="bfSubmitButton button" onclick="return gtag_report_conversion(' example.com/your-link ') if(typeof bf_htmltextareainit != 'undefined'){ bf_htmltextareainit() }if(document.getElementById('bfPaymentMethod')){document.getElementById('bfPaymentMethod').value='';};ff_validate_submit(this, 'click');" value="Submit"><img height="1" width="1" style="display:none;" alt="" src=" dc.ads.linkedin.com/collect/?pid=575490&...ionId=585794&fmt=gif " /><span>Submit</span></button>

Thanks.
#232957
  • Posts: 2154
  • Karma: 67
  • Thank you received: 264

DarkoCujic replied the topic: Adding onclick="" attribute and <img> tag between submit <but

Hey,

not sure if it will work, especially since the conversion code has that return, so try also without it.

Go to your forms advanced properties > Scripts > Initialization script, click Custom and click Create code framework. Inside the created function (between the curly brackets { }), add the following:
jQuery('#bfSubmitButton').attr('onclick',  'return gtag_report_conversion("example.com/your-link");' + jQuery('#bfSubmitButton').attr('onclick')); 
  jQuery('#bfSubmitButton').html('<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=575490&conversionId=585794&fmt=gif" />' + jQuery('#bfSubmitButton').html());

I don't get any errors, but also, can't test since the image is not displayed and I don't have an active tracking to test gtag conversion.

Regards,
Darko

Satisfied with our support? PayPal tips
===========
Need to renew Pro Support? Buy Here!
===========
Satisfied? Consider a membership!
===========
Like us on Facebook
===========
Support Crosstec and get ALL EXTENSIONS and professional support for just $5. Here!
#232961
  • Jaime
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

Jaime replied the topic: Adding onclick="" attribute and <img> tag between submit <but

Thanks for the quick reply! I will try your suggestion and let you know if it works.
#232981
  • Jaime
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

Jaime replied the topic: Adding onclick="" attribute and <img> tag between submit <but

The code snippet is being added successfully but the double quotes (") around the url in the gtag_report_conversion function are being converted to html entities (") when the form is being rendered in the frontend, so I had to change them to single quotes (') and change the double quotes around the return part to single quotes. Another thing is, the form can no longer be submitted. When the submit button is click, nothing happens even when all the fields are empty, no - Please fill in...- error messages are being displayed. Those are the javascript errors being shown by the browser console when the submit button is click:

Attempt to set a forbidden header was denied: Connection
unreachable code after return statement

When I remove the code everything is working fine.

Do you have any suggestions on what might be going on.
#232996
  • Posts: 2154
  • Karma: 67
  • Thank you received: 264

DarkoCujic replied the topic: Adding onclick="" attribute and <img> tag between submit <but

Hey,

sorry for the late reply. We were on collective vacation. Happy New year by the way :)

Would it be possible to get backend access to the site? Or at the very least, a link to the form in question. That would be much easier to figure out what's going on. You can send the info to darko.cujic@crosstec.org

Regards,
Darko

Satisfied with our support? PayPal tips
===========
Need to renew Pro Support? Buy Here!
===========
Satisfied? Consider a membership!
===========
Like us on Facebook
===========
Support Crosstec and get ALL EXTENSIONS and professional support for just $5. Here!
#233066
  • Jaime
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

Jaime replied the topic: Adding onclick="" attribute and <img> tag between submit <but

Ok. I've just sent you the credentials to access the forms in the admin.
#233148
Moderators: ForumSupporttomeperica
Time to create page: 0.068 seconds

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans & templates!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here