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

    Is there a way to make the custom made date field look like the DateTime field?

    Asked by Billbully on January 13, 2016 at 09:31 PM
    So I am actually having some problems... I was hoping to create the field
    in one form and then I would import it into a pre-made form (#2 FULL
    Customer Submits Bills and Savings Preferences) <
    http://www.jotform.com//?formID=53125256402143#> but what I did not account
    for is that the coding is specific to the form that is created. When I ran
    the tests before, it was into a blank form, so all of the field titles
    matched. I also would try to rebuild the form around this field using the
    field manager app, but the problem is I am too vested into this specific
    form. This form is used to prefilll fields on another form and it is twined
    with other programs. So I do not think this is a doable strategy.
    If I were to start from scratch is there an easy way to make this field
    look like the date field? I ask this question because I was planning on
    duplicating these efforts across a third form I have, which has multiple
    dates involved in the form (I think 13 fields).
    Thanks!
  • Profile Image

    Answered by Billbully on January 13, 2016 at 09:44 PM

    I am trying to collect various dates from a form and (again through Zapier) automatically create an email that goes out to the client with these dates. The problem is Zapier is not able to read the dates for the emails.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 14, 2016 at 04:23 AM

    Hi,

     

    I have moved your second concern to another thread so we can assist you better. http://www.jotform.com/answers/744695

    Unfortunately, the best workaround I can think of is to add the custom date field to the pre-made form and then inject the css code again there. There doesn't seem to be any other way to make the fields look the same as the DateTime field without applying css.

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image

    Answered by Billbully on January 14, 2016 at 07:44 AM

    Thank you for your response.  I have been trying to do it this morning, but now the new form does not want to corporate with me. The form is #2 FULL Customer Submits Bills and Savings Preferences. And when I change the width to move everything closer together, it bounces right back when I move to another field. Do you mind helping with this issue? Or ultimately helping adjust it, as I do not think I will be able to adjust the fields for the phone unless I get some custom script like provided before?

     

    Thanks!

    Jordan

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 14, 2016 at 11:38 AM

    Hello Jordan,

    Please check the screenshot below and see if this what you want to achieve:

     

    If yes then please inject the following custom css code in your form and that should make the form fields appear as displayed in the screenshot above:

    div#cid_217 {

        margin-left: -172px;

        margin-top: 28px;

    }

     

    div#cid_216 {

        margin-left: -131px;

        margin-top: 28px;

    }

    The following guide should help you how to inject custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Billbully on January 14, 2016 at 08:05 PM

    Thank you! However, when I add the code, I am getting an error message saying, "styles not updated because you have 1 css error(s). Please fix them!" and then at the "x" it says,"Expected RBRACE at line 7, col 5".  I am not sure what this means...

     

    Thanks! 

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 14, 2016 at 09:37 PM

    Hi,

     

    It looks like a css code is missing a closing tag which is why there is an error when injecting the css.

    Go to the Form Designer and click on the CSS tab.

    Then look for the part where the X is showing in the css.

    On the Form Designer, click on the CSS tab and add this: } at where the arrow is pointing in the screenshot. That should fix the error you are receiving.

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image

    Answered by Billbully on January 14, 2016 at 10:11 PM

    Thank you, that helped fix the error code, but it looks like I am still struggling with the original request.  I have a screenshot showing the the code that I inserted and what the field looks like after inputting it. As a result, I deleted the code out of the form. I can put it back in if needed, but it doesn't seem to work.

     

    Thanks,

     

    Jordan

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 14, 2016 at 11:26 PM

    Hi,

     

    Please try this css code instead:

    div#cid_217 {
       margin-left : -53px;
       margin-top : 47px;
    }


    div#cid_216 {
       margin-left : 2px;
       margin-top : 59px;
    }

     

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image

    Answered by Billbully on January 14, 2016 at 11:30 PM

    Thanks Chriistian,

    However, I am still running into a problem with the phone view.  It looks good for a desktop computer, but not if my customer is filling out the phone through a phone.

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 15, 2016 at 01:28 AM

    Hi,

     

    You can inject this code to fix the problem with mobile view:

    @media only screen and (max-width: 480px){

    #cid_215 {

        width: 60px!important;

    }

    #cid_217 {

        width: 60px!important;

    }

    #cid_216 {

        width: 60px!important;

    }

    .form-line.form-line-column.form-col-1 {

        width: 80px!important;

    }

    line.form-line-column.form-col-2 {

        height: 30px;

        margin-top: -7px!important;

        margin-left: -10px!important;

    }

    .form-line.form-line-column.form-col-3 {

        margin-top: -7px!important;

        margin-left: 63px!important;

    }

    }

     

     

    Hope this helps,
    Regards.

  • Profile Image

    Answered by Billbully on January 15, 2016 at 03:56 PM

    Humm... I am not sure why it keeps looking different on my screen... I have attached another screenshot.  It also does not look right when the phone the other way with the screen rotated too...

    Do you think part of the problem is at this point do we have too much code and should start over?  I am not sure which parts of the code I would need to delete though, as I have other code written in...

    Jordan

     

  • Profile Image

    Answered by Billbully on January 15, 2016 at 06:54 PM

    While adjusting this, can we also make the words "birth date" on one line?

    Thanks and I am sorry we are having so many problems with this. 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 16, 2016 at 06:58 AM

    Hello Billbully,

    You can align the label of form field to left. Please check the screenshot below:

     

     

    I have fixed the alignment issue of your fields in mobile device. Can you please take a look and see if this works as expected. Please check the screenshot below:

     

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by Billbully on January 17, 2016 at 07:14 PM

    Hi Ashwin,

     

    I did not see any instructions for me, except for adjusting where the label sits. Regarding the label, Ideally, I would prefer the label to sit on top (since that is how all of my other questions are) but I feel like this has been a very difficult problem (and continues to be a difficult problem) and I do not want to keep making things harder for you guys, so I suppose I can settle for moving the label to the side.

    I say it continues to be a difficult problem because I did not see an improvement.  Every single screen I  look at, both mobile views, the table views and computer views, the questions are not aligned.  Let me know if you need screenshots.

    I'm not sure why the form keeps looking different when I am viewing it compared to when you guys are working on it.  could this be a different problem that needs to be fixed too, and until we fix this underlying problem we will not be able to fix the main problem?

    Jordan

  • Profile Image

    Answered by Billbully on January 17, 2016 at 07:40 PM

    However, I noticed that every successive tech never mentioned that they see it working ... 

  • Profile Image
    JotForm Support

    Answered by beril on January 18, 2016 at 06:15 AM

    As far as I understand from your thread is that you are trying to use your Birth Date field as date field which looks like a dateTime field. They are not visible at the same line because your fields which are month and year do not have any label. I will add some CSS code and get back to you soon.

  • Profile Image
    JotForm Support

    Answered by beril on January 18, 2016 at 08:08 AM

    First off all, delete the CSS codes that you added before for your Birthdate field and make the arrangements as you see below:

     

    Then, add the code below to your CSS on designer.

    div#cid_215, #id_216, #id_217 {

        display : inline block !important;

        margin-left : -0 !important;

        padding-left : 0 !important;

    }

     

    #label_216, #label_217 {

        visibility : hidden !important;

    }

     

    #id_216 {

        width : 80px !important;

    }

    Here is how it works:

    I hope it helps.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by Billbully on January 20, 2016 at 07:27 PM

    humm... I thought I responded to this a few days ago, but I guess I didn't.  Unfortunately, I followed all of the steps and it still doesn't work properly.  Therefore, I think we need to try this again.

    Also because I deleted all of my previous code, my question "Please select all of the channels you wish to keep:" used to be spaced (through custom code) small enough to fit three items across, but that is no longer working. I added all of the code back (as I saved it in MS Word), but for whatever reason the system no longer wants to respond to the code...

    Jordan 

  • Profile Image
    JotForm Support

    Answered by beril on January 21, 2016 at 03:11 AM

    We are sorry for the confusion. I made some arrangements on your cloned form. It works properly on by side.

    Can you also clone it and check your cloned form that I tested before?

    Here is your cloned form:

    https://form.jotform.com/60200951326950

    We will wait for your response.

  • Profile Image

    Answered by Billbully on January 22, 2016 at 09:36 PM

    Thanks, but this cloned form does not work for me because it does not look right on mobile.  Mobile was what my original problem was, but then as we fussed with everything, things got worse, not better.

     

    As as result, I have been brainstorming really hard about workarounds because this fix is obviously not easy.  I came up with something that works in theory, but I have to manipulate the information through some code writing (outside of Jotform), and I am not a code writer.  I am still giving it a shot so cross your fingers. If I can't get it to work, I will be back for this solution. 

     

    Thanks,

     

    Jordan

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 23, 2016 at 03:48 AM

    Thank you for the update. We would like to apologize for any inconvenience. I'll also try to check for any other workaround to help you with your concern. 

    Kindly update us also if you have found any solution on your end.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 23, 2016 at 07:06 AM

    Is this what you would like to happen to the Birth Date field on your form?

    You can find the CSS codes I have injected to your form here: http://pastebin.com/jReUVtc8

    Here's the clone version of the form: https://form.jotform.com/60222217067951

    Feel free to clone it so you can inspect it.

    I would suggest you try to remove the CSS codes I have added so you can view how it was before the codes were added.

    Please be reminded that I've added three different fields on the form for Month, Day, and Year.

    I have not shrunk the three fields and left it expanded. I have labeled the Month field "Birth Date". And the other two are just "letters" c and b respectively. I did that so it will only take one line for the field label. (You can rename it to your preference also)

    By the way, I also changed the width of each drop-down via their properties.

    After all those, that's the time I added the CSS codes. 

    I hope this helps. Let us know if you need any further assistance. Thank you.