I am attempting to place in an HTML pardot form into optinmonster in their floating footer option.
I'd like to have all three fields inline, which are represented, but have the button inline as well. Can someone please help me place the button inline with the fields?
HTML:
<form accept-charset="UTF-8" method="post" action="http://www2.achieveit.com/l/147781/2017-05-10/253zzn" class="form" id="pardot-form">
<p class="form-field Full_Name pd-text required required-custom "> <label class="field-label" for="147781_35111pi_147781_35111">Full Name *</label> <input type="text" name="147781_35111pi_147781_35111" id="147781_35111pi_147781_35111" value="" class="text" size="30" maxlength="65535" onchange="" /> <span id="error_for_147781_35111pi_147781_35111"
style="display:none"></span> </p>
<p class="form-field phone pd-text required required-custom "> <label class="field-label" for="147781_35077pi_147781_35077">Phone *</label> <input type="text" name="147781_35077pi_147781_35077" id="147781_35077pi_147781_35077" value="" class="text" size="30" maxlength="40" onchange="" /> <span id="error_for_147781_35077pi_147781_35077"
style="display:none"></span> </p>
<p class="form-field email pd-text required required-custom "> <label class="field-label" for="147781_35079pi_147781_35079">Corporate Email *</label> <input type="text" name="147781_35079pi_147781_35079" id="147781_35079pi_147781_35079" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 147781, 35079, 27620989);"
/> <span id="error_for_147781_35079pi_147781_35079" style="display:none"></span> </p>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;"> <label for="pi_extra_field">Comments</label> <input type="text" name="pi_extra_field" id="pi_extra_field" /> </p>
<!-- forces IE5-8 to correctly submit UTF8 content --><input name="_utf8" type="hidden" value="☃" />
<p class="submit"> <input type="submit" accesskey="s" value="Submit Request" /> </p>
CSS:
html div#om-hdg1tmojgfiv0dyjbqou {
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
form {
width: 100%;
padding: 0;
color: #fff;
overflow: hidden;
font-family: "Raleway", Helvetica, Arial, sans-serif;
text-align: center;
float: left;
}
form > * {
text-align: left;
}
form.form .errors {
font-size: .75em;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.description {
font-size: .65em;
opacity: .5;
margin-top: 5px;
display: inline-block;
}
.description a {
color: #17AB51;
}
.error.no-label {
font-size: .5em;
position: relative;
top: 0px;
right: 0px;
}
form.form p {
color: #414042;
width: 100%;
margin: 0 0 25px;
margin-right: 0%;
position: relative;
}
form.form p:nth-child(even) {
margin-right: 0;
}
form.form p label {
color: #414042;
display: block;
text-transform: uppercase;
font-size: .9em;
font-weight: 100;
margin-bottom: 5px;
}
form.form p.hidden {
position: absolute;
width: 190px;
left: -9999px;
top: -9999px;
}
form.form p input {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-variant-numeric: lining-nums;
}
form.form p.error input {
border: 1px solid #8D2008;
}
form.form p input:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p select {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
border-radius: 0;
background: #fff url(https://www.achieveit.com/wp- content/themes/achieveit/assets/img/chevron-down.png) 97% 50% no-repeat;
background-size: 25px;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
}
form.form p.error select {
border: 1px solid #8D2008;
}
form.form p select:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p textarea {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
height: 100px;
transition: all .2s;
font-weight: 100;
}
form.form p.error textarea {
border: 1px solid #8D2008;
}
form.form p textarea:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p.submit {
clear: both;
width: auto;
display: inline;
margin: 0 auto 25px;
text-align: center;
font-weight: 100;
}
form.form p.submit input[type="submit"] {
border: 0px solid #fff;
text-transform: uppercase;
color: #fff;
display: block;
width: auto;
padding-right: 5%;
padding-left: 5%;
background: #17AB51;
background-size: 10px;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
form.form p.submit input[type="submit"]:hover {
color: #fff;
background: #149141;
background-size: 20px;
}
form.form p.smalltext {
font-size: .5em;
color: #414042;
text-align: center;
float: none;
clear: both;
width: auto;
}
form.form p.smalltext a {
color: #414042;
text-decoration: underline;
}
@media screen and (min-width: 720px) {
form.form p {
/*width: 48%; float: left; margin-right: 4%; position: relative;*/
width: 20%;
float: left;
/*margin-right: 3%;*/
padding: 0 1%;
position: relative;
display: block;
vertical-align: top;
text-align: left;
}
form.form p:nth-child(even) {
margin-right: 0;
}
.error.no-label {
font-size: .5em;
position: absolute;
top: 6px;
right: 10px;
}
}
Here is my work: https://codepen.io/a_shelley/pen/ZKqZoo
