Help styling forms

  • Resolved danstelter

    (@danstelter)


    8 years, 5 months ago

    Hey –

    See this URL:

    https://www.b2bleadgenguy.com/hubspot-lead-test-page/

    1) I want to the bold text to the left of the boxes to make the form shorter vertically.
    2) How do I get all the fields about the same length so the form looks pretty?
    3) What’s the best way to do automatic redirects? I want to track conversion rate.

    Design novice. However, I did successfully custom style the width of the submit button in style.css Can probably make these changes with simple instructions.

    Appreciate your help,

    Dan

Viewing 1 replies (of 1 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    You can indeed customize the look of every element on your site thanks to CSS. You can add that CSS to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard.

    For example, to start moving the fields and their labels around, you can do something like this:

    .contact-form {
    width: 50%;
}
.contact-form label {
    float: left;
}
.contact-form input {
    float: right;
}
.contact-form div {
    clear: both;
}

    You can then use your browser inspector to adjust the values and attributes to fit your needs. If you’re not familiar with this yet, you can check this little tutorial:
    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    3) What’s the best way to do automatic redirects? I want to track conversion rate.

    You can use the grunion_contact_form_redirect_url to redirect users to a specific page when they submit the form. See how to use the filter here;
    https://developer.jetpack.com/hooks/grunion_contact_form_redirect_url/

    You can find other ways to customize the contact form here:
    https://jetpack.com/2016/03/18/hook-of-the-month-customizing-contact-forms/

Viewing 1 replies (of 1 total)
  • The topic ‘Help styling forms’ is closed to new replies.