fcvolunteer

Can you try replacing the existing portion of code with the example below so I can see how it’s placing the saved changes?

<p id="booked_events">Your event date: [select event_month include_blank "JAN" "FEB" "MAR" "APR" "MAY" "JUN" "JUL" "AUG" "SEP" "OCT" "NOV" "DEC" "Spring" "Summer" "Fall" "Winter"] [select event_date include_blank "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"] [select event_year include_blank "2012" "2013" "2014"]</p>

Can you post your url?

Did you figure it out? It seems like you got it working.

The best way to do this is to include all three shortcodes in the same <p></p> tag in your form code. Like the example below

<p>[shortcode1] [shortcode2] [shortcode3]</p>

@juni0rus I can tell you how to add the show hide fields but if you want to make any of them required I can’t help you with that because I’m having that issue myself and haven’t gotten any response here on the forum so I’m no help there.

To set up the show/hide fields follow this post here
the only thing you should know is that the jquery file they include in that post is not the most recent one. the latest is 1.8.2 and you can do a quick google search to download the latest version.

hope that helps

@george Vrettos I’m trying to get the validation to ignore required hidden fields which only become visible depending on what the visitor selects from the radio button options. I can’t get it to ignore them and then submit. I’ve used jquery to hide the fields but I’m pretty sure my problem is in the php. Did you have that problem? Do you have any suggestions?

My test form is here/

Thanks!

I’ve looked around some more and added this

$('.hide input').val('n/a');

to my javascript. The weird thing, is that it actually fills in all the hidden fields with “n/a” even if only the first radio button is selected, so no fields are empty but unless the 2nd radio button is selected (that’s the one that has the additional fields AND one is a required field) I get the yellow error “Validation errors occurred. Please confirm the fields and submit it again.” and it doesn’t submit.

Any ideas of what I can change in the javascript or php to get this to work? link to my test form

@juni0rus

I’m not sure I completely understand your reply, but what I understood was that you were able to change the submit button and now you’d like to know how to set individual field widths and not have all fields the same width.

in the css you can add something like what I have here (I used the id of your first text field)

input#text-pesel {
    width: 100px; /*change it to whatever you want*/
}

To set the width of a textarea the css above should work, as long as you change the #text-pesel to #put_textarea_id

No worries about the questions, we all have questions and that’s the only way to learn ??

@juni0rus I think it’s normal not to have the watermark but I’m not sure.

For the email, if your shortcode is this

[text* text-name id:text-name watermark "Your Name"]

then in your email area you should put this

[text-name]

Look for the green bar under the text “And, put this code into the Mail fields below.” It will have the correct code for each of your fields.

Yes you can change the send button to an image or icon, using css

input.wpcf7-submit[type="submit"] {
    background: url("image_url_here") no-repeat scroll 0 0 transparent !important;
}

@juni0rus I’m pretty sure that the correct shortcode is this:

[text* text-name id:text-name watermark "Your Name"]

Maybe a silly question but have you pasted the put this code into the Mail fields below into the “message Body” area?

Did you try using the watermark feature in the field creation area?

I don’t have a mac or access to one so I can’t really help you there, sorry.

@jason What browser are you using because when I look at your page both in firefox and chrome it seems fine. (firefox is having an issue with centering the text vertically but that can be fixed once you’re ready)

Hi Jason,

I would suggest you add a special class to the dropdown menu (see the example below)

[select record-menu class:replaceme]

and then you would add the following to your css

select.replaceme {
    min-height: 36px !important;
    width: 92% !important;
}

try this for your form code

<p class="form1">
[text* your-name class:textfield1 watermark "Your Name"]<br/>[email* your-email class:emailfield1  watermark "Your email"]<br/>[text* your-subject class:textfield1 watermark "Subject"]<br/>[textarea* your-message class:textarea1 watermark "Your Message"]</p>

<p>[submit class:submit1 "Send"]</p>

For your css, I don’t understand what wasn’t working.
Was it this code?

p.form1 span textarea

or this?

.textarea {
    height: 200px;
    width: 250px;
}

Either way, if you want to keep it how you have it now, that’s fine but you can replace

p.form1 span input, p.form1 span .textarea1, .emailfield1, .textfield1 {
    border-color: #F29E9B;
    border-style: solid;
    border-width: 2px;
    margin: 0 0 1px 20px !important;
}

with

p.form1 .textarea1, p.form1 .emailfield1, p.form1 .textfield1 {
    border-color: #F29E9B;
    border-style: solid;
    border-width: 2px;
    margin: 0 0 1px 20px !important;
}