Complex background to match website

  • Profile Image
    chriffle
    Asked 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.

  • Profile Image
    Welvin
    Answered 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
    chriffle
    Answered 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
    EliezerN
    Answered 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