The PayPal buttons extension also allows you to add links to the bottom of your photo captions to websites like
Jot Forms which automatically include details of the selected photo (like
the photo title, or a link to the photo). This allows you to collect detailed ordering information from your customers directly.
Jot forms guide
Use the Jot Forms tools to create your form. Here I've included a couple of fields which I want to be filled with
the details of the photo that my customer selected (photo name and photo link).
In the properties for those two special fields, I have changed "read-only" to "yes" so that customers can't edit
the contents of those boxes (this is not a requirement). Make a note of the "name" field of the "field details" section at the bottom, as you'll
need it to create the code to link to your form. My "photo name" field ended up with the name "photoName", and my
"photo link" field had the name "photoLink" (ignore the curly braces {} that surround the name).
On the "setup and embed" tab, click on the "embed form" button. In the window that appears, copy the text from the
"direct link" box. The link for my form was http://form.jotform.co/form/32671195496868.
Now I'll write the HTML code for the link to my form into the SmugMug extension for Chrome's "PayPal button" feature. I start by just
making it a plain link with the text I want on it:
By including 'target="_blank"' in the code, it causes the link to open in a new window.
Now I need to add placeholders that will receive the details of the photo that the customer selected. The possible options are:
- $PHOTO_URL
- A link to the photo as it appears in the gallery the button was added to
- $PHOTO_NAME
- A combination of the photo title (if it has one) and caption, or the photo's filename if there is no caption or title.
- $FILENAME
- The photo's filename
- $CAPTION
- The photo's caption (if it had one)
- $TITLE
- The photo's title (if it had one)
My form includes fields for the URL of the photo, and the photo's name, so I add parameters to the link using the field names from Jot Forms
and the placeholders from the list above. My final code that I enter into the Chrome extension looks like this:
Now I select the photos that I want to apply these links to, and click the "add PayPal buttons" button in the Chrome extension.
The screenshot below shows what this looks like, or you can view it working in the example gallery.
