Custom Contact Forms - Version 3.5.5

Version Description

  • custom-contact-forms.php - Plugin usage popover reworded
  • css/custom-contact-forms-admin.css - Admin panel display problem fixed
Download this release

Release Info

Developer tlovett1
Plugin Icon 128x128 Custom Contact Forms
Version 3.5.5
Comparing to
See all releases

Code changes from version 3.5.4 to 3.5.5

Files changed (6) hide show
  1. css/custom-contact-forms-admin.css +5 -1
  2. custom-contact-forms-popover.php +9 -0
  3. custom-contact-forms.css +314 -0
  4. custom-contact-forms.php +24 -24
  5. images/Thumbs.db +0 -0
  6. readme.txt +5 -1
css/custom-contact-forms-admin.css CHANGED
@@ -246,8 +246,12 @@
246
 
247
  #customcontactforms-admin #plugin-nav {
248
  clear:both;
 
 
 
 
 
249
  }
250
- #customcontactforms-admin #plugin-nav { text-align:center; border-bottom:1px #ccc dashed; margin:0 0 10px 0; padding:0 0 6px 0; }
251
  #customcontactforms-admin #plugin-nav li {
252
  border-right:1px solid #666; display:inline; padding:0 8px 0 3px;
253
  }
246
 
247
  #customcontactforms-admin #plugin-nav {
248
  clear:both;
249
+ max-width:1000px;
250
+ text-align:center;
251
+ border-bottom:1px #ccc dashed;
252
+ margin:0 0 10px 0;
253
+ padding:0 0 6px 0;
254
  }
 
255
  #customcontactforms-admin #plugin-nav li {
256
  border-right:1px solid #666; display:inline; padding:0 8px 0 3px;
257
  }
