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 do I customize the background color on the Driving Distance widget?

    Asked by writeitright on April 19, 2016 at 12:01 AM

    Because my forms use a black background and the font color used by the driving distance widget is also black, the text is not visible on my website.

    Could you please help me with a work around?

    Page URL:
    http://www.ccarrowheights.org/#!worship-service-coordination/c17pe

    Screenshot
    distance widget driving distance how how do i
  • Profile Image
    JotForm Support

    Answered by Nik_C on April 19, 2016 at 04:40 AM

    You can do that by going to your Driving Distance widget wizard:

    And then to Custom CSS:

    You can paste this code there:

    #ddForm {

    background-color: red;

    }

    To change the background of the widget.

    I put red, but feel free to change to any color that suits you.

    Please let me know if you have further questions.

    Thank you!

  • Profile Image

    Answered by writeitright on April 19, 2016 at 04:16 PM

    Thank you! Your solution works to change the background of the entry field, but it does not change the background of the field that populates to display the calculation. 

    Here's what it looks like when the user provides the departure city/destination for calculation:

    Here's what it looks like when the user clicks the Calculate button:

  • Profile Image
    JotForm Support

    Answered by Boris on April 19, 2016 at 05:35 PM

    In order to change the background of the results as well, you should use #ddResult selector in your CSS. Your custom CSS would end up looking like this:

    #ddForm, #ddResult {
    background-color: grey;
    }

    This will force the results/calculation to look the same as the initial page of the Driving Distance widget. If you want to have different color background for each of these two pages, then you can use custom CSS such as this:

    #ddForm {
    background-color: grey;
    }
    #ddResult {
    background-color: lightgray;
    }

    Please let us know if you need any further assistance.