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

  • Profile Image
    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,



  • Profile Image
    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
    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("");
    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:

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


  • Profile Image
    Answered on November 22, 2016 at 04:08 PM

    Thank you so much David.