Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #25223


    this is my contact form:

    I would like to make the input fields thinner (the padding seems to be very large). So I tried it with this code in my custom.css:

    #top .text_input, #top .select, #top .text_area{

    padding: 8px !important;


    This works pretty well, except that if you now want to enter the solution of the captcha equation, the input then is written right under the equation. It looks pretty messy.

    Any help apprechiated.




    Hi Doremus,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    /*removes margin from above and below form inputs*/
    .ajax_form p {
    margin: 0;

    /*padding inside the inputs*/
    #top .ajax_form .text_input, #top .ajax_form .select, #top .ajax_form .text_area {
    padding-top: 4px;
    padding-bottom: 4px;
    /*re add padding to captcha only*/
    #top .ajax_form .text_input.captcha {
    padding-top: 13px;
    padding-bottom: 13px;

    /*re add some space above the submit*/
    #top .ajax_form .button {
    margin-top: 13px;

    Modify as needed.




    Works like a charm! Thank you very much!


    Glad we could help :)

    Let us know if you have any other questions or issues.



Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Contact Form / Make Input fields thinner’ is closed to new replies.