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 change styles of Driving Distance widget to match style of the form

    Asked by infoexpressnow on February 12, 2016 at 08:16 AM

    Additionally i have implemented a driving distance widget which i would like to ammend with some css yet everything i am trying is not succeeding. Am I doing somnething wrong?

    I would like the lines to a) look like the rest fo the form and b) to have some space in between.

  • Profile Image

    Answered by Boris on February 12, 2016 at 08:29 AM

    I believe that this is about your form named test, with form ID 60401273461344.

    In order to change styles of Driving Distance widget on that form, please (1) click on the wand-shaped icon of this widget, (2) switch to the Custom CSS tab, and (3) paste the following CSS codes into the widget:

    input[type="text"] {
    border-radius: 6px;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    background-color: #F3ECEC;
    transition: all 0.5s ease-in-out 0s;
    box-shadow: none;
    outline: medium none;
    padding: 6px 8px;
    border: 1px solid #FFF !important;
    font-size: 1em;
    line-height: 1.071em;
    font-family: "Exo 2",sans-serif;
    input[type="text"]:focus {
    border: 1px solid #2D60AF !important;

    Please refer to the following image for visual guidance on how to add these styles to your widget:

    This will result in your Driving Distance widget looking as in the following image:

    If you need further assistance with this, please let us know here in this support thread, and we will be happy to help.

  • Profile Image

    Answered by infoexpressnow on February 12, 2016 at 08:49 AM

    thank you


    you guys rock