Home / Forums / You Theme Support / Style parameters for Contact Form 7

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts

  • jordipalou
    Participant

    Hi,

    Since Contact Form 7 doesn’t provide a form with configurable fields to modify the style, I would appreciate to have a “generic” CSS, especially intended for those who can’t program CSS code, in which we can alter some values to fit our requirements. In my case, regarding the input fields I need:
    – reduce the gap between them,
    – reduce the height
    – reduce the width
    – put two fields in the same line (For example Name and Last Name)
    – modify the border (rounded, thicker,…)

    All the test I’ve done is in http://www.globalroom.org/#contact.

    Thanks in advance.

    Hi @jordipalou

    I can’t access the link that you sent. Can you please recheck?

    Regards,


    jordipalou
    Participant

    Ok, yes I forgot a letter. This is a one-page website with several sections. I meant the section Contacto so the right link is:

    http://globalroom.org/#contacto

    Regards,

    Hi @jordipalou

    Thanks for sending the correct link

    – reduce the gap between them
    – reduce the height

    For the gap, first you must remove the linebreaks you added between each input forms

    Once done, copy and paste this CSS into Theme Options > Custom CSS which should reduce the gap further then reduce the height of the forms as well

    .page .skinset-main input {
        margin-bottom: 0;
        padding: 0 10px;
        min-height: 35px;
    }

    – reduce the width
    The forms are set to occupy 100% of its container, if you want to decrease it, just add “width: 80%;” (or any value you prefer to the CSS above

    – put two fields in the same line (For example Name and Last Name)
    You can create an HTML table then put the name and last name on the same row on separate columns. That is the easiest way to put them inline.

    – modify the border (rounded, thicker,…)

    For border, just add these to the CSS above:

        border: 1px solid #000000;
        border-radius: 10px;

    Change the value again based on you preference.

    Regards,


    jordipalou
    Participant

    Thank you Edcel,

    Your CSS works pretty well although I cannot appreciate any difference with the gap between input fields.
    Regarding the HTML table, as I’m not code programmer I don’t understand you, but in any case, I can’t see how to integrate the HTML table with the Contact Form 7 element.

    Regards,

    Hi @jordipalou

    Please send over your login credentials so I can check what you have done on Contact Form 7’s interface and so I can show you how to integrate the table.

    Regards,


    jordipalou
    Participant
    This reply has been marked as private.

    Hi @jordipalou

    I have made the necessary changes now. Please check if everything looks good from your end

    Regards,


    jordipalou
    Participant

    Thank you very much Edcel, I saw the changes in the Contact Form 7 settings. Now it’s Ok.

    You’re welcome, @jordipalou

    If you like the theme, please don’t forget to rate it at https://themeforest.net/item/you-multipurpose-responsive-wordpress-theme/15175900?s_rank=2

    Regards,

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

You must be logged in to reply to this topic.