Styling a submission response

  • Profile Image
    moseadan
    Asked 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?
  • Profile Image
    EltonCris
    Answered 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
    EltonCris
    Answered 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
    moseadan
    Answered 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
    EltonCris
    Answered 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!