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 can I change the smartyStreets field to adopt the same design the rest of the form I created?

    Asked by AbigailLadra on November 22, 2016 at 01:11 PM

    Good Day!

     

    By default, my form looks like this after adding the smartyStreets field:

    Is there anyway it would look like the rest of the form? As you can see its a bit out of place and I cant present this on the website as it is.

    I know that it can be change through CSS, but I am not knowledgeable enough on how to use it. 

    I hope you can help me with this.

     

    Kind Regards,

     

    Abigail

    Page URL:
    https://www.jotform.com//?formID=63086213928459

    same how SmartyStreets how can i
  • Profile Image
    JotForm Support

    Answered by david on November 22, 2016 at 02:58 PM

    It looks like most of the widget can by styled to match your form.  I will get back to you in a moment with the code.

  • Profile Image
    JotForm Support

    Answered by david on November 22, 2016 at 03:22 PM

    First, set the widgets width to 330:

    Then add the following code directly to the widgets CSS section:

    form input[type="text"], form textarea{
        background : lightblue;
    }
    label {
    color : white;
    }
    form table {
    background-image: url("https://www.jotform.com/uploads/AbigailLadra/form_files/BG.png");
    }
    form {
        border-top: 3px solid white !important;
        border-bottom: 3px solid white !important;
        border-left : none !important;
        border-right : none !important;
        margin-left : -18px;
    }

    The resulting form would look like this:

    https://form.jotform.com/63265306103951

    You can clone it to your own account if you would like:

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

     

  • Profile Image

    Answered by AbigailLadra on November 22, 2016 at 04:08 PM

    Thank you so much David.