How to achieve a form design as shown on screenshot?

Hi Jotform Support

I was hoping you could help me I wish to design a simple form design but I need some expertise help.

I have attached a screenshot.

kind regards 

Roy

form url : https://secure.jotformeu.com/form/5217560

You can achieve this by adding the following CSS code Roy:

#id_1 {
    float: left;
    height: 64px;
    margin: 0;
    padding: 0;
    width: 245px;
}
li#id_2 {
    clear: none;
    float: left;
    margin: 0 !important;
    padding: 0;
    width: 30px;
}
div.form-buttons-wrapper {
    margin: 0 !important;
}
ul.form-section {
    height: 70px;
    width: 400px;
}
#id_1 > label {
    display: none;
}
#cid_1, #cid_1 input {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
div.form-buttons-wrapper {
    left: -6px;
    margin: 0 !important;
    position: relative;
    width: 50px;
}

#cid_1, #cid_1 input {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
#input_1 {
    background-color: #666390;
    border: medium none;
    border-radius: 0;
    position: relative;
    top: 1px;
}

The only part that is missing is the icon of the email to the left, which you should add to your form, and we can then help you align it with the rest of the elements, but this is how it should look after this code is added:

Thank you very very much, I appreciate you help and speed
...

You are welcome Roy and as mentioned, once you have the icon that should go there and if you need us to help you with it, just let us know and we would be happy to help you with the layout :)

Hi: Ben not sure how to add the email icon?
kind regards
...

Hi I have embedded the code but it change the navigation bar height.😵
http://betatests.weebly.com/
Kind regards
...

Please make sure to reduce the iframe height and width to adjust it:

 

Hi BDavid the iframe code was auto generated it not part of the html code if know what I mean, I thinking is the code generated due to jotform=form (height and width).

 

Kind Regards

To confirm, the embed code was generated by us, is that correct? If you are using the iFrame embed code, please check our guide here: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. Please do take note that when you are embedding using the iFrame, you'll need to set a specific height in "px". Which means the height of your form will be fixed.

Here's a guide on how to embed your form to Weebly: https://www.jotform.com/help/215-Adding-a-Form-to-Weebly 

Let us know if that works.