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

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. 

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.

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.

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.

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:

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.

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 £?

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

Here is an example:

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.

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

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.

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.

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?  

If you want to show only the following information:

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.

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...

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.

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?

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.

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

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

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

This...

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

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

Thank you.

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

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;

}

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;

}