We showed how to easily customize your Amazing System web forms that we generate in 1Shoppingcart. These customizations include centering the form, making it mobile responsive, adding curved edges to some or all of the elements, tweaking the size of the form input fields, plus a whole lot more!
Center form – Add this into line 31
[sourcecode language=”plain”]
margin:auto;
[/sourcecode]
Mobile Responsive form – Change the width from a pixel value to a percentage on line 31
[sourcecode language=”plain”]
margin:auto; width:100%;
[/sourcecode]
Form Field Gradient Background – Add to line 17
[sourcecode language=”plain”]
background: linear-gradient(180deg, rgb(235, 235, 235) 20%, rgb(255, 255, 255) 40%);
[/sourcecode]
Box Shadow for form – Add to line 34 (feel free to adjust percentage to increase/decrease how dramatic of a shadow you’d like)
[sourcecode language=”plain”]
box-shadow: 0px 0px 40px #000000;
[/sourcecode]
Border Radius for text input fields (rounded corners) – Add to line 17 (feel free to adjust px to increase/decrease how dramatic of a curved corner you’d like)
[sourcecode language=”plain”]
border-radius:10px;
[/sourcecode]
Border Radius for button (rounded corners) – Add to line 35 (feel free to adjust px to increase/decrease how dramatic of a curved corner you’d like)
[sourcecode language=”plain”]
border-radius:20px;
[/sourcecode]
Set height of form input fields – Add to line 17 (feel free to adjust px to increase/decrease how tall you’d like your form imput fields to be)
[sourcecode language=”plain”]
height:34px;
[/sourcecode]