custom-contact-forms-popover.php ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ require_once('custom-contact-forms.php');
3
+ $customcontact = new CustomContactForms();
4
+ ?>
5
+ <html>
6
+ <body>
7
+ test
8
+ </body>
9
+ </html>
custom-contact-forms.css ADDED
@@ -0,0 +1,314 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom Contact Forms CSS */
2
+ form.customcontactform {
3
+ margin:8px;
4
+ width:95%;
5
+ max-width:600px;
6
+ font-size:1em;
7
+ padding:4px;
8
+ color:#333333;
9
+ }
10
+ form.customcontactform-sidebar {
11
+ width:100%;
12
+ max-width:600px;
13
+ padding:4px;
14
+ color:#333333;
15
+ font-size:1em;
16
+ }
17
+ form.customcontactform div, form.customcontactform-sidebar div {
18
+ list-style-type:none;
19
+ }
20
+ form.customcontactform div p, form.customcontactform-sidebar div p {
21
+ margin:0;
22
+ padding:4px 0 4px 0;
23
+ }
24
+ form.customcontactform div p {
25
+ border-bottom:1px dashed #999;
26
+ }
27
+ form.customcontactform h4, form.customcontactform-sidebar h4 {
28
+ font-size:1.4em;
29
+ font-weight:bold;
30
+ }
31
+ form.customcontactform div p label {
32
+ display:block;
33
+ padding:0;
34
+ width:100%;
35
+ }
36
+ form.customcontactform-sidebar div p label { width:100%; }
37
+ form.customcontactform div p label.checkbox, form.customcontactform-sidebar div p label.checkbox {
38
+ display:inline;
39
+ width:20%;
40
+ }
41
+ form.customcontactform div .show-field-instructions, form.customcontactform-sidebar div .show-field-instructions {
42
+
43
+ }
44
+ form.customcontactform div span.field-instructions, form.customcontactform-sidebar div span.field-instructions {
45
+ display:none;
46
+ }
47
+ form.customcontactform div p input[type=text], form.customcontactform div p textarea, form.customcontactform-sidebar div p input[type=text], form.customcontactform-sidebar div p textarea {
48
+ border-width:1px;
49
+ border-style:solid;
50
+ border-spacing:0;
51
+ font-weight:normal;
52
+ width:16em;
53
+ padding:2px;
54
+ clear:both;
55
+ margin:0;
56
+ font-size:1.1em;
57
+ font-family:Verdana, Arial, Helvetica, sans-serif;
58
+ -moz-border-radius:4px;
59
+ -khtml-border-radius:4px;
60
+ -webkit-border-radius:4px;
61
+ border-radius:4px;
62
+ word-wrap:break-word;
63
+ }
64
+ form.customcontactform p, form.customcontactform-sidebar p { padding:0 0 0px 17px; margin:0; }
65
+ form.customcontactform div p input[type=submit], form.customcontactform div p .submit, form.customcontactform-sidebar div p .submit {
66
+ font-size:1em; margin-left:2px;
67
+ }
68
+ form.customcontactform div p input[type=checkbox], form.customcontactform-sidebar div p input[type=checkbox] {
69
+ width:20px;
70
+ padding:0;
71
+ margin:0;
72
+ }
73
+ form.customcontactform-sidebar div p input[type=text], form.customcontactform-sidebar div p textarea {
74
+ width:90%;
75
+ font-size:12px;
76
+ margin:0;
77
+ }
78
+ /* ------------------ custom contact forms admin panel ---------------- */
79
+ #customcontactforms-admin {
80
+ vertical-align:top;
81
+ margin:1em 0 30px 25px;
82
+ }
83
+ #customcontactforms-admin input, textarea, select {
84
+ font-size:1em;
85
+ }
86
+ #customcontactforms-admin .icon32 {
87
+ margin:-6px 6px 9px 5px;
88
+ }
89
+ #customcontactforms-admin .inside {
90
+ padding:5px 10px 10px 10px;
91
+ }
92
+ #customcontactforms-admin h3 {
93
+ margin:0 0 7px 0;
94
+ height:25px;
95
+ padding: 7px 0 0 9px;
96
+ }
97
+ #customcontactforms-admin #instructions {
98
+ float:left;
99
+ width:450px;
100
+ margin:20px 1em 1em 1em;
101
+ }
102
+ #customcontactforms-admin #contact-author {
103
+ float:left;
104
+ width:450px;
105
+ margin:5px 1em 1em 6px;
106
+ }
107
+
108
+ #customcontactforms-admin #custom-html {
109
+ float:left;
110
+ width:520px;
111
+ margin:5px 1em 1em 6px;
112
+ }
113
+ #customcontactforms-admin #custom-html p { margin: 4px 0 4px 0 ; }
114
+ #customcontactforms-admin #custom-html #custom_html_textarea {
115
+ width:495px;
116
+ height:220px;
117
+ }
118
+ #customcontactforms-admin #contact-author form label {
119
+ display:block; font-weight:bold;
120
+ }
121
+ #customcontactforms-admin #instructions p:first-child {
122
+ padding-top:0;
123
+ margin-top:0;
124
+ }
125
+ #customcontactforms-admin #general-settings {
126
+ float:left;
127
+ clear:both;
128
+ width:500px;
129
+ margin:20px 1em 1em 5px;
130
+ }
131
+ #customcontactforms-admin #style-example {
132
+ background:url(images/style-example.gif) no-repeat top left;
133
+ width:405px;
134
+ height:135px;
135
+ padding-left:20px;
136
+ margin:10px 0 0 10px;
137
+ border:0;
138
+ }
139
+ #customcontactforms-admin #create-styles {
140
+ clear:both;
141
+ height:40em;
142
+ width:1000px;
143
+ margin:20px 1em 1em 5px;
144
+ }
145
+ #customcontactforms-admin #plugin-news {
146
+ clear:both;
147
+ width:1000px;
148
+ margin:20px 1em 1em 5px;
149
+ }
150
+ #customcontactforms-admin #plugin-news ul li.first { border-bottom:1px dashed #666; }
151
+ #customcontactforms-admin #manage-styles {
152
+ margin:1px 1em 1em 5px;
153
+ width:1000px;
154
+ }
155
+ #customcontactforms-admin #manage-styles label {
156
+ display:block;
157
+ }
158
+ #customcontactforms-admin #manage-styles input[type=text], #customcontactforms-admin #manage-styles select, #customcontactforms-admin #manage-styles textarea {
159
+ width:80px;
160
+ }
161
+ #customcontactforms-admin #create-styles .style_left { float:left; width:48% }
162
+ #customcontactforms-admin #create-styles .style_right { float:right; width:48%; clear:none }
163
+ #customcontactforms-admin #general-settings form div p.descrip {
164
+ font-style:italic;
165
+ padding-left:20px;
166
+ }
167
+ #customcontactforms-admin #general-settings form div p.show-widget {
168
+ margin-top:1em;
169
+ padding-top:.4em;
170
+ border-top:1px solid #ccc;
171
+ }
172
+ #customcontactforms-admin #create-fields {
173
+ float:left;
174
+ clear:left;
175
+ width:450px;
176
+ margin:0 1em 1em 5px;
177
+ }
178
+ #customcontactforms-admin #create-forms {
179
+ float:left;
180
+ width:500px;
181
+ border-left:1px solid #ccc;
182
+ margin:0 1em 1em 1em;
183
+ }
184
+ #customcontactforms-admin #create-forms .inside div p {
185
+ font-size:.8em;
186
+ }
187
+ #customcontactforms-admin .manage-h3 {
188
+ clear:both;
189
+ margin-top:20px;
190
+ }
191
+ #customcontactforms-admin #manage-fields {
192
+ width:1000px;
193
+ }
194
+ #customcontactforms-admin #manage-forms {
195
+ width:1000px;
196
+ margin-right:10px;
197
+ }
198
+ #customcontactforms-admin #manage-fixed-fields {
199
+ width:1000px;
200
+ }
201
+ #customcontactforms-admin .evenrow {
202
+ background-color:#f5f5f5;
203
+ }
204
+ #customcontactforms-admin .nobordertop {
205
+ border-top:none;
206
+ }
207
+ #customcontactforms-admin .borderbottom {
208
+ border-bottom:2px solid black;
209
+ }
210
+ #customcontactforms-admin .attached_fields {
211
+ float:left;
212
+ width:400px;
213
+ }
214
+ #customcontactforms-admin .attach_field {
215
+ float:left;
216
+ width:300px;
217
+ }
218
+ #customcontactforms-admin .actions {
219
+ float:right;
220
+ width: 80px; padding:0 18px 0 8px;
221
+ }
222
+ #customcontactforms-admin .attach_styles {
223
+ float:left;
224
+ width:300px;
225
+ }
226
+ #customcontactforms-admin label span {
227
+ font-weight:bold;
228
+ }
229
+
230
+ #customcontactforms-admin #plugin-nav {
231
+ clear:both;
232
+ }
233
+ #customcontactforms-admin #plugin-nav { text-align:center; border-bottom:1px #ccc dashed; margin:0 0 10px 0; padding:0 0 6px 0; }
234
+ #customcontactforms-admin #plugin-nav li {
235
+ border-right:1px solid #666; display:inline; padding:0 8px 0 3px;
236
+ }
237
+ #customcontactforms-admin #plugin-nav li.last {
238
+ border-right:none;
239
+ }
240
+ .width25 { width:25px; } .width50 { width:50px; } .width75 { width:75px; } .width100 { width:100px; }
241
+ .width125 { width:125px; } .width150 { width:150px; } .width175 { width:175px; } .width200 { width:200px; }
242
+ .width225 { width:225px; } .width250 { width:250px; } .width275 { width:275px; } .width300 { width:300px; }
243
+
244
+ .red { color:#F00; }
245
+ .bold { font-weight:bold; }
246
+ .italic { font-style:italic; }
247
+ .hide { display:none; }
248
+ .clear { clear:both; }
249
+ .textcenter { text-align:center; }
250
+ .floatleft { float:left; }
251
+ .floatright { float:right; }
252
+ .form-extra-options-table { margin:0 auto 0 auto; }
253
+
254
+ /* ----- popover box ---------- */
255
+
256
+ .ccf-popover {
257
+ position: absolute;
258
+ top:25%;
259
+ left:25%;
260
+ width:500px;
261
+ padding:10px;
262
+ background-color:#fff;
263
+ border:1px solid #666;
264
+ display:none;
265
+ }
266
+
267
+ .ccf-popover .ccf-popover-close { position:absolute; top:1px; right:5px; }
268
+ .tooltip {
269
+ background-color:#000;
270
+ border:1px solid #fff;
271
+ padding:10px 15px;
272
+ width:200px;
273
+ display:none;
274
+ color:#fff;
275
+ text-align:left;
276
+ font-size:12px;
277
+
278
+ /* outline radius for mozilla/firefox only */
279
+ -moz-box-shadow:0 0 10px #000;
280
+ -webkit-box-shadow:0 0 10px #000;
281
+ }
282
+ /* --- form success popover -------------------- */
283
+ #ccf-form-success {
284
+ display:none;
285
+ border: 9px solid #efefef;
286
+ border-spacing:0;
287
+ width:420px;
288
+ height:200px
289
+ padding:0px;
290
+ margin:0;
291
+ -moz-border-radius:35px;
292
+ -khtml-border-radius:35px;
293
+ -webkit-border-radius:35px;
294
+ border-radius:305px;
295
+ position:fixed;
296
+ left:30%;
297
+ background-color:white;
298
+ top:30%;
299
+ }
300
+
301
+ #ccf-form-success h5 {
302
+ background-color:#efefef; margin:0 0 15px 0;
303
+ text-align:left;
304
+ padding:9px;
305
+ font-size:1.5em;
306
+ font-weight:bold;
307
+ }
308
+ #ccf-form-success p { padding:8px; font-size:1.1em; text-align:center; }
309
+ #ccf-form-success a.close {
310
+ position:absolute;
311
+ right:12px;
312
+ font-size:1em;
313
+ top:7px;
314
+ }
custom-contact-forms.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Custom Contact Forms
4
  Plugin URI: http://taylorlovett.com/wordpress-plugins
