Contact form 7 návody a jeho nadstavby

Contact form 7 je free a univerzálny plugin na tvorbu kontaktných formulárov. Jeho funkcie môžete rozšíriť rôznymi ďalšími pluginmy:

Contact Form 7 Database Addon – CFDB7 – ukladanie správ do databázy

MultiLine files for Contact Form 7 – prijímanie viacerých súborov e-mailom a umožňuje prijať (dokumenty, zvuk, video a iné..)

Frontend Registration – Contact Form 7 – registruje užívateľa podľa vyplnených údajov vo formulári

Date Time Picker for Contact Form 7 – ( príklad použitia <label> Čas * [text text-258 class:walcf7-timepicker] </label>)

Only for Date Picker: walcf7-datepicker
Only for Time Picker: walcf7-timepicker
For both Date and Time Picker: walcf7-datetimepicker

Column Shortcodes – pridanie stĺpcov do formulára (potrebný Shortcode Enabler)

Contact Form 7 Shortcode Enabler – v podstate len aktivuje shortcody pridaním do kódu:

register_activation_hook( __FILE__, 'wpcf7_shortcode_enabler_activate' );
add_filter( 'wpcf7_form_elements', 'do_shortcode' );

Alebo to môžete pridať takto:
add_filter( 'wpcf7_form_elements', 'delicious_wpcf7_form_elements' );

function delicious_wpcf7_form_elements( $form ) {
  $form = do_shortcode( $form );
  return $form;
 
}

Viac nájdete tu:
https://developerrocket.com/contact-form-7-show-forms-on-two-columns/
https://deliciousthemes.com/contact-form-7-fields-columns/

Pridanie kópii emailov

Pridanie classov

Výhoda contact form 7 je napr. aj jednoduché priradovanie classov. Tu je príklad pridania classu smal ktorý si môžete nastaviť v css.

<label> Váš email [email* your-email1 class:small] </label>
class:btn

Nejaké CSS ktoré sa Vám zíde pre úpravu formulárov:

submit button

.wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     background: #E2272E;
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 33px;
     text-transform: uppercase;
     letter-spacing: 5px;
 }

 .wpcf7 input:hover[type="submit"] {
     background: #0A9E1C;
     transition: all 2.0s;
 }
 
.wpcf7 input:active[type="submit"] {
     background: #092AE4;
 }

farba poli a border

.wpcf7 input[type="text"],
 .wpcf7 input[type="email"],
 .wpcf7 input[type="textarea"],
 .wpcf7 input[type="submit"],
 textarea {
     font-size: 16px;
     font-family: Georgia;
     font-weight: bold;
     background-color: #F9F98F;
     border: 2px solid #000000;
     box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.3);
 }

Štýl 1:

.wpcf7 input, .wpcf7 textarea {
width: 90%;
color: #8e8e8e;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
box-shadow: inset 2px 2px 8px #bababa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.wpcf7 .wpcf7-list-item {
padding-left: 0;
margin-left: 0;
margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input {
border: none;
padding-left: 0;
margin-left: 0;
}

.wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active {
background: #ebf7f5;
outline: none;
}

.wpcf7 input.wpcf7-submit {
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
transition: 0;
border: none;
position: relative;
color: #fff;
text-shadow: 1px -2px 0px black;
text-transform: uppercase;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 35px;
padding-right: 35px;
/* Gradient background */
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));
background: -moz-linear-gradient(top, #4d1b5c, #000000);
/* Drop Shadow */
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* On hover */

.wpcf7 input.wpcf7-submit:hover {
cursor: pointer;
text-decoration: none;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));
background: -moz-linear-gradient(top, #4d1b5c, #6d2f80);
}

/* On click */

.wpcf7 input.wpcf7-submit:active {
top: 1px;
color: #d8c6e2;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));
background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c);

}

/* CF7 Messages */

.wpcf7 .wpcf7-validation-errors {
border: none;
background-color: #f4ae46;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok {
border: none;
background-color: #7ad33f;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng {
border: none;
background-color: #cf2d38;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: white;
}

.wpcf7 span.wpcf7-not-valid-tip {
border: none;
background-color: #cf2d38;
border-radius: 10px;
width: 180px;
color: white;
/* Drop shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.wpcf7-form .fleft {
float: left;
}

.wpcf7-form .mright20 {
margin-right: 20px;
}

.wpcf7-form .mright40 {
margin-right: 40px;
}

.wpcf7-form .clear {
clear: both;
}