Navigation
Archive / Horizontal layout for contact form 7
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 1, 2016 at 9:42 am #1112053
    iamnotsmart
    Participant

    🙂 How to get a horizontal layout for contact form 7? Like name, email etc on the left and the message field right next to it.

    Know what i mean?

    🙂 Thank you.

    August 1, 2016 at 9:58 am #1112093
    Joao
    Moderator

    Hi There,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Thanks

    Joao

    August 1, 2016 at 10:15 am #1112124
    iamnotsmart
    Participant
    This reply has been marked as private.
    August 1, 2016 at 10:28 am #1112149
    Joao
    Moderator

    Hi There,

    Upon checking your website I will need clarifications of what design you are looking for.

    We often do the Newsletter subscribe inline since there is just 2 or 3 fields with short content (name / surname / email)

    The contact form usually is stacked because the message field is much bigger and aligning horizontally will look a bit funny and not really user friendly.

    Please let us know what you are trying to achieve, if possible provide a mockup design so we can help you with that.

    Thanks

    Joao

    August 1, 2016 at 10:58 am #1112201
    iamnotsmart
    Participant

    🙂 You’re right. Let’s keep it vertical. How would i adjust / limit the height of the message field though?

    August 1, 2016 at 11:16 am #1112233
    Thai
    Moderator

    Hi There,

    To change the height of the textarea, please add the following CSS under Customizer > Custom > Global CSS:

    textarea.wpcf7-form-control.wpcf7-textarea {
    height: 100px;
}

    Hope it helps 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1112053 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>