-
wondaAsked on August 6, 2015 at 2:40 PM
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
-
BenReplied on August 6, 2015 at 3:43 PM
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:
-
wondaReplied on August 6, 2015 at 4:04 PMThank you very very much, I appreciate you help and speed
... -
BenReplied on August 6, 2015 at 4:16 PM
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 :)
-
wondaReplied on August 6, 2015 at 4:54 PMHi: Ben not sure how to add the email icon?
kind regards
... -
wondaReplied on August 6, 2015 at 5:04 PMHi I have embedded the code but it change the navigation bar height.😵
http://betatests.weebly.com/
Kind regards
... -
David JotForm Support ManagerReplied on August 6, 2015 at 6:53 PM
Please make sure to reduce the iframe height and width to adjust it:
-
wondaReplied on August 6, 2015 at 7:13 PM
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
-
CharlieReplied on August 7, 2015 at 3:08 AM
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.