Viewing 5 replies - 1 through 5 (of 5 total)
  • If you are able to include a link to your Contact Form 7 form, others here may be able to offer more assistance.

    Thread Starter lornalily

    (@lornalily)

    This is due to CSS styling applied to standard HTML form elements within your current WordPress theme at https://feedingkids.tv/wp-content/themes/flex/style.css

    Main problem is area is:

    input, textarea, select {
        border: 0 none;
        etc.
    }

    Change to:

    input, textarea, select {
        border: 1px;
        etc.
    }

    Use Firebug or Chrome Dev Tools to first understand and then change the CSS used for your CF7 form elements.

    Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don’t inadvertantly effect other elements on your website.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    This sets the border thickness and color of text boxes. It also set the radius of the corners (if you want something other than square) and the background color of the text area. Adjust as needed.

    /* sets CF7 textarea border and fill color */
    .wpcf7 input[type=text], .wpcf7 textarea {
    	border: 1px solid #A0A0A0;
    	border-radius:5px;
            background:#CCE5FF;

    If you don’t know the hex codes for colors, and who does, this is a great tool <https://www.rapidtables.com/web/color/RGB_Color.htm&gt; to keep in your toolkit.

    Thread Starter lornalily

    (@lornalily)

    Thank You so much davejampole and buzztone. I will look into the links provided and your code is going to be a fantastic help.

    Thanks.

    Lorna

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to make the form boxes show up’ is closed to new replies.