Important suggestion :)

  • Profile Image
    Webcreation
    Asked on November 04, 2012 at 05:32 PM

    Hi ;p
    I have a request for important suggestion which I think will satisfy many person. :)

    When we insert our forms in our websites, in the most part cases all is well.
    But when a user complete evil or does not complete a field that is mandatory that plays on our layout with the form on our website.

    For you, I found a way to remedy this situation.

    In advance thank you

  • Profile Image
    davidbp
    Answered on November 04, 2012 at 05:41 PM

    Can you please explain us in a better way what was your workaround? and if you still need assistance from us?

      thank you!

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 05:46 PM

    My amendment was made on image editing software, I is not developing solution, I do not know to do.

    But as we see it on the picture at the bottom, it will be better to put the warning of the field inside the obligation is not below to prevent enlargement and enlargement of the form for all distort the layout of the website.

    Do you understand?

  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:12 PM

    Yes, we understand and thank you for that workaround, it will be certainly  useful if some other users apply it

     

    Cheers!

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 06:15 PM
    HI @ Jeanettebmz :)

    But how do you want this solution to replace the current ?


    Kind regards
  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:18 PM

    I apologize the inconvenience for not totally getting what you want to accomplish, can you please share with me your FormID so I can further investigate and suggest a solution?

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 06:23 PM

    @ Jeanettebmz
    It is not only one, but all of my forms. That's why I suggest you submit my suggestion to your developer to implement this solution on all the forms of your users.

    In advance thank you

  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:29 PM

    If you are talking about the colors of the warnings or a better customization according to the website layout , this cannot be developed into a standarized solution.

    But there are workarounds through custom CSS codes . That is the reason why I was asking for the particular form and the URL where it is currently embedded to find a possible workaround through customized CSS codes

     

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 06:32 PM

    OK :)

    Is it possible to create a CSS code as shown in my picture at the bottom? 

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 06:36 PM

    Should I insert this:
    form-line-error {
    background:none repeat scroll 0 0;
    }
    If so, where should I put it? :/
  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:36 PM

    I need to see your form , please share with me its link

  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:37 PM

    Please check this guide

    So you know how to insert it

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 06:41 PM

    It is this form (for example) :

    http://form.jotformeu.com/form/20844770872359
  • Profile Image
    jeanettebmz
    Answered on November 04, 2012 at 06:59 PM

    So, which layout do you need to accomplish to? can you please show the form embedded into your webpage?

  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 07:00 PM

    @ Jeanettebmz
    I inserted the following CSS code and yet it does not work: /
    .form-line-error {
    background:none repeat scroll 0 0;
    }
  • Profile Image
    Webcreation
    Answered on November 04, 2012 at 07:07 PM

    This is as I would like to be on our website:

    http://www.jotform.com/uploads/Webcreation/form_files/3.png
  • Profile Image
    idarktech
    Answered on November 04, 2012 at 08:34 PM

    @Webcreation,

    In combination to my colleague's CSS, you may replace the codes with this:

     

    .form-error-arrow {

    display:none;

    }

    .form-error-message {

    -webkit-border-radius:0 !important;

    -moz-border-radius:0 !important;

    border-radius:0 !important;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }

     

    As a result:

    Guide: How to Inject Custom CSS Codes

    If you need anything else, just let us know. Thanks!

  • Profile Image
    Webcreation
    Answered on November 05, 2012 at 03:38 AM

     idarktech

     

    to not distort the form, I want within the field and not warning message below.

     How do I?


  • Profile Image
    idarktech
    Answered on November 05, 2012 at 07:18 AM

    Try this codes:

     

    .form-error-arrow {

    display: none;

    }

    #id_8 .form-error-message{

    bottom:48px !important;

    }

    .form-error-message {

    -webkit-border-radius: 0 !important;

    -moz-border-radius: 0 !important;

    border-radius: 0 !important;

    background: none !important;

    position: absolute !important;

    bottom: 10px !important;

    box-shadow: none !important;

    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    padding: 0 auto !important;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    Unfortunately, I can't add the red background because it would cover the input box which makes it unclickable. But don't you worry as long as I or my colleague's found something better, we'll update you here. Thanks!

  • Profile Image
    idarktech
    Answered on November 05, 2012 at 07:20 AM

    By the way, here's how it looks like.

    Thanks!

  • Profile Image
    liyam
    Answered on November 05, 2012 at 07:30 AM

    In addition to idarktech's code, you can also add this:

    .form-validation-error { background-color: pink; }

    Using this will make your textbox's background turn pink when the error appears.

  • Profile Image
    Webcreation
    Answered on November 05, 2012 at 07:35 AM

    Excellent this is what I wanted and it works!
    You really are a great team.
  • Profile Image
    Webcreation
    Answered on November 05, 2012 at 07:39 AM

    liyam
     Aïe, an error was of this slide in the code because once the text of warning in the field cannot me click on it to be able to just add the text in the field

    See example on my site:
    http://contacts.webcreation73.fr/contact.html
    (See the field: "your name:" or 'Votre nom")

  • Profile Image
    Webcreation
    Answered on November 05, 2012 at 07:47 AM

    Waiting for a solution, I'll remove the warning text. Like that, no payout than the icon " ! "

  • Profile Image
    idarktech
    Answered on November 05, 2012 at 08:13 AM

    @Webcreation,

    Ok, this code may help the input box clickable. Unfortunately the pink background may not useful this time since it covers the whole error message, we'll see if we can find another way to re-apply it. You can get the CSS codes here: http://pastie.org/pastes/5189359/text

    Thanks!