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

    Complex background to match website

    Asked by chriffle on April 17, 2014 at 06:19 AM

    Hello

    I have a very simple form that I want to display in a similar format to an existing web page.  I want to the form to appear in a central black column against a striped background

    This is my form as it stands: http://form.jotformpro.com/form/41061639220950

     

    And this is my website that I am trying to emulate: http://mypenstripe.co.uk/login

     

    Be glad of your help.

    format hello and
  • Profile Image
    JotForm Support

    Answered by Welvin on April 17, 2014 at 10:53 AM

    Hi,

    Is this your desired output: http://www.jotformpro.com/form/41063959031957? If yes, remove your current form custom CSS codes and put this: http://pastiebin.com/534feaf301a59

    Let us know if you need further adjustments.

    Thanks

  • Profile Image

    Answered by chriffle on April 17, 2014 at 11:00 AM
    That’s brilliant – thank you.
    If you look at http://mypenstripe.co.uk/login the black form background has two ‘points on the bottom edge – how is this achieved?
    C
    ...
  • Profile Image

    Answered by EliezerN on April 17, 2014 at 02:48 PM

    Please take a look at this form: http://form.jotformpro.com/form/41065055704953

    Also note that I added two Text fields to the form to be able to make the edge.

    I highly recommend you to clone my form so that you can see the changes I made from closer: Here is how to clone a form: How to clone a form from a URL

    And here is the whole code I used:

    body, html {

    background: url(http://mypenstripe.co.uk/img/stripe-tile.png) !important;

    width: 100% !important;

    height: 100% !important;

    }

    .form-all {

    background: #000000 !important;

    color: #FFFFFF !important;

    height:1190px !important;

    margin-bottom: -200px !important;

    }

    .form-required {

    color: #00aec1;

    }

    .form-textarea {

    background: transparent !important;

    }

    .corner-left

    {

    width: 0;

    height: 0;

    border-top: 265px solid transparent;

    border-bottom: 265px solid transparent;

    position: relative;

    bottom: 65px;

    left:-39px;

    border-left: 265px solid black;}

    .corner-right

    {

    width:0;

    height: 0;

    border-top: 265px solid transparent;

    border-bottom: 265px solid transparent;

    position: relative;

    top: -635px;

    right:-196px;

    border-right: 265px solid black !important;

    }

    That includes the code my colleague gave you.

    Please let us know if you need further assitance with this query. 

    Thanks