5
  Description: Guaranteed to be 1000X more customizable and intuitive than Fast Secure Contact Forms or Contact Form 7. Customize every aspect of your forms without any knowledge of CSS: borders, padding, sizes, colors. Ton's of great features. Required fields, captchas, tooltip popovers, unlimited fields/forms/form styles, use a custom thank you page or built-in popover with a custom success message set for each form. <a href="options-general.php?page=custom-contact-forms">Settings</a>
6
- Version: 3.5.4
7
  Author: Taylor Lovett
8
  Author URI: http://www.taylorlovett.com
9
  */
@@ -133,16 +133,16 @@ if (!class_exists('CustomContactForms')) {
133
  <a href="javascript:void(0)" class="close">[close]</a>
134
  </div>
135
  <div class="popover-body">
136
- <p>CCF is an extremely intuitive plugin allowing you to create any type of contact form you can image. CCF is very user friendly but with possibilities comes complexity. It is recommend that you click the button below to add default fields, field options, and forms.
137
- The default content will help you get a feel for the amazing things you can accomplish with this plugin. This popover only shows up automatically the first time you visit the admin page; <b>if you want to view this popover again, click the "Show Plugin Usage Popover"</b> in the instruction area of the admin page.</p>
138
  <form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
139
  <input type="submit" class="insert-default-content-button" value="Insert Default Content" name="insert_default_content" />
140
  </form>
141
- <p>Below is a basic usage outline of the four pillars of this plugin: fields, field options, styles, and forms. Also explained below is the Custom HTML Feature which allows you to write the form HTML yourself and use the plugin simply as a form processor; this is great if you are a web developer with HTML experience.</p>
142
  <ul>
143
  <li>
144
  <h3>Fields</h3>
145
- <p>Fields are the actual input boxes that users enter their information inside. There are six types of fields that you can attach to your forms.</p>
146
  <ul>
147
  <li><span>Text:</span>
148
  <div><input type="text" class="width200" value="This is a text field" /></div></li>
@@ -154,38 +154,38 @@ if (!class_exists('CustomContactForms')) {
154
  <div><input type="radio" selected="selected" /> A radio field <input type="radio" selected="selected" /> Field Option 2 <input type="radio" selected="selected" /> Field Option 3</div></li>
155
  <li><span>Checkbox:</span>
156
  <div><input type="checkbox" value="1" /> This is a checkbox field</div></li>
157
- <li><span>(advanced) Hidden:</span> These fields are hidden (obviously), they allow you to pass hidden information with your forms. Great for using other form processors like Aweber or InfusionSoft.</li>
158
  </ul>
159
- <p>There are a bunch of different options that you can use when creating a field, <span class="red">*</span> denotes something required:</p>
160
  <ul>
161
  <li><span class="red">*</span> <span>Slug:</span> A slug is simply a way to identify your field. It can only contain underscores, letters, and numbers and must be unique.</li>
162
  <li><span>Field Label:</span> The field label is displayed next to the field and is visible to the user.</li>
163
  <li><span class="red">*</span> <span>Field Type:</span> The six field types you can choose from are explained above.</li>
164
- <li><span>Initial Value:</span> This is the initial value of the field. If you set the type as checkbox, it is recommend you set this to what the checkbox is implying. For example if I were creating the checkbox "Are you human?", I would set the initial value to "Yes". If you set the field type as "Dropdown" or "Radio", you should enter the slug of the field option you would like initially selected.</li>
165
- <li><span>Max Length:</span> If a field is required and a user leaves it blank, the plugin will display an error message explainging the problem.</li>
166
- <li><span>Required Field:</span> If a field is required and a user leaves it blank, the plugin will display an error message explainging the problem. The user will then have to go back and fill in the field.</li>
167
  <li><span>Field Instructions:</span> If this is filled out, a stylish tooltip popover displaying this text will show when the field is selected. This will only work if JQuery is enabled in general options.</li>
168
- <li><span>Field Options:</span> After you create a field, if it's type is radio or dropdown, you can attach field options to the field. Field options are explained next.
169
  </ul>
170
- <p>The last important thing related to fields are <span>Fixed Fields</span>. Fixed Fields are special fields that come already created within the plugin such as a captcha spam blockers and email field. Fixed Fields do special things that you wouldn't be able to accomplish with normal fields; they cannot be deleted or created. If you use the fixedEmail fixed field, as opposed to creating your own email field. the uesrs email will be checked to make sure it is valid, if it isn't a form error will be displayed.</p>
171
  </li>
172
  <li>
173
  <h3>Field Options</h3>
174
  <p>In the field section above, look at the radio or dropdown fields. See how they have multiple options within the field? Those are called Field Options. Field Options have their own manager. There are only three things you must fill in to create a field option.</p>
175
  <ul>
176
- <li><span class="red">*</span> <span>Slug:</span> Used to identify this option, solely for admin purposes; must be unique, and contain only letters, numbers, and underscores. Example: "slug_one".</li>
177
  <li><span class="red">*</span> <span>Option Label:</span> This is what is shown to the user in the dropdown or radio field.</li>
178
- <li><span>Option Value:</span> This is the actual value of the option which isn't shown to the user. This can be the same thing as the label. An example pairing of label => value is: "The color green" => "green" or "Yes" => "1". The option value is behind the scences; unseen by the user, but when a user fills out the form, the option value is what is actually sent in the email to you. For dropdown fields the option value is optional, <span>for radio fields it is required</span>.</li>
179
  </ul>
180
  <p>Once you create field options, you can attach them (in the field manager) to radio and dropdown fields (that are already created). It is important to remember that after you create a dropdown or radio field, they will not work until you attach one or more field options.</p>
181
  </li>
182
  <li>
183
  <h3>Forms</h3>
184
- <p>Forms bring everything together. Each form you create in the form manager shows a code to display that form in posts/pages as well has theme files. The post/page form display code looks like: [customcontact id=FORMID]. There are a number of parameters that you can fill out when creating and managing each of your forms.</p>
185
  <ul>
186
  <li><span class="red">*</span> <span>Slug:</span> A slug is simply a way to identify your form. It can only contain underscores, letters, and numbers and must be unique. Example "my_contact_form"</li>
187
- <li><span>Form Title:</span>The form title is heading text shown at the top of the form to users. Here's an example: "My Contact Form".</li>
188
- <li><span class="red">*</span> <span>Form Method:</span> If you don't know what this is leave it as Post. This allows you to change the way a form sends user information.</li>
189
  <li><span>Form Action:</span> This allows you to process your forms using 3rd party services or your own scripts. If you don't know what this is, then leave it blank. This is useful if you use a service like Aweber or InfusionSoft.</li>
190
  <li><span>Form Style:</span> This allows you to apply styles you create in the style manager to your forms. If you haven't created a custom style yet, just choose "Default".</li>
191
  <li><span>Submit Button Text:</span> Here, you can specify the text that shows on the submit button.</li>
@@ -193,15 +193,15 @@ if (!class_exists('CustomContactForms')) {
193
  <li><span>Form Destination Email:</span> Specify the email that should receive all form submissions. If you leave this blank it will revert to the default specified in general settings.</li>
194
  <li><span>Form Success Message:</span> Will be displayed in a popover after the form is filled out successfully when no custom success page is specified; if left blank it will use the default specified in general settings.</li>
195
  <li><span>Form Success Message Title:</span> Will be displayed in a popover when the form is filled out successfully when no custom success page is specified; if left blank it will use the default specified in general settings.</li>
196
- <li><span>Custom Success URL:</span> If this is filled out, users will be sent to this page when they successfully fill out the specified form. If it is left blank, a popover showing the form's "success message" will be displayed on form success.</li>
 
197
  </ul>
198
  <p>The form success message and success title apply to a popover that fades in after someone successfully completes a form (that does not have a custom success URL provided). The image below will help to give you a feel to how the popover will look and where the title and message actually show up.</p>
199
  <div class="ccf-success-popover-example"></div>
200
- <p>After creating a form you are given the option to attach fields to that specific form. Forms are useless until you attach fields.</p>
201
  </li>
202
  <li>
203
  <h3>Style Manager</h3>
204
- <p>The style manager allows you to customize the appearance of forms without any knowledge of CSS. There are a ton of parameters you can fill out with each style and all of them are pretty self-explanitory. After you create a style, you need to go to the form manager and set the form style to the new style you created (the slug will be what shows in the Form Style dropdown).</p>
205
  <p>The image below will help you better understand how each style option will change your forms.</p>
206
  <div class="ccf-style-example"></div>
207
  </li>
@@ -209,11 +209,11 @@ if (!class_exists('CustomContactForms')) {
209
  <h3>Custom HTML Forms Feature (advanced)</h3>
210
  <p>If you know HTML and simply want to use this plugin to process form requests, this feature is for you. The following HTML is a the framework to which you must adhere. In order for your form to work you MUST do the following:</p>
211
  <ul>
212
- <li>Keep the form action/method the same (yes the action is supposed to be empty)</li>
213
- <li>Include all the hidden fields shown below</li>
214
- <li>Provide a hidden field with a success message or thank you page (both hidden fields are included below, you must choose one or the other and fill in the value part of the input field appropriately)</li>
215
  </ul>
216
- <p>Just to be clear, you don't edit the code in the Custom HTML Forms feature within the admin panel. Instead, you copy the code in to the page, post, or theme file you want to display a form, then edit the code to look how you want following the guidelines above.</p>
217
  </li>
218
  </ul>
219
  </div>
3
  Plugin Name: Custom Contact Forms
4
  Plugin URI: http://taylorlovett.com/wordpress-plugins
5
  Description: Guaranteed to be 1000X more customizable and intuitive than Fast Secure Contact Forms or Contact Form 7. Customize every aspect of your forms without any knowledge of CSS: borders, padding, sizes, colors. Ton's of great features. Required fields, captchas, tooltip popovers, unlimited fields/forms/form styles, use a custom thank you page or built-in popover with a custom success message set for each form. <a href="options-general.php?page=custom-contact-forms">Settings</a>
6
+ Version: 3.5.5
7
  Author: Taylor Lovett
8
  Author URI: http://www.taylorlovett.com
9
  */
133
  <a href="javascript:void(0)" class="close">[close]</a>
134
  </div>
135
  <div class="popover-body">
136
+ <p>CCF is an extremely intuitive plugin allowing you to create any type of contact form you can imagine. CCF is very user friendly but with possibilities comes complexity. It is recommend that you click the button below to create default fields, field options, and forms.
137
+ The default content will help you get a feel for the amazing things you can accomplish with this plugin. This popover only shows automatically the first time you visit the admin page; <b>if you want to view this popover again, click the "Show Plugin Usage Popover"</b> in the instruction area of the admin page.</p>
138
  <form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
139
  <input type="submit" class="insert-default-content-button" value="Insert Default Content" name="insert_default_content" />
140
  </form>
141
+ <p>Below is a basic usage outline of the four pillars of this plugin: fields, field options, styles, and forms. Also explained below is the Custom HTML Feature which allows you to write the form HTML yourself using the plugin simply as a form processor; this is great if you are a web developer with HTML experience.</p>
142
  <ul>
143
  <li>
144
  <h3>Fields</h3>
145
+ <p>Fields are the actual input boxes in which users enter their information. There are six types of fields that you can attach to your forms.</p>
146
  <ul>
147
  <li><span>Text:</span>
148
  <div><input type="text" class="width200" value="This is a text field" /></div></li>
154
  <div><input type="radio" selected="selected" /> A radio field <input type="radio" selected="selected" /> Field Option 2 <input type="radio" selected="selected" /> Field Option 3</div></li>
155
  <li><span>Checkbox:</span>
156
  <div><input type="checkbox" value="1" /> This is a checkbox field</div></li>
157
+ <li><span>(advanced) Hidden:</span> These fields are hidden (obviously), they allow you to pass hidden information within your forms. Great for using other form processors like Aweber or InfusionSoft.</li>
158
  </ul>
159
+ <p>There are a variety of different options that you can use when creating a field, <span class="red">*</span> denotes something required:</p>
160
  <ul>
161
  <li><span class="red">*</span> <span>Slug:</span> A slug is simply a way to identify your field. It can only contain underscores, letters, and numbers and must be unique.</li>
162
  <li><span>Field Label:</span> The field label is displayed next to the field and is visible to the user.</li>
163
  <li><span class="red">*</span> <span>Field Type:</span> The six field types you can choose from are explained above.</li>
164
+ <li><span>Initial Value:</span> This is the initial value of the field. If you set the type as checkbox, it is recommend you set this to what the checkbox is implying. For example if I were creating the checkbox "Are you human?", I would set the initial value to "Yes". If you set the field type as "Dropdown" or "Radio", you should enter the slug of the field option you would like initially selected (or just leave it blank and the first option attached will be selected).</li>
165
+ <li><span>Max Length:</span> This allows you to limit the amount of characters a user can enter in a field (does not apply to textareas as of version 3.5.5)</li>
166
+ <li><span>Required Field:</span> If a field is required and a user leaves it blank, the plugin will display an error message explaining the problem. The user will then have to go back and fill in the field properly.</li>
167
  <li><span>Field Instructions:</span> If this is filled out, a stylish tooltip popover displaying this text will show when the field is selected. This will only work if JQuery is enabled in general options.</li>
168
+ <li><span>Field Options:</span> After you create a field, if it's field type is radio or dropdown, you can attach field options to the field. Field options are explained in the next section.
169
  </ul>
170
+ <p>The last important thing related to fields are <span>Fixed Fields</span>. Fixed Fields are special fields that come already created within the plugin such as the captcha spam blocker and email field. Fixed Fields do special things that you wouldn't be able to accomplish with normally; they cannot be deleted or created. If you use the fixedEmail field, as opposed to creating your own email field. the users email will be checked to make sure it is valid, if it isn't a form error will be displayed.</p>
171
  </li>
172
  <li>
173
  <h3>Field Options</h3>
174
  <p>In the field section above, look at the radio or dropdown fields. See how they have multiple options within the field? Those are called Field Options. Field Options have their own manager. There are only three things you must fill in to create a field option.</p>
175
  <ul>
176
+ <li><span class="red">*</span> <span>Slug:</span> Used to identify the field option, solely for admin purposes; must be unique, and contain only letters, numbers, and underscores. Example: "slug_one".</li>
177
  <li><span class="red">*</span> <span>Option Label:</span> This is what is shown to the user in the dropdown or radio field.</li>
178
+ <li><span>Option Value:</span> This is the actual value of the option which isn't shown to the user. This can be the same thing as the label. An example pairing of label => value is: "The color green" => "green" or "Yes" => "1". The option value is behind the scences; unseen by the user, but when a user fills out the form, the option value is what is actually emailed to you and stored in the database. For dropdown fields the option value is optional, <span>for radio fields it is required</span>.</li>
179
  </ul>
180
  <p>Once you create field options, you can attach them (in the field manager) to radio and dropdown fields (that are already created). It is important to remember that after you create a dropdown or radio field, they will not work until you attach one or more field options.</p>
181
  </li>
182
  <li>
183
  <h3>Forms</h3>
184
+ <p>Forms bring everything together. Each form you create in the form manager shows a code to display that form in posts/pages as well as theme files. The post/page form display code looks like: [customcontact id=FORMID]. There are a number of parameters that you can fill out when creating and managing each of your forms.</p>
185
  <ul>
186
  <li><span class="red">*</span> <span>Slug:</span> A slug is simply a way to identify your form. It can only contain underscores, letters, and numbers and must be unique. Example "my_contact_form"</li>
187
+ <li><span>Form Title:</span> The form title is heading text shown at the top of the form to users. Here's an example: "My Contact Form".</li>
188
+ <li><span class="red">*</span> <span>Form Method:</span> If you don't know what this is leave it as "Post". This allows you to change the way a form sends user information.</li>
189
  <li><span>Form Action:</span> This allows you to process your forms using 3rd party services or your own scripts. If you don't know what this is, then leave it blank. This is useful if you use a service like Aweber or InfusionSoft.</li>
190
  <li><span>Form Style:</span> This allows you to apply styles you create in the style manager to your forms. If you haven't created a custom style yet, just choose "Default".</li>
191
  <li><span>Submit Button Text:</span> Here, you can specify the text that shows on the submit button.</li>
193
  <li><span>Form Destination Email:</span> Specify the email that should receive all form submissions. If you leave this blank it will revert to the default specified in general settings.</li>
194
  <li><span>Form Success Message:</span> Will be displayed in a popover after the form is filled out successfully when no custom success page is specified; if left blank it will use the default specified in general settings.</li>
195
  <li><span>Form Success Message Title:</span> Will be displayed in a popover when the form is filled out successfully when no custom success page is specified; if left blank it will use the default specified in general settings.</li>
196
+ <li><span>Custom Success URL:</span> If this is filled out, users will be sent to this page when they successfully fill out the form. If it is left blank, a popover showing the form's "success message" will be displayed on successful form submission.</li>
197
+ <li><span>Attach Fields:</span> After creating a form you are given the option to attach (and dettach) fields to that specific form. Forms are useless until you attach fields.</li>
198
  </ul>
199
  <p>The form success message and success title apply to a popover that fades in after someone successfully completes a form (that does not have a custom success URL provided). The image below will help to give you a feel to how the popover will look and where the title and message actually show up.</p>
200
  <div class="ccf-success-popover-example"></div>
 
201
  </li>
202
  <li>
203
  <h3>Style Manager</h3>
204
+ <p>The style manager allows you to customize the appearance of forms without any knowledge of CSS. There are a ton of parameters you can fill out with each style and all of them are pretty self-explanitory. After you create a style, you need to go to the form manager and set the form style to the new style you created (the slug will be what shows in the "Form Style" dropdown).</p>
205
  <p>The image below will help you better understand how each style option will change your forms.</p>
206
  <div class="ccf-style-example"></div>
207
  </li>
209
  <h3>Custom HTML Forms Feature (advanced)</h3>
210
  <p>If you know HTML and simply want to use this plugin to process form requests, this feature is for you. The following HTML is a the framework to which you must adhere. In order for your form to work you MUST do the following:</p>
211
  <ul>
212
+ <li>Keep the form action/method the same (yes the action is supposed to be empty).</li>
213
+ <li>Include all the hidden fields shown below.</li>
214
+ <li>Provide a hidden field with a success message or thank you page (both hidden fields are included below, you must choose one or the other and fill in the value part of the input field appropriately).</li>
215
  </ul>
216
+ <p>Just to be clear, you don't edit the code in the Custom HTML Forms feature within the admin panel. Instead, you copy the code in to the page, post, or theme file you want to display a form, then edit the code to look how you want following the guidelines provided above.</p>
217
  </li>
218
  </ul>
219
  </div>
images/Thumbs.db ADDED
Binary file
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: http://www.taylorlovett.com
4
  Tags: contact form, web form, custom contact form, custom forms, captcha form, contact fields, form mailers
5
  Requires at least: 2.8.1
6
  Tested up to: 3.0.1
7
- Stable tag: 3.5.4
8
 
9
  Gauranteed to be the most customizable and intuitive contact form plugin for Wordpress.
10
 
@@ -76,6 +76,10 @@ Visit http://www.taylorlovett.com/wordpress-plugins for screenshots. Right now a
76
 
77
  == Changelog ==
78
 
 
 
 
 
79
  = 3.5.4 =
80
  * custom-contact-forms.php - custom thank you redirect fix
81
  * custom-contact-forms-db.php - Style insert bug fixed, Unexpected header output bug fixed
4
  Tags: contact form, web form, custom contact form, custom forms, captcha form, contact fields, form mailers
5
  Requires at least: 2.8.1
6
  Tested up to: 3.0.1
7
+ Stable tag: 3.5.5
8
 
9
  Gauranteed to be the most customizable and intuitive contact form plugin for Wordpress.
10
 
76
 
77
  == Changelog ==
78
 
79
+ = 3.5.5 =
80
+ * custom-contact-forms.php - Plugin usage popover reworded
81
+ * css/custom-contact-forms-admin.css - Admin panel display problem fixed
82
+
83
  = 3.5.4 =
84
  * custom-contact-forms.php - custom thank you redirect fix
85
  * custom-contact-forms-db.php - Style insert bug fixed, Unexpected header output bug fixed