TOPIC:

QR Code Generator 5 years 7 months ago #166363

  • StThereseInstitute's Avatar
  • StThereseInstitute
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • Posts: 11
  • Thanks: 2
Sorry to revive an old post, but it is the top result that comes up on Google when searching for "breezingforms qr code".

Here is what I did to successfully implement dynamic QR code generation within Breezing Forms using Google's Infographic QR Code generator (this api is unfortunately depreciated, but still works at the time of posting):
  1. To use this just as a QR Code generator and not a form that actually gets saved/submitted, disable the submit button option in the form's properties.
  2. On your last page (or thank-you page if submitting the form), create a new section. Call it something meaningful.
  3. [Edit] the section Description. Click [Toggle Editor] to turn off the default editor and enter code-mode. Enter the following into the window (change the "float" value as required -- I wanted my qr code to float right of the other elements):
    <img src="" name="QRCode" id="QRCode" style="float:right;" />
    This is a placeholder for the the QR code.
  4. Within the section, create a new text element, and name it QRCode_url. I wanted to show the user the raw link, so I left it visible, but you should be able to [Advanced -> Turn Off] if you don't want to show it.
  5. With this element, select the [Advanced] tab, then [Initscript -> Custom] and turn on only [Page Entry]. Paste the following code into the [Create code framework] box, adding more url+= declarations for all the BF fields you need to encode.
    function ff_Ref_Link_init(element, condition)
    {
    	var url =""; // create our javascript variable
    
    	// If creating a link to a website:
    	url += "http://Any-Website-URL-You-Might-Need.com/folder1/folder2/etc/?";  
    	// NOTE: the ? is important at the end of a website URL!!! Make sure you include it if using the QR Code to link to a website!!!
    
    	//Lookup the value of the BreezingForm fields we need to QR-Code-encode, and add them to our "url" variable
    	url += "Field1_Name=" + ff_getElementByName('Field1_Name').value;
    	url += "Field2_Name=" + ff_getElementByName('Field2_Name').value;
    	url += "Field3_Name=" + ff_getElementByName('Field3_Name').value;
    	// etc.... 
    
    	// encode the text for safe use as a GET / URL
    	url = encodeURI(url); 
    
    	//copies the URL into our textarea box. You can remove this line if you don't want to show this to the user
    	ff_getElementByName('QRCode_url').value = url; 
    
    	 // encode again using a different format so that we can add it to an existing GET URL.
    	url=encodeURIComponent(url); 
    
    	// the URL  of Google's QR depreciated api. Visit https://developers.google.com/chart/infographics/docs/qr_codes for info on how to set the options. If Google permanently disables this api, or if you'd like to use a different QR Code generator, make the necessary changes here.
    	url='https://chart.googleapis.com/chart?cht=qr&chs=200x200&chld=L|1&chl='+url;
    
    	// push our final image source URL to the placeholder image. Say hello to the QR Code!
    	document.getElementById("QRCode").src = url;
    }


My final output page looks like this:





A big THANK YOU to www.gjcwebdesign.com/joomla-virtuemart/b...-breezing-forms.html for the structure for reading other BreezingForm fields :)
Attachments:
The following user(s) said Thank You: kayelwin, pedro81

Please Log in or Create an account to join the conversation.

Last edit: Post by StThereseInstitute.

QR Code Generator 5 years 7 months ago #166641

  • pedro81's Avatar
  • pedro81
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 15273
  • Karma: 287
  • Thanks: 1077
Thanks for that amazing solution! :woohoo:

we added that into our documentation:
crosstec.org/en/support/online-documenta...76-qr-generator.html
The following user(s) said Thank You: StThereseInstitute

Please Log in or Create an account to join the conversation.

QR Code Generator 5 years 7 months ago #166655

  • StThereseInstitute's Avatar
  • StThereseInstitute
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • Posts: 11
  • Thanks: 2

pedro81 wrote: Thanks for that amazing solution! :woohoo:
we added that into our documentation:
crosstec.org/en/support/online-documenta...76-qr-generator.html

You're welcome! Glad I could contribute back even a little bit to an already great product. I'm excited that my little "hack-job" of a solution may be of help to others in the future.

Please Log in or Create an account to join the conversation.

QR Code Generator 3 months 2 weeks ago #261068

  • Jihad
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • Posts: 3
  • Thanks: 0
I wasnt able to get it to work

Please Log in or Create an account to join the conversation.

QR Code Generator 3 months 2 weeks ago #261082

  • tihana.krivic's Avatar
  • tihana.krivic
  • Offline
  • Moderator
  • Moderator
  • Posts: 7381
  • Karma: 3
  • Thanks: 529
Hi,

Eddy explained how to use QR generator on his site:
www.breezingforms.eddy-vh.com/pas-a-pas/...ulaire-breezingforms

It is on French but you can translate it :)

Regards,
Tihana

Please Log in or Create an account to join the conversation.

Last edit: Post by tihana.krivic.
Moderators: ForumSupport
Time to create page: 0.154 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

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!