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

    Styling a submission response

    Asked by moseadan on July 08, 2013 at 12:25 PM

    Hey guys, was wondering if anyone had any tip on styling the responses i got.

     

    I want to get 2 outcomes from my submission fields.

    1. If a text field is not empty, show a green outline.

    2. If a text field has been set to "high-warning" then set a red outline to it.

     

    I tried to accomplish the first bit by a simple css rule;

    .valid-field {
      outline: 1px solid green;

     

    }
    So when submitting it, it would have a green outline;
    $('form').on('submit', function() {
      $('.formtext-area').addClass('valid-field');
    });
    Then the second task was accomplished by setting the belowl
    CSS:
    .high-warning:empty {
      outline: 1px solid red;
    }
    JS:
    $('form .formtext-area').each(function() { 
      $(this).addClass('high-warning'); 
    })
    So when i want it i would add class='high-warning' to the relevant fields. Any that are empty will have a read outline.
    I have done this for a form that i downloaded and edited its css and js to reflect this. But when submitted this does not happen. Can anyone assist, please?
    text field responses div
  • Profile Image
    JotForm Support

    Answered by EltonCris on July 08, 2013 at 01:56 PM

    Hi,

    This is possible.

    We'll get back to you with an example scripts later today. This might take a while.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 08, 2013 at 02:43 PM

    Sorry, I think I may have misunderstood your question. To clarify, are you going to change the style of the form fields or the submissions that is sent via Email?

    I think what you mean is changing the fields in your form. If this is correct, you can make your fields required so when you submit your form leaving the fields empty, it will create a red border on the fields and displays the error warning message. You can also modify the error styling by injecting custom CSS codes to your form.  How to Inject Custom CSS Codes to your Form

    However, if you like to customize it via source code, you can take this as an example: https://shots.jotform.com/elton/change_colors.html

    Here's the script:

    <script type="text/javascript">

    var allbox = $$('textarea');

    for(var i=0; i<allbox.length; i++){

    allbox[i].observe('keyup', colors);

    function colors(event){

    for(var i=0; i<allbox.length; i++){

    if (allbox[i].value=="") {

    allbox[i].setStyle({

      outline: '2px solid red'

    });

    }

    else{

     allbox[i].setStyle({

      outline: '2px solid green'

    });

    }

    }

    }

    }

    </script>

  • Profile Image

    Answered by moseadan on July 09, 2013 at 02:23 AM

    Hi Elton

     

    Thanks a lot for the prompt reply! 

    Yeah, i wanted to style the responses if possible. As in if i've marked a few fields as "high-warning", then any time someone does enter any text into them, it will stand out in the submissions. I know that currently it just sets it as text fields. In the submission report the text-box fields are set to the class "form-input". Say i wanted to highlight it in some way like red outline/text and with a bold effect. Would i then set a css style to that so it would show up on my responses or?

     

    And if not, is there a workaround?

    I'm also open to trying to submit another response based only if the fields that are set to "high-warning" are filled in. But that's a last resort though. 

     

    By the way, that is a great script, i'm definitely going to use that, thanks a lot for that! 

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 09, 2013 at 06:13 AM

    Hi,

    Thanks for your reply.

    I am not quite sure what you mean exactly with "mark a few fields as high-warning", would you please clarify this part? Do you mean, mark the fields as "Required"?

    You can only modify responses layout in your email notification. It is highly customizable, you can add text, change table colors and etc. Not quite sure if this is what you mean. Note that responses data appears as HTML format when it lands to email, you can't inject custom CSS codes there as we do not support it unless the CSS is defined as attributes. You can also modify your email layout via source code.

    Thanks!