Support » Plugin: Fast Secure Contact Form » External custom CSS feature just added to Beta, please test

  • I really need users, who wanted this external custom CSS feature, to test it thoroughly before the Beta ends. If that is you, please help.

    Also, I need to add a few more ID tags, please tell me where they are needed.

    Fast Secure Contact Form 4.0 Beta 2
    http://www.fastsecurecontactform.com/beta

    More work on the Styles tab (09/15/2013):
    added new setting to “Select the method of delivering the form style”:
    “Internal Style Sheet CSS (default)”
    “External Style Sheet CSS (requires editing theme style.css)”
    By default, the FSCF form styles are editable below when using “Internal Style Sheet CSS”. The style is included inline in the form HTML.

    CSS experts will like the flexibility of using their own custom style sheet by enabling “External Style Sheet CSS”, then the FSCF CSS will NOT be included inline in the form HTML, and the custom CSS below must be included in the style.css of the theme. Be sure to remember this if you switch your theme later on.

    Premium themes may have added support for Fast Secure Contact Form style in the theme’s style.css. Select “External Style Sheet CSS” when instructed by the theme’s installation instructions.

    Note: if you use the setting “reset the alignment styles to labels on left(or top)”, or “Reset the styles of labels, field inputs, buttons, and text”, then the custom CSS below will reflect the changes. You would have to edit your custom CSS again to see the changes on the form.

    http://wordpress.org/plugins/si-contact-form/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Thread Starter Mike Challis

    (@mikechallis)

    in this example, where do you want ID tags to be?

    <div class="fscf-div-clear">
      <div class="fscf-div-field-left">
        <div class="fscf-div-label">
          <label class="fscf-label" for="si_contact_name1">Your name:<span class="fscf-required-indicator">*</span></label>
        </div>
        <div class="fscf-div-field">
          <input class="fscf-input-text" type="text" id="si_contact_name1" name="full_name" value=""  size="39" />
        </div>
      </div>
    </div>

    In the example I would want them to be on the 2 divs for the fields (<div class=”fscf-div-field-left”>, <div class=”fscf-div-field”>) so that I could control each field individually, if needed.

    Should there be a div for the label for field #2? Maybe ID’s for each label also. (ex. Someone may want to put an individual label using a different color than the rest of the form.)

    I meant… Should there be label for field #2?

    Thread Starter Mike Challis

    (@mikechallis)

    I have a feeling that whatever I do people just keep asking for more.
    Probably should just put an ID on all the divs, and the label that does not have one?

    The new external amendments are working great for me so thanks for that.

    With regards to the DIV ids: the extra DIVs aren’t necessary in order to target elements with CSS style rules, perhaps they’re there for the internal version or backwards compatibility. If not:

    <div class="fscf-row">
       <label for="si_contact_name1">Your name:<span class="fscf-required-indicator">*</span></label>
       <input type="text" id="si_contact_name1" name="full_name" value=""  size="39" />
     </div>

    should suffice, then target with:

    .fscf-row label {}  /* all labels in row divs */
    .fscf-row input {}  /* all inputs  in row divs */
    .fscf-row input[type="text"] {}  /* all inputs of type text */
    .fscf-row input[type="submit"] {}  /* the submit button */
    .fscf-row input#si_contact_name1 {}  /* the input with a specific ID */
    .fscf-row label[for="something"] {}  /* a specific label */

    Thread Starter Mike Challis

    (@mikechallis)

    2graphic,

    The program has 4 million downloads, it has to be backwards compatible. And there is a ‘labels on left’ / ‘labels on right’ toggle that has to still function. Those other divs are for alignment of ‘labels on left’ or ‘labels on right’.

    Note: if you use the setting “reset the alignment styles to labels on left(or top)”, or “Reset the styles of labels, field inputs, buttons, and text”, then the custom CSS will reflect the changes.

    Also you can override the input or label CSS in the field details, so that is also part of the equation.

    Thanks for the help everybody, I am still open to suggestions, and it would be nice to sort this out in the best way and quick before the beta ends. Please consider the backwards compatibility.

    You only need a unique ID on <div class=”fscf-div-field-left”> or even <div class=”fscf-div-clear”>, and then you can uniquely style it and any of the enclosed divs.

    Backwards compatibility is already broken if you’ve been doing custom styling with an external stylesheet, because the class names have been changed. It’s not a big deal, and I’ve already changed the class names in my stylesheet. You just have to look at the code with Firebug or equivalent tool.

    Unless I’m missing something, if you’re NOT using an external stylesheet, there shouldn’t be any problem with backwards compatibility. Right, Mike?

    Thread Starter Mike Challis

    (@mikechallis)

    OK, then is this settled?

    Can someone give some examples of how to fiddle individual field and labels colors

    this this example, the form # is the 1, and the field # is 0
    fscf_div_clear1_0

    also the form div container has ID id=”FSContact1″

    <div id="fscf_div_clear1_0" class="fscf-div-clear">
      <div id="fscf_div_field1_0" class="fscf-div-field-left">
        <div class="fscf-div-label">
          <label class="fscf-label" for="fscf_name1">Name:<span class="fscf-required-indicator">*</span></label>
        </div>
        <div class="fscf-div-field">
          <input class="fscf-input-text" type="text" id="fscf_name1" name="full_name" value=""  size="39" />
        </div>
      </div>
    </div>
    
    <div id="fscf_div_clear1_1" class="fscf-div-clear">
      <div id="fscf_div_field1_1" class="fscf-div-field-left">
        <div class="fscf-div-label">
          <label class="fscf-label" for="fscf_email1">Email address:<span class="fscf-required-indicator">*</span></label>
        </div>
        <div class="fscf-div-field">
          <input class="fscf-input-text" type="text" id="fscf_email1" name="email" value=""  size="39" />
        </div>
      </div>
    </div>

    Just added to beta download

    To style the label, no IDs or classed are required, because the “for” attribute is unique:
    label[for=”fscf_name1″] { color: #DD00EE; }

    To style the input field, all that’s needed is the unique ID:
    input#fscf_name1 { background-color: #BBECDB; }

    To style all the divs, use the class:
    .fscf-div-field-left { padding-top: 20px; }
    or
    div.fscf-div-field-left { padding-top: 20px; }

    To target one unique div, use the unique ID:
    #fscf_div_field1_0 { padding-top: 20px; }
    or
    div#fscf_div_field1_0 { padding-top: 20px; }

    Works great!

    I spoke too soon. IDs are needed for:
    <div class=”fscf-div-field-follow”>

    Thread Starter Mike Challis

    (@mikechallis)

    download updated, I think this is resolved now, thanks

    Changes since 4.0 Beta 3
    ————————
    Fix bug: time fields now obey required, not required.
    added new setting to Advanced tab: “Enable to skip names of non-required and unfilled-out fields in emails.”
    Fix bug: required field checkbox was stuck on required on every field when double email field was enabled.
    added more ID tags to form HTML.

    Ha, ha! I was just noticing the stuck “required” and was wondering what was up!
    Thanks! Downloading now…

    1) Much better on the time selectors. Because I’m sure people will accidentally leave it on AM, can you do the same with the AM/PM selector?

    2) Should fieldsets always be checked “Required field”?

    3) Does the “Save Changes” button within a field editor boundary do anything differently from the “Save Changes” button at the top or bottom of the page?

    Updated 4.0 Beta 2 to 3. Looks good!

    New external CSS is biggest win for the beta in my opinion

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘External custom CSS feature just added to Beta, please test’ is closed to new replies.