Pardot form - inline button form in OptinMonster

Question

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

Answer 1

You can write custom HTML on optinmonster floater. Go to Optinmonster Floater -> Integrations -> Add new -> Custom HTML. (Paste your HTML there in the box)

Then select Optin ->(scroll end)-> add your css directly.

Then restart the optinmonster floater.

Clear the browser cookies (If you have cookies set in optinmonster). Reload and then check.