When it comes to styling your Conversion forms with Jumplead you can either use the default Twitter Bootstrap 3 styles and add any overrides via the ‘Styles’ tab, or untick Twitter Bootstrap 3 and add styles from your existing website to match your design more closely.

The styles you add are applied directly to the form and these are the selectors you need to apply CSS to basic form elements within the ‘Styles’ tab:

/* Sample CSS */

/* Reduce width of form to 60% of its container: */
form {
width: 60%;
}

/* Change the font and size of input labels: */
label {
font-size: 10px;
  font-family: Arial;
}

/* Add a background color to text input fields: */
input[type="text"] {
background-color: #efefef;
}

/* Change the font and size of submit button: */
input[type="submit"] {
font-size: 10px !important; /* Use !important to force an override */
  font-family: Arial;
}

The basic structure of the form uses Bootstrap classes on top of standard form elements, so if you are moving your styles over to match your own website design you might need to update some of the selectors to match the rendered form. Using an element inspector in your web browser can help identify exact markup and help target your styles.

<div id="form">
    <form>
        <div class="form-group">
            <label class="control-label">Message<sup>*</sup></label>
            <textarea class="form-control"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">Name<sup>*</sup></label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group">
            <label class="control-label">Budget</label>
            <select class="form-control">
                <option>$100 - $999</option>
                <option>$1000 - $4999</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">Email<sup>*</sup></label>
            <input class="form-control" type="email">
        </div>
        <div class="form-group">
            <label for="form_Company" class="control-label">Company</label>
            <input class="form-control" type="text">
        </div>
        <div class="form-group">
            <label class="control-label">Phone</label>
            <input class="form-control" type="text">
        </div>
        <div>
            <input class="btn-large btn-primary btn" type="submit" value="Contact Us">
        </div>
    </form>
</div>

Did this answer your question?