How can I change the smartyStreets field to adopt the same design the rest of the form I created?

  • Profile Image
    AbigailLadra
    Asked 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

  • Profile Image
    david
    Answered 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
    david
    Answered 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
    AbigailLadra
    Answered on November 22, 2016 at 04:08 PM

    Thank you so much David.