Apply the CCS of the enfold form on a CF7 form - Support | Kriesi.at

Tagged: cf7

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

Author

Posts

February 22, 2016 at 7:27 pm #587406

I-Visio

Participant

I would use the Enfold Form Layout of the demo (with 2 columns) on a form Contact Form 7.

Contact

I tried to apply the class but without success
Do I need to specify CCS with .wpcf7 input …. (as it is explain on WP7 docs), if so what do I need to do to duplicate the CCS of enfold to CF7

Thanks for your help

February 25, 2016 at 9:17 am #588825

Ismael

Moderator

Hey I-Visio!

Thank you for using Enfold.

Please add this in the Quick CSS field:

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
    -webkit-appearance: none;
    border: 1px solid #e1e1e1;
    padding: 8px 6px;
    outline: none;
    font: 1em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 0px;
}

#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px;
    border-radius: 2px;
}

#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
    border-color: #e1e1e1;
    background-color: #ffffff;
    color: #969696;
}

If this is not what you’re looking for, please provide a screenshot of the layout that you want.

Best regards,
Ismael

February 25, 2016 at 6:19 pm #589340

I-Visio

Participant

Hi,
Thanks for your reply.
I have added the code in the Quick CSS field [Theme Option > General Style > Quick CSS) with no effect.
Is it because, there’s already à style_custom.css ?<

I want to display a form with 2 columns (see screen shot)
http://dev.i-visio.website/Form_2016-02-25.png

Here is the code of the Contact Form 7 that I use :
Votre Nom (obligatoire)
[text* your-name-fr] 
Votre Prénom (obligatoire)
[email* your-firstname-fr] 
Votre Email (obligatoire) 
[email* your-email-fr] 
Société 
[text firm-fr] 
Adresse 
[text adress-fr] 
Code postal 
[number zipcode-fr] 
Ville 
[text city-fr] 
Tél. 
[tel tel-fr] 
Votre Message 
[textarea your-message-fr] 
[submit “Envoyer”]

Thanks again for your help.

February 25, 2016 at 6:36 pm #589354

Josue

Inactive Moderator

Hi!

Your HTML Markup is fine although i’d wrap the labels with actual labels, regarding the CSS try with this code instead:

.wpcf7-form, .wpcf7-response-output{
  clear:both;
}

.wpcf7-form-control-wrap {
  display: block !important
}

.wpcf7-form p br{display:none;}
.wpcf7-form label {display:block; visibility: visible; position: relative; }
.wpcf7-form label, .modified_width:before{display:block; visibility: visible; position: relative; margin-bottom: 7px; font-weight: 600;}

.wpcf7-form p{ position: relative; clear:both; float:left; width:100%;}
.wpcf7-form p.hidden{position: absolute; width:0px; left:0; top:0; }
.wpcf7-form .form_element_half{width:49.5%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_third{width:32.6%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_two_third{width:66.4%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_fourth{width:24.2%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_three_fourth{width:74.8%; float:left; margin-left:1%; clear:none;}

.wpcf7-form .first_form{clear:both;margin-left:0;}

#top .wpcf7-form .wpcf7-text, #top .wpcf7-form .wpcf7-select, #top .wpcf7-form .wpcf7-textarea{
  width:100%;
  margin-bottom:0;
  display:inline;
  min-width:50px;
  padding:13px;
  border-radius: 2px;
}

#top .wpcf7-form .wpcf7-select{
 -webkit-appearance: none;
 border-radius:0px;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
 background-position: center right;
 background-repeat: no-repeat;
 border-radius: 2px;
}

.wpcf7-form .button {
  margin: 0;
  padding: 16px 20px;
  border-radius: 2px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-weight: normal;
  font-size: 12px;
  min-width: 142px;
  outline: none;
}

.wpcf7-form p input, .wpcf7-form p textarea, .wpcf7-form p select{
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition:  all 0.3s ease-in-out;
  transition:     all 0.3s ease-in-out;
}

#top .wpcf7-form-control-wrap {
  display: block !important
}

#top .wpcf7-response-output{
  float: left;
  padding: 17px;
  border-width: 1px;
  border-style: dashed;
  margin-left: 0;
}

#top .wpcf7-response-output.wpcf7-validation-errors, #top .wpcf7-response-output.wpcf7-spam-blocked, #top .wpcf7-response-output.wpcf7-mail-sent-ng{
  background-color: #FFF8F4;
  border-color: #CDA18F;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #AF2C20;
}

#top .wpcf7-response-output.wpcf7-mail-sent-ok{
  background-color: #E0F1B5;
  border-color: #8BAF5B;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #4F5F39;
}

#top .wpcf7-not-valid-tip {
  color: #EF5D4F;
  display: block;
}
#top .wpcf7-display-none{
  display: none;
}

Best regards,
Josue

February 25, 2016 at 6:48 pm #589365

I-Visio

Participant

Thanks !

It seems great ;-)
Some adjustment with the captcha and for the responsive version.

Have a nice day

February 25, 2016 at 7:10 pm #589383

Josue

Inactive Moderator

You are welcome, let us know if you need help with that :)

Regards,
Josue

February 25, 2016 at 7:21 pm #589395

I-Visio

Participant

Thanks,
I’still have a problem with the Recapcha area and the Google Map (in the desktop version) or with the widget (in the mobile version).

Regards.

February 25, 2016 at 11:52 pm #589524

Josue

Inactive Moderator

Hey!

Add this for the captcha:

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

Please create a new topic for your GMaps problem.

Regards,
Josue

February 26, 2016 at 10:13 am #589629

I-Visio

Participant

Thanks Josue,

The GMaps problem come from the captcha, so everything works fine now.

Have a nice day.

Author

Posts

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

The topic ‘Apply the CCS of the enfold form on a CF7 form’ is closed to new replies.