I want to add a frame to embed from

  • Profile Image
    idanfactor
    Asked on August 05, 2011 at 03:24 PM

    Hi,
    I embed the form in a site and without frame it looks pretty lame...

    Is there a possible to add a frame to a form (round corners will be just perfect).

     

     

     

  • Profile Image
    NeilVicente
    Answered on August 05, 2011 at 03:47 PM

    Hi,

    You would need to inject custom css to your form to achieve round corners for your form's border. Take a look at this sample form I created to demonstrate the capabilities of custom css.

    This is the custom css I used on that form:

    .form-all {
    background-color: lightgray;
    border: 1px solid gray;
    border-radius: 15px 15px 15px 15px;
    margin-top: 20px;
    padding-bottom: 10px;
    }

    Feel free to use these codes for your form. You can modify the values to suit your preference. For more web-safe colors, please refer to these sites:

    HTML Color Names
    HTML Color Codes

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea



     

    To learn more about rounded corner borders, please click here.

    Hope this helps. Let me know if you need more help with this topic. Thank you!


    Neil

  • Profile Image
    NeilVicente
    Answered on August 05, 2011 at 04:25 PM

    This post is in reference to your question posted in an unrelated thread

    Thanks works great.
    How can I eliminate the space between the frame and the first element of the form.

    You can see it here (Hebrew form)
    http://www.jotform.com/form/12161431244

    Add this code onto the codes I have provided for the form border:

    padding-top: 0;

    so it becomes:

    .form-all {
    background-color: lightgray;
    border: 1px solid gray;
    border-radius: 15px 15px 15px 15px;
    margin-top: 20px;
    padding-bottom: 10px;
    padding-top: 0;
    }

  • Profile Image
    idanfactor
    Answered on August 05, 2011 at 04:32 PM

    Not working.

    I think the problem is in the free HTML element.

    I may need to decrease the padding of the HTML element.

  • Profile Image
    NeilVicente
    Answered on August 05, 2011 at 04:42 PM

    Try this:

    p {
    margin: 0;
    }

    Hope this helps.

  • Profile Image
    idanfactor
    Answered on August 05, 2011 at 05:46 PM

    Thanls.

    Looks fine..

    :)

  • Profile Image
    brx250
    Answered on August 06, 2011 at 12:34 AM

    Hi there,

    We're glad you've sorted your issues already. If you have any other questions in the future, please feel free to contact us again. Our team will be more than happy to assist you with anything.

     ____________________________________________ 

    Albert  |  JotForm Support