How to Insert (Embed) a Screen Shot (A.K.A. Screen Dump) Into a Post

  • Profile Image
    abajan
    Asked on June 26, 2011 at 01:30 PM

    Before we can insert the screen dump into a post, we need to have a screen dump in the first place. That's what the Print Screen key on a Windows keyboard is for. No, that key does NOT send a picture of the screen to your printer, as some erroneously believe. (It probably should have been named the Take a Snapshot of My Screen key but that would simply be too verbose! :)

    Anyway, hitting that key will save an image of whatever happens to be on the screen to the Windows clipboard, from where it can be pasted into various applications like Paint where it can be saved.

    Once saved, the image needs to be uploaded to an image hosting web site like ImageShack, Photobucket or our own repository. Here's how to do it with Jotform's uploader:

    1. Open a new browser tab or window, go to the image uploader and click Choose File

    2. When the Open dialog box pops up, navigate your way to the folder containing the image and either double-click its filename or click it and then click Open:


    3. Click Send Image:


    What will not be obvious from the above screen dump (the arrow pointing to "Send Image" should actually be labelled "Step 4", by the way) is the fact that not only did the thumbnail in the Last Image Upoloaded field change but so did the Image URL. It's just that the text box isn't long enough to show the updated portion of the address. (If the address is clicked and then the [End] key hit, you will see that the right portion is indeed different to what would have been there previously.)

    4. (Step 5) Click the URL and select all of it [Ctrl + A] and copy it to the Windows clipboard [Ctrl + C]:


    5. Go back to the tab or window containing the post in which you wish to embed the screen shot and click where you want to insert it (Hit [Enter] to insert it two lines below the text or [Shift + Enter] to place it just one line below)

    6. Click the Insert/edit image button. It's the button that looks like a mango tree on a green pasture on a sunny day (okay, perhaps that's going a bit overboard!) :

    7. Paste [Ctrl + V] the URL from your clipboard into the Image URL text box and then click Insert:


    That's pretty much how it's done.

    Now, there are ways to improve upon this method. For one thing, some of you may be looking at the screen dumps above and thinking to yourself "Hmm... those look a whole lot sharper than my own screen shots". The trick is to ensure that the images are no wider than 471 pixels (height doesn't matter). So, instead of hitting [Print Screen] and pasting the screen shot into Paint, use Jing. It's a pretty versatile application that can easily select the correct width and label elements of the image, as was done above. It's also worth noting that Jing saves images as PNGs which is a lossless format.

    You may be thinking, "What about if I need to include screen dumps of images wider than 471 pixels and still want to maintain sharpness?" What I usually do in such instances is to either just use a text link to the image or use a 471 pixel wide portion of image as a link to the whole image. To turn the inserted image into a link, select it by clicking and dragging the mouse over it (from right to left usually works best with me but I guess the direction doesn't really matter) and when it turns blue, click the Insert/edit link button and follow the same procedure as outlined above for the "Insert/edit image" window.

    Hopefully, this tutorial was helpful.


    ~ Wayne

  • Profile Image
    MacSkip
    Answered on June 26, 2011 at 04:36 PM

    Wayne,

        Once again, I'll say that if you're typical of the helpful response provided by the smiling bunch of faces behind Jotform Support, then you're something special.  Never before have I experienced such a great relationship with a support team.  Tell your boss that you all deserve a raise!! :-)

    ...Skip

    PS- Pasted below is what my form response looks like now -- just the way I want it. :-)

    PPS- If you think others may benefit from this tutorial, consider adding it to the list of "Popular Articles" on the left side of your Support Forum page.

  • Profile Image
    DanaVideo
    Answered on August 09, 2011 at 08:40 AM
    Dear Wayne,

    Sorry about the lack of information - I thought I was doing a search rather than submitting a question.

    However now that I have you here...

    I would like to create a form with checkboxes and a text box, so the easiest way to explain it would be with an example:

    Q: How did you hear about us?
    A:

    Checkbox - Magazine Ad
    Checkbox - Flyer
    Checkbox - Google
    Checkbox - Other

    And if the client clicks on Other, a text box appears for them to write which other.

    I have got around this on my jotform by adding another field below that says "If you checked other please specify below:"

    And this may be the only way to do it, but I was wondering if there was an option to have the text box magically appear?

    Thank you for a really great service by the way!

    All the best

    Lara



  • Profile Image
    aytekin
    Answered on August 09, 2011 at 08:59 AM

    Lara: Jotform already has this option. Select the radio button question and then click on Allow Other button on the toolbar.

  • Profile Image
    Petallic
    Answered on September 07, 2011 at 10:44 AM
    New response receivedHi Neil

    Thanks for that.

    Nothing is displayed using IE8 but I can see it with no problem with Google Chrome. Does this mean I have a problem with IE8 setting?

    Kind regards


    Jules
    ----- Original Message -----
  • Profile Image
    allanftd
    Answered on September 07, 2011 at 12:07 PM

    Hi Jules,

    This thread has branched out to other topics, so pardon me if I ask which subject are you referring to: is it the Allow Other button, or the embed screenshot tutorial?

    Kindly advise so that we can assist you further.

    JOTFORM SUPPORT

  • Profile Image
    Petallic
    Answered on September 08, 2011 at 04:16 AM
    New response receivedThanks Allan

    But Neil has already solved the problem.

    Kind regards


    Jules
    ----- Original Message -----
  • Profile Image
    abajan
    Answered on September 25, 2011 at 04:37 PM

    Hi Farmacia

    If you were attempting to post a screenshot in this thread, it did not show up. Please try again, as we are interested in your query.

    Thanks.


    ~ Wayne

  • Profile Image
    Rafa
    Answered on September 25, 2011 at 04:52 PM

    So complicated to post a screenshot; when I already copied and pasted exactly what appears on our email, read that and please not worry about a screenshot. IT IS THE EXACT SAME THING!

    Rafa,

    mexicopharmacy.mx

  • Profile Image
    aytekin
    Answered on September 26, 2011 at 06:18 AM

    Rafa: The email html code problem on forms submitted through secure.jotform.com is now fixed. Please try it again and let us know if the problem continues. 

  • Profile Image
    andypenn
    Answered on April 19, 2013 at 01:35 PM

    sorry mate no can do I have done exactly what you described and how I always do it, it simply putsa broken file in the box , I can drag and drop the file and I can see it in the topic box , but it seems that it cannot be sent this way, so I am at a loss as what to do  I think at present we are fighting each other as I have carried out work and it keeps disapearing and i think this happens when you clear the cache at your end I put it in again thinking its working only to have it disappear again,

  • Profile Image
    jonathan
    Answered on April 19, 2013 at 02:50 PM

    @andypenn

    Hi, may I suggest creating your own topic for your questions?

    Use this link http://www.jotform.com/contact

    Provide as much details as you can. This way we can assist you much better.

    Thanks.