Adjusting Contact Form 7 Textarea Size on Smaller Screens in WordPress

To dynamically adjust the size of a Contact Form 7 textarea on smaller screens, we’ll combine CSS media queries with the plugin’s built-in styling options.

1. Setting Initial Size:

• Using the Contact Form 7 Editor:

  • Add your textarea field to the form.
  • In the “Additional Settings” field, you can specify the initial cols and rows attributes. For example:
    

    [textarea* your-message cols="40" rows="5"]
    

• Using CSS:
  
  • You can directly style the textarea using CSS selectors. However, this approach might conflict with theme-specific styles.

2. Creating Responsive Styles with Media Queries:

• Add Custom CSS:

  • Create a custom CSS file or use a child theme’s stylesheet.
  • Target the textarea using a specific class or ID, or use a more general selector like .wpcf7-form-control-textarea.

• Write Media Queries:

  • Use media queries to apply different styles based on screen size. Here’s an example to reduce the cols and rows on smaller screens:
  CSS

  @media (max-width: 768px) {
      .wpcf7-form-control-textarea {
          cols: 30;
          rows: 3;
      }
  }
  

  • Adjust the max-width and the cols and rows values to suit your specific needs and design.