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 style Autocompleted Address widget?

    Asked by testtrust on March 07, 2016 at 02:46 PM

    Hi, 

    How do I change the color of tittle-texts and the phrase "Enter your address here" on the field? 

    I also need to add a small sample below the shape.

    https://widgets.jotform.com/widget/autocompleted_address

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Mike_G on March 07, 2016 at 03:04 PM

    You can add the CSS code below to the Custom CSS tab of the widget.

    To change the color of the placeholder, "Enter your address here" on the field"

    ::-webkit-input-placeholder {

       color: red;

    }

    :-moz-placeholder { /* Firefox 18- */

       color: red;  

    }

    ::-moz-placeholder {  /* Firefox 19+ */

       color: red;  

    }

    :-ms-input-placeholder {  

       color: red;  

    }

    To change the color of text of the widget

    label {

    color: red !important;

    }

    I'm not sure what you mean here, "I also need to add a small sample below the shape."

    Can you help us understand what you want with your last concern by giving us more details so we can further assist you?

     

    Thank you.

  • Profile Image

    Answered by testtrust on March 07, 2016 at 03:43 PM

    Hi,

     

    I need to change the placeholder text and add Sub Label (small description below the input field) in 

    Autocompleted Address widget

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Mike_G on March 07, 2016 at 04:59 PM

    I will try to check if what you're trying to achieve possible using CSS codes and will get back to you as soon as possible.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on March 07, 2016 at 06:42 PM

    Here's an updated CSS code that you need to have inside the Custom CSS tab of the widget.

    You can change the value of the highlighted text to your preferred placeholder text.

    #autocomplete::-webkit-input-placeholder {

      color: transparent;

    }

    #autocomplete::-webkit-input-placeholder:before {

       color: red;

       content:"text sample" !important;

    }

    #autocomplete:-moz-placeholder { /* Firefox 18- */

       color: transparent;

    }

    #autocomplete:-moz-placeholder:before { /* Firefox 18- */

       color: red;

       content:"text sample" !important; 

    }

    #autocomplete::-moz-placeholder {  /* Firefox 19+ */

       color: transparent;

    }

    #autocomplete::-moz-placeholder:before {  /* Firefox 19+ */

       color: red;

       content:"text sample" !important;  

    }

    #autocomplete:-ms-input-placeholder {  

       color: transparent;

    }

    #autocomplete:-ms-input-placeholder:before {  

       color: red;

       content:"text sample" !important;  

    }

    label {

    color: red !important;

    }

    You can also change the value of the highligted text to your preferred sub-label.

    input#route, input#street_number, input#locality, input#administrative_area_level_1, input#postal_code, input#country{

    margin-bottom: 15px !important;

    }

    label#route::after{

    content: "Street Name" !important;

    position: absolute !important;

    left: 107px !important;

    top: 72px !important;

    font-size: 10px !important;

    }

    label#streetNumber::after{

    content: "House Number" !important;

    position: absolute !important;

    left: 107px !important;

    top: 115px !important;

    font-size: 10px !important;

    }

    label#locality::after{

    content: "City" !important;

    position: absolute !important;

    left: 107px !important;

    top: 158px !important;

    font-size: 10px !important;

    }

    label#administrativeAreaLevel1::after{

    content: "State" !important;

    position: absolute !important;

    left: 107px !important;

    top: 201px !important;

    font-size: 10px !important;

    }

    label#postalCode::after{

    content: "Postal Code" !important;

    position: absolute !important;

    left: 107px !important;

    top: 244px !important;

    font-size: 10px !important;

    }

    label#country::after{

    content: "Country" !important;

    position: absolute !important;

    left: 107px !important;

    top: 287px !important;

    font-size: 10px !important;

    }

    Here's a sample form I have used for testing: https://form.jotform.com/60665504093960

  • Profile Image

    Answered by testtrust on March 07, 2016 at 07:35 PM

    Hello,

     

    Thanks a lot.

    Last question: failure to add Sub Label in the first field where we have changed the placeholder. How to do it?

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by beril on March 08, 2016 at 04:07 AM

    On behalf of my colleague, you're kindly welcome, It is possible to add CSS code to add sublabel for your first field.

    We would appreciate it if you could add the CSS code below to the Custom CSS tab of the widget.

     label#route::before{

    content: "text example" !important;

    position: absolute !important;

    left: 10px !important;

    top: 30px !important;

    font-size: 10px !important;

     

    }

     

    If you want to delete the placeholder from your widget. Please give me some time, I will check it and get back to you soon.

  • Profile Image
    JotForm Support

    Answered by beril on March 08, 2016 at 04:33 AM

    If you update placeholder Code as you see below it will disable placeholder. You didn't ask that but I will also show that. If you change the content as you see below it will disable placeholder.

    #autocomplete::-webkit-input-placeholder {

      color: transparent;

    }

     

    #autocomplete::-webkit-input-placeholder:before {

       color: red;

       content:" " !important;

    }

    #autocomplete:-moz-placeholder { /* Firefox 18- */

       color: transparent;

    }

    #autocomplete:-moz-placeholder:before { /* Firefox 18- */

       color: red;

       content:" " !important; 

    }

    #autocomplete::-moz-placeholder {  /* Firefox 19+ */

       color: transparent;

    }

    #autocomplete::-moz-placeholder:before {  /* Firefox 19+ */

       color: red;

       content:" " !important;  

    }

    #autocomplete:-ms-input-placeholder {  

       color: transparent;

    }

    #autocomplete:-ms-input-placeholder:before {  

       color: red;

       content:" " !important;  

    }

    If you need any additional assistance, please do not hesitate contacting us. We will be happy to assist you.

  • Profile Image

    Answered by testtrust on March 08, 2016 at 04:42 AM

    Thanks a lot!!!

  • Profile Image
    JotForm Support

    Answered by beril on March 08, 2016 at 06:44 AM

    You are most welcome.=)

    Have a nice day!