Collapseable section containing a Contact Form in the widget sidebar.

  • Unknown's avatar
    samicox · Member ·

    Would someone be able to help out? I’ve setup a contact form and put it in the sidebar widget (as a text widget). It’s pretty big so would like some solutions to reduce its size while it’s not being used or focused on.

    1) to be able to make it collapseable, ideally to expand on hover of some text in the text widget and by clicking on the text too.

    2) to get control of the size to the text-area field. If it was possible to get control of the text fields too and reduce their size so that they could fit on the same row as the text field labels that would be a bonus.

    3) to be able to dynamically control the size of the text-area field, so that it’s small until hovered over or focused upon and then expands out so the person entering text has the full text-area to play with.

    4) Any other solutions.

    Thanks
    Sam

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Sam,

    I’ve setup a contact form and put it in the sidebar widget (as a text widget). It’s pretty big so would like some solutions to reduce its size while it’s not being used or focused on.

    1) to be able to make it collapseable, ideally to expand on hover of some text in the text widget and by clicking on the text too.

    That would require javascript or jQuery, and we cannot use those here at WordPress.com. This is not something that can be done with CSS.

    2) to get control of the size to the text-area field. If it was possible to get control of the text fields too and reduce their size so that they could fit on the same row as the text field labels that would be a bonus.

    Looking at the contact form in your sidebar, given the length of the labels, I would suggest against trying to put them both on one line since the labels are nearly50% the width of the sidebar content area. One thing that might help though would be to shorten the Question field, which originally is 200px tall. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. 

    .contact-form textarea {
    height: 60px;
}

    People can still grab the right bottom corner of the Question field and lengthen it if they need to.

    3) to be able to dynamically control the size of the text-area field, so that it’s small until hovered over or focused upon and then expands out so the person entering text has the full text-area to play with.

    See my reply to #1 above.

    Just in case you don’t work with CSS much or know much about it, it is a styling document used by the browsers to style and position the elements of a web page and cannot be used to add functionality, such as expanding and collapsing sections. The latest version of CSS, CSS3, has brought, and is still bringing more control and flexibility to CSS, but there are still limitations on what we can do with it.

    Keep asking your questions though, even if they seem outside of what would be doable since there are sometimes some CSS trickery we can use to get close to what you want.

  • The topic ‘Collapseable section containing a Contact Form in the widget sidebar.’ is closed to new replies.