Can I hide the 'from' field on the Driving Distance widget?

  • Profile Image
    rodpatterson
    Asked on December 05, 2017 at 07:13 PM

    Hi, I am using the widget Driving Distance in the form below. 

    https://form.jotformeu.com/73373881364363

    Is there a way to hide the 'from' field (whilst using the default entry) so the user just sees the 'To' field?

    I'm attempting to get an input from the user which will be used to calculate driving distance to the venue/

    Thanks, Rod. 

  • Profile Image
    liyam
    Answered on December 05, 2017 at 11:00 PM

    Unfortunately, there is no option to hide the "From" field of the widget. The form layout that you are using which is single question in one page layout and does not have a CSS injection feature. You can try switching your layout to multiple questions in one page where there is an option to insert CSS codes, and then you can further customize your form such as hiding fields, etc.

    You can find this setting by editing your form and click Settings > Form Settings then look for the Form Layout option and change it to All Questions in one page.

    1512532343form_settings_-_form_layout2.j

    You can also add page breaks in your form under this form layout option in order to set it in multiple pages, similar to the Single Question in One page. You can check this guide to know more: https://www.jotform.com/help/119-How-to-Create-Multi-Page-Forms

    If you need assistance with the CSS of your field's settings after switching to this form layout, please let us know.

    Thanks.


  • Profile Image
    Rod Patterson
    Answered on December 06, 2017 at 08:52 PM

    Hi Liyam,

    I've taken your advice and changed the format of the form.

    Please tell me how to use CSS to hide the form field in question.  I'm afraid my knowledge of CSS is very poor!

    Thanks,

    Rod.


  • Profile Image
    liyam
    Answered on December 06, 2017 at 10:12 PM

    Thank you for the update, Rod. For your css code, you can use this: 

    #ddFrom { display: none; }

    Next, is how and where to put it. For this, you can open the Widget settings, on the Custom CSS tab, add the code:

    1512616234driving_distance_widget_-_cust

    Note: once you have inserted the code, please click the green Update Widget button.

    Then do these same steps for every Driving Distance widget that you have.

    If you have questions or if you need assistance, please let us know.

  • Profile Image
    rodpatterson
    Answered on December 07, 2017 at 06:05 AM

    Hi Liyam, that's terrific and I've applied that code to my form.  One more question - can the calculator 'round off' a calculated amount to the closest £?

  • Profile Image
    liyam
    Answered on December 07, 2017 at 08:43 AM

    You can make use of the round() math function on your calculation widget.

    Here is an example:

    15126536432017-12-07_2131.png

    To know more on how to use the math functions, please check out this guide: https://www.jotform.com/help/267-Form-Calculation-Math-Function-Reference

    Note: I inserted another parenthesis inside the round function in order to perform first the calculation before performing the round() function.

    Feel free to let us know if you have questions.

  • Profile Image
    rodpatterson
    Answered on December 08, 2017 at 10:28 AM

    Hi Liyam,

    Thanks for all your help.  I've tried, unsuccessfully, to hide details of the calculation and that part of the form won't move on until those details are shown.

    Can you help me with this, please?

    Regards,

    Rod

  • Profile Image
    liyam
    Answered on December 08, 2017 at 12:01 PM

    Hello Rod,

    I checked your form and it appears to be working fine. Although at first it might show errors as there is a delay on the distance calculation as it processes the information, so you might want to give it around at least 5 seconds before it shows a result, then you can proceed to the next page.

    15127523942017-12-09_0059.png

    Please also take note that by indicating just Belfast as your From location, the widget presumes it being Belfast, UK. So if it should be somewhere else, please do so provide a closer detail.

    If you have additional questions, please let us know.

  • Profile Image
    rodpatterson
    Answered on December 08, 2017 at 12:04 PM

    Hi Liyam, that is for getting back to me so quickly.  I would like the user to input the destination and then for the form to proceed to the total cost without showing the info you show in the red box.  Is this achievable?  


  • Profile Image
    BDAVID
    Answered on December 08, 2017 at 01:58 PM

    If you want to show only the following information:

    1512759068onlythis.png

    You can inject the following code inside each Driving Distance widget, as shown on this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    #ddResult table tr{

    display: none;

    }

    #ddResult table tr:nth-of-type(2){

    display: block !important;

    }

    #ddResult table tr:nth-of-type(2) th{

    display: none !important;

    }

    #ddResult table tr:nth-of-type(5){

    display: block !important;

    }

    Let us know if you need more help.

  • Profile Image
    rodpatterson
    Answered on December 08, 2017 at 07:11 PM

    Hi BDavid, I've put the code in the custom CSS boxes but it seems to be preventing the form from seeing the input, saying 'this field is required'.  I'm also not getting the City/town prompts anymore...

  • Profile Image
    liyam
    Answered on December 09, 2017 at 12:31 AM

    Hello Rod,

    When you say that it's preventing the form from seeing the input, also the issue about not getting the City/Town prompts, can you tell us more about these? This is because I had the same as BDAVID on what you wanted to be hidden is what he just did for the CSS that he suggested to be added. 

    We'll look forward to your response.


  • Profile Image
    rodpatterson
    Answered on December 09, 2017 at 03:51 AM

    Hi Liyam, apologies - all seems to be working ok now.  Could you tell me how to change the colour of the font to white on the town/city answer when the result is being shown, please?

  • Profile Image
    liyam
    Answered on December 09, 2017 at 05:39 AM

    Thanks for the update, Rod.

    For changing the font color, you can insert this CSS code in the widget: 

    #ddResult table tr td {
       color:#fff !important;
    }

    Warm regards.

  • Profile Image
    rodpatterson
    Answered on December 09, 2017 at 06:02 AM

    Fantastic Liyam, I'm there!  thanks so much for all your help.

  • Profile Image
    rodpatterson
    Answered on December 10, 2017 at 05:18 PM

    hi Liyam, is it possible to match the style of the venue entry field with the rest of the form fields, please?  Thanks again for all your help...

    Rod

  • Profile Image
    jonathan
    Answered on December 10, 2017 at 05:56 PM

    I assume you meant the style of the input textbox to be similar to the rest of the form.

    This...

    1512946603zzz 2017-12-11 06.55.00.png

    Allow me some more time to get the needed CSS code.

    Let us know if this is rather not what you meant.

    Thank you.

  • Profile Image
    rodpatterson
    Answered on December 10, 2017 at 05:59 PM

    Hi, that's exactly what I mean, thanks....

  • Profile Image
    jonathan
    Answered on December 10, 2017 at 06:12 PM

    Please try adding this CSS codes to the widget.


    #ddTo {

    color: #ffffff;

        padding: 4px 3px 2px 3px;

        font-weight: bolder;

        background-color: rgba(255, 255, 255, 0.31);

        outline: none;

        -webkit-transition: all .5s ease-in-out;

        -moz-transition: all .5s ease-in-out;

        width: 100% !important;

        border-color: #7C7C7C !important;

        box-shadow: none !important;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

    }

    1512947525zzz 2017-12-11 07.11.36.png


  • Profile Image
    jonathan
    Answered on December 10, 2017 at 06:16 PM

    if you want the input font-size to be bigger you can insert/add the code

    font-size : 14px;


    like this...

    #ddTo {

    color: #ffffff;

        padding: 4px 3px 2px 3px;

        font-weight: bolder;

        font-size : 14px;

        background-color: rgba(255, 255, 255, 0.31);

        outline: none;

        -webkit-transition: all .5s ease-in-out;

        -moz-transition: all .5s ease-in-out;

        width: 100% !important;

        border-color: #7C7C7C !important;

        box-shadow: none !important;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

    }