Viewing 3 replies - 1 through 3 (of 3 total)
  • Chris

    (@curbano1972)

    I first would create a form:

    <ul id="contact">
     <center>
    <p><span style="padding-left: 5px;">[text* your-name class:text class:required placeholder "Name"] </span></p>
    
    <p><span style="padding-left: 5px;">[email* your-email class:text class:required placeholder "Email"] </span></p>
    
    <p><span style="padding-left: 5px;">[text* your-subject class:text class:required placeholder "Subject"] </span></p>
    
    <p><span style="padding-left: 5px;">[textarea* your-message id:message class:text class:required placeholder "Comments, etc."] </span>

    Notice the id=”contact” at the top? I would then open the style.css file and add the following code:

    /* Contact Form
    USE THIS ONE WITH Contact Form 7
    */
    
    #contact label {
            display:block;
    	padding:5px 0;
    font-family: Georgia, Arial, Helvetica, sans-serif;
    
    }
    
    #contact input, #contact textarea {
    	border:2px solid #0A3308;
    	padding:8px;
    	width:300px;
    	background:#F5F7F5;
    	margin-bottom:10px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;
    }
    
    #contact textarea {
    	width:300px;
    	font-family: Georgia, Arial, Helvetica, sans-serif;
    	font-size:13px;
    }

    Then adjust as necessary. Here is a similar example (the above is from a current project unpublished):

    https://start-here-online.com/contact/

    Chris

    (@curbano1972)

    The above form is only partial code to give you an idea of where to begin, which is why it is incomplete! ??

    The overall size of the form elements is generally controlled by the CSS in your current WordPress theme rather than the “size” you use in the Form section of the CF7. This refers to the size of the standard HTML size attribute which may or may not control overall element size.

    If you want to control the width of fields, you can do it by editing the CSS stylesheet in your theme. For details, see Styling Contact Form.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How do you increase the width of form fields?’ is closed to new replies.