Styling Contact Form

  • soulluciani01

    (@soulluciani01)


    10 years, 10 months ago

    First I just want to say that this forum is awesome! I’m new to coding and really appreciate all you vets helping us newbies out, I have learned so much!

    So.. I’m using contact form 7 and I have it styled the way I would like with a few small exceptions.

    1) I would like the labels <Your Name (required)> to be inside the input field.
    2) With the default code, when I receive an email the from the form the “from, subject
    & message” fields are filled out. I would like my new form to have the same info.

    Here is the default code

    <p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

    Here is the code I am using. I know i’m missing a few things bit can’t quite figure it out.

    <div class="cir-divider-space clearfix"></div>
<div class="input-group"><div class="input-group-addon"><div class="icon-user"></div></div>[text* text-300 class:form-control]</div><br />
<div class="input-group"><div class="input-group-addon"><div class="icon-envelope"></div></div>[text* text-300 class:form-control]</div><br />
<div class="input-group"><div class="input-group-addon"><div class="icon-arrow-right3"></div></div>[text* text-300 class:form-control]</div><br />
[textarea* textarea-329 x6 class:form-control]
&nbsp;
[submit class:btn class:btn-sm "Send"]
Viewing 9 replies - 1 through 9 (of 9 total)
  • Pioneer Web Design

    (@swansonphotos)

    10 years, 10 months ago

    Please consult the plugin dev’s for specific questions on how to use it:

    https://wordpress.org/support/plugin/contact-form-7

    Ravikas kamboj

    (@ravikas)

    10 years, 10 months ago

    Hi soulluciani01,
    See below carefully to insert labels inside your input box. You have to put placeholder-
    ———————————————————————–
    <div class=”input-group”><div class=”input-group-addon”><div class=”icon-user”></div></div>[text* text-300 class:form-control placeholder “You name”]</div>

    See below carefully to send the correct email-
    ———————————————————————–
    Go to mail tab in contact form and put the new variable which are shown in your new textbox like- You will be seeing “from” label and “input box”, put these new variables in front of “from” label values–
    from-[text-300]

    and differentiate each variable not to do same

    Thread Starter soulluciani01

    (@soulluciani01)

    10 years, 10 months ago

    I know how to use the contact form was just looking for a little styling help. I figured it out tho… for the most part.

    This is what I used for anyone else wondering

    <div class="cir-divider-space clearfix"></div>
<div class="input-group"><div class="input-group-addon"><div class="icon-user"></div></div>
[text your-name placeholder "Your Name"] </div><br />

<div class="input-group"><div class="input-group-addon"><div class="icon-envelope"></div></div>[text your-email placeholder "Your Email"]</div><br />

<div class="input-group"><div class="input-group-addon"><div class="icon-arrow-right3"></div></div>[text your-subject placeholder "Subject"]</div><br />

[textarea your-message]
&nbsp;
[submit class:btn class:btn-sm "Send"]

    Pioneer Web Design

    (@swansonphotos)

    10 years, 10 months ago

    None of the code added above controls ‘styling’. It can output the classes needed to do so, but is not CSS.

    Thread Starter soulluciani01

    (@soulluciani01)

    10 years, 10 months ago

    Perhaps I used the term wrong. I used that code to give the some style to the contact form so it doesn’t look so bland. Once the elements were in place, I added some css to them.

    Did I use the term styling wrong?

    Pioneer Web Design

    (@swansonphotos)

    10 years, 10 months ago

    Yes.

    Thread Starter soulluciani01

    (@soulluciani01)

    10 years, 10 months ago

    I do have one other question about this.

    When I don’t fill in the required text* I get the red text alert underneath the field. The issue I am having is that it also adjusts the height of the .input-group-addon. Making it the same height as the field + the alert.

    Anyone have any suggestions to this?

    Ravikas kamboj

    (@ravikas)

    10 years, 10 months ago

    You have to use this below class for setting the css of errors and warnings red labels–

    .wpcf7-not-valid-tip{
    height:40px !important;
    }

    place it anywhere in your style.css or admin custom css area. This css works only for latest contact form 7.

    Thread Starter soulluciani01

    (@soulluciani01)

    10 years, 10 months ago

    hmm..

    When I use that code it does change the size of the .input-group-addon keeping it from changing in height but it also repositions the the .wpcf7-not-valid-tip.

    I don’t understand how the 2 are connected or what I need to do to keep the .input-group-addon from changing height.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Styling Contact Form’ is closed to new replies.