Is it possible to have Required Fields before users can Print Form?

  • Profile Image
    AgPhd
    Asked on January 30, 2013 at 09:14 AM

    The question above pretty much says it all.  We have registration forms on our website that have a Print Form and a Submit Form button at the bottom.  The problem is we've found some users are printing the form and only filling out one answer - for example, their name - and printing the form.  Is it possible for the fields marked "Required" to be required to be filled out before the Print Form function will work, just as the "Submit" function won't work without the completed required form elements?

    Here's an example page if you need it:

    http://www.agphd.com/ag-phd-events/winter-workshops-registration/

    Thanks for your consideration in replying to this query.

  • Profile Image
    AgPhd
    Answered on January 30, 2013 at 09:18 AM

    One suggestion I received was that the user be able to print their form from the Thank You page after submitting.  That way, all required form fields would be filled out and submitted but the user would still have the option to print immediately.  Would this be a possibility?

  • Profile Image
    Deygus
    Answered on January 30, 2013 at 11:08 AM

    Unfortunately I don't quite think this would be possible due to the fact that a printer will only print out what is seen on the page currently meaning that if half the form is filled out and the person prints it the form will whatever happens to be filled out and seen on the form in this case ecetera.

     

    As for your question with printing the form out after submission I don't think we have a feature available to support this yet. It has to be sent to the printer before they click submit. 

    The closest possible workaround for this that may work would be to add in a save and continue option so they can go back and print or finish filling it out. This would generate and provide a link where they could see their form again to print it out but the problem with it is that this would also allow them to edit the form so it is not a guarantee that it would work out this way perfectly.

    There might also be another way on top of this but it will take me some time to research this more as it would most likely end up involving the form's source code or even some custom injected css. If myself or one of my colleagues has additional information on this we ill get back to you asap once we've figured out something more.

  • Profile Image
    AgPhd
    Answered on January 31, 2013 at 01:41 PM

    That is pretty much what I figured.  Thanks very much for the reply, and let us know if you come up with anything in your research.

  • Profile Image
    jeanettebmz
    Answered on January 31, 2013 at 01:46 PM

    I think a workaround for this is to setup an autoresponder , which will send all the filled sections of your formafter submitting it

  • Profile Image
    AgPhd
    Answered on January 31, 2013 at 01:52 PM

    Jeanette,

    We do indeed have an autoresponder e-mail which includes all of the required fields, as well as a link to the filled in PDF form.  This inquiry came about as a result of some users printing an incomplete form and not submitting at all.  We were trying to reduce instances of this.  The autoresponder feature works great, so long as the mail makes it through the spam filters, etc.

  • Profile Image
    jeanettebmz
    Answered on January 31, 2013 at 02:06 PM

    Ok, so the problem is with the required validation , to make this to work set simply select the field and click on the required button at the toolbar

     

    You can even add at the bottom a captcha field that you can even convert it to recaptcha

     

    To prevent these validations to get disabled , you can either share the direct link with your users

     

    O embed the form into an HTML webpage using the iFrame method

  • Profile Image
    AgPhd
    Answered on January 31, 2013 at 02:42 PM

    Yep, we've already enacted all the of the above points to some extent, with the exception of the captcha.  We are using required fields.  The original question was if we could make users fill out fields marked as required before being able to print, just as they are unable to Submit unless required fields are filled out.

  • Profile Image
    EduardoMendez
    Answered on January 31, 2013 at 03:30 PM

    Hi there, 

    This would only be a possibility if the printing option was available after the submission.

    Here is a trick with the Thank You page that can allow you to download a printable PDF form after the submission:

    Here is what to do:


    1. Copy all of this code to somewhere(notepad, a text editor etc.) to use it later on.
    2. Select your form from "my forms", open it, and click the "preview button" and copy the string of digits at the end of the form's URL and close the preview window.
    form url digits

    3. Go to "Setup & Embed" tab and click the "Thank You" button
    setup and embed tab thank you message

        - Select "Thank You Message" and click next
        select thank you message

    4. When the "Thank You message" window pops up, click the Edit HTML Source button to load the "HTML Source Editor".
    thank you message html source editor

    - In the "HTML source editor" paste the code from step 1 where it is shown
    paste code from step 1 to html source editor    

    Check these steps in order to implement it to your form:
        - Change the form ID where it states "formID=12345678901" in the code to what you 
          would have noted in Step 2.
        - You will also need to change "http://www.example.com" in the code to the address
          an actual "Thank You" page on your web site.

    5. Click "Update" to close the HTML Source Editor and then click "Finish" to close the "Thank You Page Wizard".

    6. Save the form and then click "Email Alerts" and if the default notification still exists and its "Compose Email" section still has its original content, copy that content tosomewhere(notepad, a text editor etc.)
    email alerts access
        
        - Click anywhere inside the "Questions and Answers" table, hit (Ctrl+A) to select all of it and then (Ctrl+C) to copy it, close the notification window.
        


    7. Re-open the Thank You message, click to the right of the sentence that states: "Your submission has been received." to move the insertion point to that position and then paste the stuff you got from step 6, click "Finish" and save the form.
    copy code to the thank you message form q and a

    8. The confirmation page process is essentially finished however you can now replace the default "Thank You! Your submission has been received." with something like Thanks {Name}. Please review your entries and if you see any errors, click the 'Edit Entries' button. Otherwise, just complete the submission.


    That's about it. To see the confirmation process in action, complete and submit this form. You may clone it if you wish. Please ask questions if you get stuck somewhere in this article in the comments below or in our forum.


    Additional Information:
    Tags to display uploaded images are explained by Serkan (one of our developers) in this forum thread. (Incidentally, such tags don't work with multi-upload buttons.)

    An explanation of how the headers from the postal address were removed from the confirmation page of the sample form can be found here.

    You can give that a try and let us know if that may be an acceptable workaround.

  • Profile Image
    AgPhd
    Answered on February 01, 2013 at 01:05 PM

    Eduardo,

    Thanks very much for your highly detailed response.  I have run into a couple minor problems.  The confirmation page idea is great.  I cloned the form for testing and did the updates you suggested.  http://form.jotformpro.com/form/30314285012945.  I am having two issues:

    1. When I preview the form and fill it out, with the {pdf-link} at the bottom of the form as you suggested, the URL shows up, but it isn't an active link.  It would be nice if you could also just make it a button or short text link like "Click Here" instead of a big, long URL, but if I can get the link to be a link, I'll take it.

    2. When I click the Edit Entries option, I get an error saying: 

    Invalid Form URL
    This form is not available for this domain.
    http://www.jotformpro.com/form/30314285012945

    So, there is an issue I'm having somewhere in the code I'm getting from Step 1.  I am replacing the numbers with the form number, but it seems I'm missing something else.

    Otherwise, it seems to be working great.

    Thanks again for your help.

  • Profile Image
    EduardoMendez
    Answered on February 01, 2013 at 01:52 PM

    Hi there, 

     

    Here is a sample form that includes a print button on the thank you page:

    http://form.jotformpro.com/form/30314934806957?

    Please give that a try and if you wish, you can clone it and use it as your own.

    On this form, I made some changes by removing the PDF link and adding some code (open the HTML editor to view) for the print button.

    The code for the print button is:

    <input type="button" onClick="window.print()" value="Print This Page"/>
    I hope that helps!
  • Profile Image
    AgPhd
    Answered on February 05, 2013 at 09:48 AM

    Eduardo,

    That seems to work great, but I'm still getting the Invalid Form URL error when I click on Edit Entries in that form you linked.  I could simply remove this feature and change some of the text or something like that, but it makes sense to have it there the way you did.  What would I need to change in the code to not get this error?


  • Profile Image
    EduardoMendez
    Answered on February 05, 2013 at 10:35 AM

    @AgPhd

    Try clonning the form and making the change on the Thank You page HTML editor as shown on this guide:

      - Select "Thank You Message" and click next
        select thank you message

    4. When the "Thank You message" window pops up, click the Edit HTML Source button to load the "HTML Source Editor".
    thank you message html source editor

    - In the "HTML source editor" paste the code from step 1 where it is shown
    paste code from step 1 to html source editor    

    Check these steps in order to implement it to your form:
        - Change the form ID where it states "formID=12345678901" in the code to what you 
          would have noted in Step 2.
        - You will also need to change "http://www.example.com" in the code to the address
          an actual "Thank You" page on your web site.

    5. Click "Update" to close the HTML Source Editor and then click "Finish" to close the "Thank You Page Wizard".
    ------------------------------------------------------------------------------------------------------------
    Please give that a try and let me know if it works!
  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 09:43 AM

    Still having an issue getting that Edit Entries to work.  I've cloned the form here:

    http://www.jotform.com/?formID=30373477111953

    I replaced the form ID as you instructed, but still get the same error as before.

  • Profile Image
    EduardoMendez
    Answered on February 07, 2013 at 10:16 AM

    I noticed that your form is in Jotfrompro. and that is why I think you see the problem.

    On my end, I don't have the error msg that you have described, I'm guessing due to my administration rights.

    Anyhow, in order to test, Ca you please made a chnage on the code for the edit button so that it opens in jotformpro in stead of jotform.com?

     

    So,

      Before

     


    <br /><a target="_blank" href="http://www.jotform.com/form.php?formID=12345678901&sid={id}&mode=edit"><button>Edit Entries</button></a><span style="padding-left: 14px;"><a target="_blank" href="http://www.example.com" rel="nofollow noopener"><button>Complete Submission</button></a></span>

    After
    <br /><a target="_blank" href="http://www.jotformpro.com/form.php?formID=12345678901&sid={id}&mode=edit"><button>Edit Entries</button></a><span style="padding-left: 14px;"><a target="_blank" href="http://www.example.com" rel="nofollow noopener"><button>Complete Submission</button></a></span>

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 10:26 AM

    Yup.  That did it.  Sorry for the confusion, as I should have caught that....  Thanks for all your help!

  • Profile Image
    EduardoMendez
    Answered on February 07, 2013 at 10:33 AM

    Anytime!  I should have caught it too! :)

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 10:41 AM

    Okay, so while this works great in preview, going to a confirmation page doesn't work when embedded in our website.  Most of the form gets cut off and users can't Edit Entries, Print Form, or Complete Form.

    http://www.agphd.com/ag-phd-events/winter-workshops-registration/

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 10:42 AM

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 10:45 AM

    Trying to post a screenshot... With Difficulty...  I'd like to take this off the live site as soon as I can...

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 10:45 AM

  • Profile Image
    EduardoMendez
    Answered on February 07, 2013 at 10:56 AM

    Hi there, 

    can you please try to embed the form using the iFrame method.  That would set the height of your form.

    Here is a guide to help you with that:

    http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code

    Let us know if that does the trick

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 11:04 AM

    I had thought of that, but when I do this, on the confirmation page when the user clicks "Confirm Submission," the iFrame loads the Thank You Page destination Custom URL on OUR website INSIDE of the iFrame.  So, basically, it loads a website page within a website page.  Is there a way around this?

  • Profile Image
    EduardoMendez
    Answered on February 07, 2013 at 01:04 PM

    Hi there, 

    Well, you can try the iFrame code and change the URL of your Thank you destination to a page that looks like this:

    Here is a form that you can clone and use as your final thank you page :

    http://form.jotformpro.com/form/30374873812962?

    Please try changing this on your form and try the iFrame method to see if that solves the issue.

    If with the iFrame method the page is cut off, please remove the Script part (highlighted in blue in the sample) of the iFrame code.

    Sample:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/30374873812962" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image
    AgPhd
    Answered on February 07, 2013 at 01:23 PM

    Eduardo,

    I think we've finally got it figured out and fully functional.  Thank you very much for your help on this.

     

  • Profile Image
    EduardoMendez
    Answered on February 07, 2013 at 01:31 PM

    Anytime!