WordPress.org

Forums

Fast Secure Contact Form
External custom CSS feature just added to Beta, please test (20 posts)

  1. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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/

  2. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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>
  3. jockoe
    Member
    Posted 1 year ago #

    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.)

  4. jockoe
    Member
    Posted 1 year ago #

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

  5. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  6. 2graphic
    Member
    Posted 1 year ago #

    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 */
  7. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  8. thenightrider
    Member
    Posted 1 year ago #

    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?

  9. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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

  10. thenightrider
    Member
    Posted 1 year ago #

    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!

  11. thenightrider
    Member
    Posted 1 year ago #

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

  12. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  13. thenightrider
    Member
    Posted 1 year ago #

    Ha, ha! I was just noticing the stuck "required" and was wondering what was up!
    Thanks! Downloading now...

  14. thenightrider
    Member
    Posted 1 year ago #

    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?

  15. Malae
    Member
    Posted 1 year ago #

    Updated 4.0 Beta 2 to 3. Looks good!

  16. davellorens
    Member
    Posted 1 year ago #

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

  17. thenightrider
    Member
    Posted 1 year ago #

    @davellorens: Yes! + the ability to drag & drop form fields. That arrived in the nick of time, because I needed to insert a field near the top of a form containing 51 fields. Props to Mike & Ken.

  18. paulcobb
    Member
    Posted 1 year ago #

    Trying to target HTML before and after in specific fields to align with input fields in a 'labels left' layout.
    Using what has been described above I can't figure out how this would be done

  19. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    paulcobb, since the labels and fields are in divs you might not be able to make it align with them. But I really do not know. If you had a URL to your form, I might be able to look at it.

  20. paulcobb
    Member
    Posted 1 year ago #

    @Mike Challis
    Thanks - i have actually styled the html in the before and after fields to achieve the alighment I was after

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Fast Secure Contact Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.