If your custom web form looks like this after embedding it on your website, it is most likely conflicting with the CSS style sheet on the webpage you are using.
To resolve this, copy and paste the highlighted code into your webpage editor, before and after your web form EMBED code, as shown below:
<center><style type="text/css">
div.wizard input[type="text"] {display:inline-block;}
div.wizard {line-height:normal;}
div.wizard input {padding:2px;}
</style>
<div class="wizard">
<!-- START EMBED CODE -->
THIS IS WHERE YOUR WEB FORM EMBED CODE WILL BE
<!-- END EMBED CODE -->
</div></center>
SAMPLE
<center><style type="text/css">
div.wizard input[type="text"] {display:inline-block;}
div.wizard {line-height:normal;}
div.wizard input {padding:2px;}
</style>
<div class="wizard">
<!-- START EMBED CODE -->
THIS IS WHERE YOUR WEB FORM EMBED CODE WILL BE
<!-- END EMBED CODE -->
</div></center>Note: Websites are all different, including their CSS styles sheet. The code above may not work for all websites. The code below is an alternative.
If the code above doesn't work, try replacing this part of the code:
SAMPLE
<center><style type="text/css">
div.wizard input[type="text"] {display:inline-block;} div.wizard {line-height:normal;} div.wizard input {padding:2px;} div.wizard table td{padding:0px;line-height:normal;}
div.wizard input:not([type="button"]):not([type="submit"]),
div.wizard textarea {padding:0px;margin:4px 0 0;} div.wizard table{margin-bottom:0px;} div.wizard table tbody>tr:nth-child(2n+0)>td, div.wizard table
tbody>tr:nth-child(2n+1)>td{background-color:initial;border:0px;}
div.wizard table tbody tr:hover>td{background:initial;} div.wizard input[type="text"]{padding:0px;margin:0 2px;} div.wizard select, input[type="submit"]{display:inline-block;margin:0
0;padding: 0 2px;}
</style>
<div class="wizard">
<!-- START EMBED CODE -->
THIS IS WHERE YOUR WEB FORM EMBED CODE WILL BE
<!-- END EMBED CODE -->
</div></center>