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

    How to adjust fields according to max form width

    Asked by jdvanb on August 08, 2012 at 09:58 AM

    Hi there,

    I found out that the addres fiels are not in witdth adjutable..unfortunately

    My next "problem" i have is possible because of the max. witdth from my form the NEXT and BACK button are not next to eachother.

    The width from my form is 242 px.

    I want to use page break instead of scrolling.

    Is there anyway how I can solve this problem.

    On atached picture you can see that I have enough space ( above the dark gray) for putting both buttons next to eachother.

    Please let me know

     

    jdvanb@aol.com

    Page URL:
    Websitenotonlineyet

    Screenshot
  • Profile Image

    Answered by pinoytech on August 08, 2012 at 10:46 AM

    Hi,

    Sorry for the inconvenience that may have caused. 

    The only way to adjust the size of Address Field is by injecting custom CSS into the form. You may like to take a look at your form that I've clone were I use Address Field and injected some custom CSS to adjust the width.

    http://www.jotform.me/form/22203819840450

    If you like what I did, feel free to clone the form or just simply copy custom css bellow to inject into your form.

     

    .form-address-table {

    width:240px !important;

    }

    .form-address-line {

    width:190px !important;

    }

    .form-address-city, .form-address-state {

    width: 69px !important;

    }

    .form-address-country {

    width: 79px !important;

    }

    If you need further assistance, feel free to contact us anytime.

    Thank you!

  • Profile Image

    Answered by jdvanb on August 08, 2012 at 11:45 AM

    Absolutly perfect, thank you so much.

    However I noticed that by country is say in your sample "please select"

    In my form is changed to Dutch in "selecteer"

    All other words stay in English

    I want this form totally in English, how can I change this "selecteer" in "please select' again.

    I do use other forms in Dutch I do not want those to change in English.

    If possible I also wouldt like to have a back button with a little space in between left from the send button.

    And if possible I prefer to have instead of adults,  adults 18+

    And instead "nights" and "rooms"  "no. of nights" and "no. of rooms". 

    When I changes this myself the fields dont stay next to each other. But I do want them to stay next to each other.

    Two other things I noticed. Suddenly the Next button is not totally visible and the form is not centered.

    Can you change this for me

    Thank you

     

    jdvanb@aol.com

    http://www.jotform.me/form/22203819840450

  • Profile Image

    Answered by pinoytech on August 08, 2012 at 12:30 PM

    Hi,

    Good to hear that you like what I did. As I have checked your form's Address Field- country in my end, I don't see any problem and it says "Please Select" not "Selecteer", have you tried already deleting your browser cache and cookies? If not, please give a try.

    By the way, can you please take a look at this form if this is what you want to achieved? http://www.jotform.me/form/22203819840450

    Thank you!

  • Profile Image

    Answered by jdvanb on August 08, 2012 at 12:44 PM

    Hi there,

    The fieidls No of rooms - No of Nights.

    Adult 18+ - Childeren 

    Fields are not next to each other anymore, but on top of each other

    The same for the back button it is below the send button, I want the back button to be left from the send button. 

    Two other things I noticed. Suddenly the Next button is not totally visible and the form once placed with iframe in a div is not centered.

    by telephone number: Can you also add a country code field and place it left left from the area code field

    I did send you an picture

    Sorry...but this is not what I want.

  • Profile Image

    Answered by Jean Daniel on August 08, 2012 at 02:55 PM

    Hi there,

    The fieidls No of rooms - No of Nights.

    Adult 18+ - Childeren

    Fields are not next to each other anymore, but on top of each other

    The same for the back button it is below the send button, I want the back button to be left from the send button.

    Two other things I noticed. Suddenly the Next button is not totally visible and the form once placed with iframe in a div is not centered.

    by telephone number: Can you also add a country code field and place it left left from the area code field.

    As you asked I deleted browswer chace and cookies but I still have selecteer instead of please select

    I did send you an picture

    Sorry...but this is not what I want.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 08, 2012 at 08:26 PM

    @jean

    Unfortunately we could not see the picture you sent on this post. So, we cannot really identify yet how to best suggest a resolution to your requirements.

    However, this is how my colleague's form look like in action..

     

    If the form he did suffice to your requirement, would you rather like to clone the form to easily transfer it on your end?

    Please update us.

    Thanks.

  • Profile Image

    Answered by jdvanb on August 09, 2012 at 10:19 AM

    Hi there,

    On my webpage I cant see the send and back button from this form.

    I made a form in photoshop to show you how I like my form to be.

    And I have a print screen from the current form, so you can see what is wrong

    To which emai address can I send the pictures.

    please let me know

    Best regards

    Jean Daniel

    jdvanb@aol.com

  • Profile Image

    Answered by jdvanb on August 09, 2012 at 01:58 PM

    Hi there,

    On my webpage I cant see the send and back button from this form.

    I made a form in photoshop to show you how I like my form to be.

    And I have a print screen from the current form, so you can see what is wrong

    To which emai address can I send the pictures.

    please let me know

    Best regards

    Jean Daniel

    jdvanb@aol.com

  • Profile Image

    Answered by pinoytech on August 09, 2012 at 04:08 PM

    Hi,

    Can you please provide us screenshot of the Form how it looks like in your webpage using this guide: http://www.jotform.com/answers/31636-How-to-insert-embed-a-screen-shot-a-k-a-screen-dump-into-a-post

    Thank you!

  • Profile Image

    Answered by jdvanb on August 10, 2012 at 10:58 AM

    Hi there,

    On my webpage I cant see the send and back button from the form that you have made.

    I made a form in photoshop to show you how I like my form to be.

    I changed the order form a few fiels and I add a country code field

    And I have a print screen from the current form, so you can see what is wrong

    I attached both photo  links

    please let me know or you can see the photo's 

    The div has a size from 242px width and 600px height I use iframe to insert the form

    Best regards

    Jean Daniel

    What I have

    What I want

    jdvanb@aol.com

  • Profile Image
    JotForm Support

    Answered by jonathan on August 10, 2012 at 02:54 PM

    @jdvanb

    Hi, it could be that there is a script conflict occuring between the form and those that in your website. This can be a reason for the form not displaying properly when embedded in the website. If you noticed, previewing your form while not embedded, it will work correctly.

    But we cannot see your website URL and how the form was used on the website, so, I maybe wrong also.

    What you can do is to try re-embedding the form using the form's iframe code instead of the script one.

    Please inform us if using the iframe code will resolve the missing buttons.

    The "back' button can be adjusted by positioning it inline with the 'send' button using CSS code. We can take on this after we can confirm first that the issue on script conflict is resolve.

    Thanks.

  • Profile Image

    Answered by jdvanb on August 10, 2012 at 03:17 PM

    I only used iFrame:

    this a link to the website.

    The website is under contruction.

    Please only use http://www.floridatraveladventure.com/test/test.html and let me know what you thing.

    If you want me to send the code just let me know.

     

    Best regards

     

    Jean Daniel

  • Profile Image
    JotForm Support

    Answered by jonathan on August 10, 2012 at 04:13 PM

    Thank you for providing us the update and taking the effort to share the website URL.

    As I found out, the missing button anomaly had to do with the positioning of the form.

    Viewing the source code of the webpage thru the browser console indicates that there are at least 2 sets of elements within the "content_box_R" div class sharing the division.

    It seems that the total height, and the "absolute" positioning is not enough for this 2 elements to fit in. Thus the form was push lower than the allowed visible div. (Please see images for reference)

     

    Using the console, I tried adjusting the "top" position of jotform and was able to reveal the "next" button... (click on image to enlarge it)

     

    But as you can see on the 1st image above, the 2 sets became mixed up as the form moved up.

    As you are the only one can do it in your webpage, I think adjusting the top position and div classes indicated can resolve the conflicting display positions on the page.

    Please inform us if you have further inquiry and need other assistance.

    Update us also, if issue is sorted so we can proceed further.

    Thanks.

  • Profile Image

    Answered by jdvanb on August 13, 2012 at 11:24 AM

    Hi There

    I experimented a bit and found out that If i adust the DIVs height to 600 px that I will not see the NEXT button. However When I adjust the size to 650px I do see the NEXT button.

    With other words If you place the NEXT Button 50 px higher in the form, it will be vissible in a div with a height from 600 px.

    The BACK and SEND button also have te be paced 50px higher and the BACK and SEND buton are still not on the same level.

    As you also can see the "please select" is still in Dutch as "Selecteer".  

    Hope to hear from you soon

    Best regards

    Jean Daniel

  • Profile Image

    Answered by jdvanb on August 13, 2012 at 02:17 PM

    Hi There

    I experimented a bit and found out that If i adust the DIVs height to 600 px that I will not see the NEXT button. However When I adjust the size to 650px I do see the NEXT button.

    With other words If you place the NEXT Button 50 px higher in the form, it will be vissible in a div with a height from 600 px.

    The BACK and SEND button also have te be paced 50px higher and the BACK and SEND buton are still not on the same level.

    As you also can see the "please select" is still in Dutch as "Selecteer".  

    Can you please place the buttons 50px higher, and place send end back on same level

    Hope to hear from you soon

    Best regards

    Jean Daniel

  • Profile Image
    JotForm Support

    Answered by idarktech on August 13, 2012 at 07:07 PM

    Hi Jean,

    To position the buttons, please add the following css codes to your form:

     

    .form-pagebreak-back-container, .form-pagebreak-next-container {

    padding: 5px 0 5px 0 !important;

    }

    .form-pagebreak-back-container.form-label-left{

    width:0 !important;

    }

    .form-buttons-wrapper{

    height:10px;

    position: relative;

    top: 14px;

    }

    .form-button-error{

    display:block;

    }

     

    Result should be like this: http://form.jotform.me/form/22257603474453?

    You can also clone this form to have the word "Selecteer" be corrected. Follow this guide: How to clone an existing form from a URL

    Hope this helps. Thanks!

  • Profile Image
    JotForm Support

    Answered by idarktech on August 13, 2012 at 07:15 PM

    I found problem with my codes, it should be fine now. I just updated my codes above. Thanks.

  • Profile Image

    Answered by jdvanb on August 14, 2012 at 02:47 PM

    Absolutly perfect, except for one thing.

    "Please select" by country is stiil "Selecteer" in Dutch.

    But for the rest perfect.

    Thank you very much

  • Profile Image
    JotForm Support

    Answered by Mike_T on August 14, 2012 at 06:23 PM

    On behalf of my colleague Idarktech, you are quite welcome :)

    I can see the "Please select" text on your Address field. If the issue still persists, please provide us with affected form name/ID.

    Thank you for using our services.