What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Make Form Proceed to Last Page

    Asked by aandztechdotcom on August 24, 2013 at 07:49 PM

    HELLO I SET M FIELDS NOW THE ISSUE IS THE HTML AND IMAGES ARE NOT SHOWING AS FIELDS WHEN I SET CONDITIONS

     

    Example

    After you select ATT on my form,i set the conditions where it asks to select capacity (16gb,32gb,64gb)

    then they select the condition of the phone it takes to you to the price we offer.i have a page break after it but i want to 

    set the page break to when they click next it goes to a diffrent page

    Page URL:
    http://www.jotform.us/aandztechdotcom/sellmyiphone5

    next select hello
  • Profile Image
    JotForm Support

    Answered by Tasha on August 24, 2013 at 10:21 PM

    Hi,

    Unfortunately I am unable to determine exactly what you would like us to help you with. When I view your form I am able to go to a another page by selecting next and the form works as how you described it. Please provide some more information on what you are trying to accomplish. Once we receive your reply we will be able to assist you better.

    Thanks!

  • Profile Image

    Answered by aandztechdotcom on August 24, 2013 at 10:29 PM

    Hello tasha. when they go through the form and choose there carrier capacity and condition, i want them to put there name and address and phone. Heres the catch though! I cant do that! I already set almost over 100 conditions and to add a full name and address after each field will be too long. I did have an idea though.

     

    After they select the next or get paid button, i can add a name and address field button then a submit button.But heres the issue again. The page break will still show even after a submit button. Bascially tasha, i want to prompt them for personal info such as name and address but i cant because i placed my offers in a FREE HTML TEXT BOX,not an actual field.How can i fix this? Is there a way to send me as a notification what they selected (capacity ,carrie,and condition) then prompt them at the end for info?

  • Profile Image

    Answered by Cesar on August 25, 2013 at 12:34 AM

    I'm not so sure this is what you're looking for, but after trying many different ways to get your form to proceed to the last page, this is what I was able to come up with.

    What I have appended below is the example of the item I added on a price page and below that, the rule that makes it jump to the last page (where you have the Registration Information: 

    Please review it and test it out if possible and tell us if this works for you or not.

    1

     

    This is the rule I used on that page, you might need to customize is as per your needs:

    2

     

    If you do need further assistance, do let us know. Thanks for using JotForm.

  • Profile Image

    Answered by aandztechdotcom on August 25, 2013 at 12:42 AM

    Hello and thanks thats a good idea but I need something like the page break very professional this is not 

  • Profile Image

    Answered by aandztechdotcom on August 25, 2013 at 12:42 AM

    How do I do it with a page break my users need something easy to use and professional!

  • Profile Image

    Answered by Cesar on August 25, 2013 at 01:19 AM

    Unfortunately it wouldn't work with a Hidden Box value and this is how it is intended to operate, I will continue to research this to find another solution that keeps unwanted fields off the screen. If I or any of my collegues aquire a solution to this, we will post it here.

  • Profile Image

    Answered by Cesar on August 25, 2013 at 09:31 PM

    I've been working on different workable options. What I have been able to come up with, is to hide the fields of the title and checkbox. That way we can still use them on the conditional I provided above.

    Below I'm posting a workable demo of one option.

    AT&T - 16GB - Brand New

    http://form.jotformpro.com/form/32360111051939

    As you can see the fields no longer appear, and should take you up to the contact info page.

    hidden

    This is the CSS Code I've injected:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #label_270.form-label-top ,#cid_270.form-input-wide 

     display: none !important;

    }

    Do let us know if this works out for you or if you need further assistance on this matter.

     

  • Profile Image

    Answered by aandztechdotcom on August 25, 2013 at 09:54 PM
    beautiful! now how do i do this for all fields? will it show in the
    notifications that the user selected the iphone 5 att brand new?
  • Profile Image

    Answered by Cesar on August 26, 2013 at 01:10 AM

    The best I've found to do this on all fields is to replace the title of the hidden field to a certain code, that way it is easier and less confusing when it's time to create the conditons. Below I'm going to paste a brief exmaple on how I added made the example form. You will need to perform this on all the pages and create a unique code for every hidden field.

    First step was to create the fields and add a unique code to the title field such as ATT16GBBRANDNEW. Make sure the Yes is marked as the default value.

    1

    Then we clicked on properties to get the id of the fields that we are going to be hiding.

    2

    The ID of the field we are working on is the #input_270 (ignore the _0)

    2

    Once we have the ID for reference we are going to the conditions and create the rule for page, this way when we click on get paid, it will go to the last page on the form.

    3

    This is the creation of the rule, so when we get to that page, if the hidden field ATT16GBBRANDNEW has a value of Yes (The check box that was left as Yes by default) then proceed to page 78, which is the last page of the form.

    4

    Now back on the form editor we click on setup & embed then preferences.

    Then on the Form Styles tab, we add the piece of code that is going to hide the fieldn this case the #label and #cid 270, in this box you will have to add all the fields of all the pages that are going to need to be hidden.

    5

    After that we should get a working hidden field that will allow you to move on to the last page of the form.

    In regards to the matter of notification emails:

    This is the notification I sent myself to test the form. As you can see the notification email shows the data that the user inputed troughout the form. 

    2

    You can go ahead and clone my example:

    http://form.jotformpro.com/form/32360111051939

    The example currently works on ATT 16GB Brand New and ATT 16GB Excellent. 

    If you need further assistance, do get in touch.

  • Profile Image

    Answered by aandztechdotcom on August 26, 2013 at 08:34 PM

    you made my day! but do i have to enter this for everytime i add a hidden field?

    "Then on the Form Styles tab, we add the piece of code that is going to hide the fieldn this case the #label and #cid 270, in this box you will have to add all the fields of all the pages that are going to need to be hidden."

     

    also, does that mean i can remove the the page break conditions?

  • Profile Image

    Answered by aandztechdotcom on August 26, 2013 at 08:51 PM

    also please send me the exact CSS to hide so i can copy then paste

  • Profile Image

    Answered by Cesar on August 26, 2013 at 10:38 PM

    Hello, you will still need the pagebreak conditions as they are, you will need to enter this for every hidden field that you add. 

    On the Forrm Style tab you will need to add the code for every field that you need to hide.

    The code below hides the fields on ATT 16GB Brand New and ATT 16GB Excellent:

    #label_270.form-label-top ,
    #cid_270.form-input-wide,
    #label_271.form-label-top ,
    #cid_271.form-input-wide

    {
    display: none !important;
    }

     

    That is working on my cloned form: 

    http://jotformpro.com/form/32360111051939

  • Profile Image

    Answered by aandztechdotcom on August 26, 2013 at 11:07 PM
    ok if label 270 is the first one and there is 60 should i just copy and
    paste this 60 times then add the sequence?
    example:
    #label_273.form-label-top ,
    #cid_273.form-input-wide,
    #label_274.form-label-top ,
    #cid_274.form-input-wide
  • Profile Image

    Answered by jeanettebmz on August 26, 2013 at 11:36 PM

    You have gotten correctly what Cesar have tried to illustrate to you. That is basically the logic

    Let us know if further help is needed

  • Profile Image

    Answered by aandztechdotcom on August 26, 2013 at 11:37 PM

    THANK YOU!

  • Profile Image

    Answered by aandztechdotcom on August 26, 2013 at 11:37 PM

    ALSO CAN CAESER SET IT WHEN THEY CHOOSE PAYPAL AS A METHOD IT WILL TAKE THEM TO A PAGE THAT SAYS ENTER EMAIL AND IF THEY CHOOSE CHECK A PAGE WHERE THEY ENTER THE CHECK MAILING ADDRESS

  • Profile Image

    Answered by aandztechdotcom on August 27, 2013 at 12:09 AM

    I DID SET THOSE CUSTOM CSS

    DIDNOT WORK!

    <!-- /* Font Definitions */ @font-face {font-family:"MS 明朝"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:"MS 明朝"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Cambria; mso-ascii-font-family:Cambria; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"MS 明朝"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-family:Cambria; mso-ascii-font-family:Cambria; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"MS 明朝"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} -->

    #label_270.form-label-top ,
    #cid_270.form-input-wide,

     

    {
    display: none !important;
    }

    #label_271.form-label-top ,
    #cid_271.form-input-wide,

    {
    display: none !important;
    }


    #label_272.form-label-top ,
    #cid_272.form-input-wide,

    {
    display: none !important;
    }


    #label_273.form-label-top ,
    #cid_273.form-input-wide,

    {
    display: none !important;
    }


    #label_274.form-label-top ,
    #cid_274.form-input-wide,

    {
    display: none !important;
    }


    #label_275.form-label-top ,
    #cid_275.form-input-wide,

    {
    display: none !important;
    }


    #label_276.form-label-top ,
    #cid_276.form-input-wide,

    {
    display: none !important;
    }


    #label_277.form-label-top ,
    #cid_277.form-input-wide,

    {
    display: none !important;
    }


    #label_278.form-label-top ,
    #cid_278.form-input-wide,

    {
    display: none !important;
    }


    #label_279.form-label-top ,
    #cid_279.form-input-wide,

    {
    display: none !important;
    }

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 27, 2013 at 05:31 AM

    Hi,

    Sorry for taking so long to respond. It took me a while to understand what you want to achieved here. While Cesar isn't around, allow us to answer your query.

    Your code works just fine but you won't be able to view the change while on edit mode due to using CID, you may use ID instead to hide the entire element. Example, if you start at 270, 

    #id_270,

    #id_271,

    #id_272,

    #id_273

    {display: none !important;}

    You can add more if you want, just separate each ID with a comma. The last ID (highlighted in green) shouldn't have any comma after it.

    Example if you add 274, it'd look just like this:

    #id_271,

    #id_272,

    #id_273,

    #id_274

    {display: none !important;}

    Regarding on your other concern, you can achieved that with conditions. Like if "Paypal" is selected, show another field. You can also use a thank you redirect condition but you have to create a separate form and link this from your first form using thank you URL condition.

    If you need further assistance, let us know.

  • Profile Image

    Answered by aandztechdotcom on August 27, 2013 at 08:50 PM

    i did set them as follows

    <!-- /* Font Definitions */ @font-face {font-family:Times; panose-1:2 0 5 0 0 0 0 0 0 0; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:"MS 明朝"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:"MS 明朝"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Cambria; mso-ascii-font-family:Cambria; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"MS 明朝"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p {mso-style-noshow:yes; mso-style-priority:99; mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; font-size:10.0pt; font-family:Times; mso-fareast-font-family:"MS 明朝"; mso-fareast-theme-font:minor-fareast; mso-bidi-font-family:"Times New Roman";} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-family:Cambria; mso-ascii-font-family:Cambria; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"MS 明朝"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Cambria; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} -->

    #id_271,

    #id_272,

    #id_273,

    #id_274,

    #id_275,

    #id_276,

    #id_277,

    #id_278,

    #id_279,

    #id_280

    {display: none !important;}

     

    still showing!

  • Profile Image

    Answered by aandztechdotcom on August 27, 2013 at 08:51 PM

    nvm they worked!

  • Profile Image
    JotForm Support

    Answered by Tasha on August 27, 2013 at 09:31 PM

    Thanks for letting us know that they are now working. Please let us know if there is anything else that we can assist you with.

     

  • Profile Image

    Answered by aandztechdotcom on August 31, 2013 at 01:46 PM

    please help i added all the fiels but they are not being selected after i save or refresh is there a custom css that selects all the check boxes?

  • Profile Image

    Answered by Cesar on August 31, 2013 at 08:34 PM

    Hello, to make the checkboxes checked by default, you must go to the Form Editor and perform the following steps:

    -Select the field with the checkbox you want to edit.

    -Click on Properties on the top right of that field.

    1

    Within properties look for the Selected property and make sure the values is on Yes or The value your checkbox has.

    2

     

    Hope this helps, if you do have any other questions, do let us know. If it is a matter unrelated to what this thread is about, then please go ahead and create a new thread for your question, as to avoid in confusions and to keep the thread on topic.

  • Profile Image

    Answered by aandztechdotcom on September 01, 2013 at 12:25 AM

    hELP! i changed a field name and now the condition is acting up! idk why

  • Profile Image
    JotForm Support

    Answered by Tasha on September 01, 2013 at 08:05 AM

    Can you let us know which field you changed and which condition is now acting up as a result of the change?

  • Profile Image
    JotForm Support

    Answered by Tasha on September 01, 2013 at 08:09 AM

    Also since the field name has changed you might also want to make sure that your saved conditions have been updated and is reflecting the new field name.

    Once we receive your reply we will be able to look into it some more for you.

    Thanks!