Accepting General conditions & Privacy Rules

  • Profile Image
    hasseltdelangeman
    Asked on October 15, 2021 at 04:24 PM

    Hello Support Team,

    I want to know how I can achieve the following thing:
    I want that the customer accept the genral terms of the company and the privacy rules. He has to check both items before being able to transmit the form.

    The second question is: I want to add a link to the general terms of the company and a link to the privacy rules which are opened in another window when the customer click on it to read them before approving them in the form.

    I hope that you can help me with these issues
    Kind regards.
    Daniel

  • Profile Image
    Laura_L
    Answered on October 15, 2021 at 05:51 PM

    Hi Daniel,

    You can use the Terms and Conditions widget to link your terms to the form:
    https://www.jotform.com/widgets/terms-and-condition

    Then you can make the field required, to make sure that the user has checked the field before proceeding:
    How-to-set-a-field-as-required-or-non-required

    Let us know if you have any further questions, and we are happy to help.


  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 06:03 AM

    Hei Laura,

    thanks for your help. Now I'm struggling with a second problem: how can I adjust the color of the text and the color from the link text because it is not visible on my formular. I was able to do it by adjusting the css code on the other fields but with this one it seems not to be possible. Can you look to it. Thanks in advance.

    1634378594_616aa362a6aff_


  • Profile Image
    Zahra_S
    Answered on October 16, 2021 at 06:33 AM

    Hi,

    To change the color of the hyperlink in you r form you can use this CSS code:

    a { 

    color: orange !important;

    text-decoration: underline !important;

    Also, to change the color of the text you have to change it from the default to light color in the Terms and Conditions widgets. Here is the GIF below:1634380365_616aaa4db9e4d_color of the te

    Feel free to ask for further assistance.


  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 07:02 AM

    Many many thyanks Zahra. This was very helpful. A last question: is there a way to align the text from the second an third line with the first line. I want the text is aligned with the "v" from the first line.
    Kind regards.
    Daniel

  • Profile Image
    Billy_G
    Answered on October 16, 2021 at 07:53 AM

    Hello Daniel,

    Please inject the CSS code below:

    #cid_36, #cid_35 {
    padding: 0 29px !important;
    }

    Result:

    1634385164_616abd0ca6364_

    Let us know if you need further assistance.

    Best regards,

  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 10:07 AM

    Hello Billy,

    Sorry, I think I explained it not correctly enough. Here below I made a drawing from what I want to obtain:

    I

    1634393133_616adc2d6e0a6_

  • Profile Image
    Billy_G
    Answered on October 16, 2021 at 10:20 AM

    The screenshot seems to be broken. Are you referring to something like this though?

    1634393767_616adea75aead_

    If so, please refer to the screencast below:

    1634393927_616adf477f70e_

    We'll be waiting for your response.

  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 11:13 AM

    Hello Billy,

    I put more information on my drawing to explain you what I want:

    The Easiest Online Form Builder (jotform.com)

    I have 2 remaining problems:


    1634397126_616aebc66f668_

    Please explain me alos where I have to place the css code you will send me. Thanks in advance.

  • Profile Image
    Jovanne_A
    Answered on October 16, 2021 at 11:27 AM

    Hi,

    Please allow me some time to check on this, and I will get back to you as soon as I have more information.

    Thank you!

  • Profile Image
    Jovanne_A
    Answered on October 16, 2021 at 11:40 AM

    Hi,

    For the first question, please try adding this custom CSS code to the widget's custom CSS section:

    div#cid_35 {
      margin-bottom: -30px !important;
    }


    1634398694_616af1e6340e6_


    For the second question, please try adding this custom CSS code to the Form Designer's custom CSS section:

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    div#cid_35 {
      margin-bottom: -30px !important;
    }


    Please give it a try and let us know how it goes.


  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 12:20 PM

    Hello Jovanne, the second issue is ok now. The strange thing is , that I see only the result in the preview mode but in the build mode I don't see the difference.

    The first issue isn't solved. May I ask you to do the modification from your side, so that I can see that it works. You can modify my original form. I try to unerstand how it works.

    https://form.jotform.com/212884755280362

    Thanks in advance


    1634401204_616afbb45069f_

  • Profile Image
    hasseltdelangeman
    Answered on October 16, 2021 at 02:34 PM

    Hello Support Team,


    the first issue is that in the last condition the text is not aligned. The second and third row text is more to the left then the first line. I want to have al the text aligned like here below: you may adjust my formular directly. I will try to understand what you did


    1634409232_616b1b10ab434_

  • Profile Image
    Mianala
    Answered on October 16, 2021 at 03:06 PM

    Hi there,

    Could you please try to inject the following code into the widget:

    label{
    position: absolute;
         }

    Please give it a try and let us know how it goes.


  • Profile Image
    hasseltdelangeman
    Answered on October 17, 2021 at 06:46 AM

    Hello Mianala,

    thanks for your advise. The text is now aligned to the left like I like it but I have still 2 problems:



    Problem 1: 1 line is missing. I have normally 3 lines. The text is now not completely visible (Image 1)

    Problem 2: why is the visualisation from my form different in buil mode and preview mode (Image 2).
    is there a solution for it. The spacing in the preview mode is correct, in the build mode wrong


    1634467474_616bfe9217e73_

    1634467550_616bfede2d604_



  • Profile Image
    Basil_A
    Answered on October 17, 2021 at 08:03 AM

    Hi,

    Please attempt adding the following CSS code into your widget instead:

    #main div{
      display: flex !important;
    }
    #userInput {
    margin-top: 3px;
    }


    Regarding the difference, it's because the builder doesn't always inperpret CSS code similar to the browser in the live form.

    Please let us know if you require any further assistance.

  • Profile Image
    hasseltdelangeman
    Answered on October 17, 2021 at 08:36 AM

    Hello Basil,

    thanks for your reply. May I ask you to look to the result after having inserted your css code. I removed this code again. May I ask you to adapt our form directly from your side so that you can see that the result is ok or make a copy of it when you prefer. I appreciate your help.

    The Easiest Online Form Builder (jotform.com)

    1634473571_616c16636eb10_

  • Profile Image
    Billy_G
    Answered on October 17, 2021 at 10:52 AM

    Allow me to work on your request. I'll reach out again as soon as I have an update.

    We appreciate your patience and understanding.

  • Profile Image
    Billy_G
    Answered on October 17, 2021 at 11:05 AM

    Thanks for patiently waiting.

    Please remove all the injected CSS code and insert mine below:

    #cid_36 {
    height: 90px !important;
    }
    #cid_36 > div > iframe {
    height: 100% !important;
    }

    Result:

    1634482948_616c3b04b59ea_

    Sample form: https://support.jotform.com/212894202053954/

    Let us know if you need further assistance.

    Best regards,

  • Profile Image
    hasseltdelangeman
    Answered on October 17, 2021 at 11:39 AM

    Hello Billy,

    many many thanks for your assistance. Now it is working like I want to have it. I have no experience with CSS and I think I will take a course because you need it when you want to make perfect forms. The only problem is that I have to find time. A day has only 24 hours.

    A last small question: Why is the red star (indicating that this field is required to be filled in) from the first condition is at the end of the line and on the last condition it is on the beginning of the line. This is strange because I used the same function.

    Kind regards.
    Daniel

    1634485114_616c437a7f89e_


  • Profile Image
    VincentJay
    Answered on October 17, 2021 at 11:56 AM

    Hi,

    To avoid confusion, I moved your other issue to a new ticket. Please check my reply on this link: https://www.jotform.com/answers/3435645

    Thank you!