Contact form 7

usuniecie dodanego pliku do formularza w cf7:


function reset_form_element (e) {

	e.wrap('


<form>').parent('form').trigger('reset');

	e.unwrap();

}

$('#fileupload').after('<span id="reset">Reset file input</span>');

$('#reset').on ('click', function (e) {

	reset_form_element( $('#fileupload') );

});

radio button wymagany poprzez default:


[radio default:2 "Dining" "Accomodation" "Reservations" "Events&nbsp;+&nbsp;Meetings"]

Contact form 7 – style w sass:


  input[type="text"], input[type="email"], textarea, input[type="tel"]{
      background-color: #fff;
      border: solid 1px $color_border_gray;
      color: $color_text;
      font-size: 14px;
      @include font_base_light;
      border-radius: 0 !important;
      box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1) !important;
      @include transition( all 0.3s ease-in-out );
      text-align: center;
      &:focus, &.focus {
        border-color: $color_accent1;
      }
  }
  input[type="text"], input[type="email"], input[type="tel"]{
    height: 34px;
    line-height: 34px;
    width: 100%;
    max-width: 360px;
    padding: 0 10px;
  }
  textarea{
    overflow: auto;
    resize: none;
    width: 100%;
    height: 142px;
    padding: 15px;
  }

  input[type="submit"]{
    display: inline-block;
    text-align: center;
    width: 100%;
    max-width: 264px;
    height: 34px;
    line-height: 34px;
    background-color: $color_link;
    color: #fff;
    border: solid 1px $color_link;
    font-size: 14px;
    @include font_base_bold;
    cursor: pointer;
    margin: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-appearance: button;
    *overflow: visible;
    &:hover{
      background-color: $color_active;
      border-color: $color_active;
    }
  }

#websection  {
  span.wpcf7-not-valid-tip {
      color: #e20a87 !important;
      display: block;
      font-size: 13px !important;
      float: right;
  }
  div.wpcf7-response-output {
    float: left;
    margin: 10px 0 20px;
    min-height: 10px;
    width: 100% !important;
    padding: 10px 15px !important;
    text-align:center;
  }
  div.wpcf7-validation-errors, div.wpcf7-display-none {
      border: 1px solid #e20a87 !important;
  }
  div.wpcf7-mail-sent-ok{
      border: 1px solid #09849f !important;
  }
}


::-webkit-input-placeholder {
    color: rgba($color_text, 0.5);
    @include font_base_light;
}

:-moz-placeholder {
    color: rgba($color_text, 0.5);
    @include font_base_light;
}

::-moz-placeholder {
    color: rgba($color_text, 0.5);
    @include font_base_light;
}

:-ms-input-placeholder {
    color: rgba($color_text, 0.5);
    @include font_base_light;
}


/* page contact form */
#websection .wpcf7-form {
  margin: 20px 0;
  .field-form {
    width: 100%;
    input {
      width: 100%;
      text-align: left;
      font-size: 16px;
      margin: 10px 0;
      &[type="submit"] {
        width: 100%;
        text-align: center;
        float: right;
      }
    }
    textarea {
      margin: 10px 0;
      text-align: left;
    }
    p {
      text-align: left;
      margin: 0;
    }
    .f_captcha {
      input {
        width: 60%;
        float: right;
      }
    }

  }
}

 

#cf7 #Wordpress

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.