May 252014
 

Fast Secure Contact Form Label Inside Field helps you display the labels inside the fields to create a custom form.

Last Updated: February 26, 2017

Latest News: I have fixed a broken link.

Fast Secure Contact Form Label Inside Field Setup

Step 1 ) Go to Settings -> FS Contact Form -> Fields and select the fields you want to edit. See images below.

The following image displays the field that will be changed. The Label name Name: and also the Save Changes button which you need to click on when you finish editing the field or the form.

fast-secure-contact-form-field-settings

Step 2 ) The following image lets you know that the field you are currently working on is a text type field.

fast-secure-contact-form-field-type

Step 3 ) In the following image you will enter a Default name. For this field I entered Name and I also selected Required field option.

Info: You can enter any field name you wish. 

fast-secure-contact-form-default

Step 4 ) In the following image you will select Hide label and also Default as placeholder options.

fast-secure-contact-form-hide-label

Step 5 ) The following image displays your labels inside the fields. That is how simple it is to create this form.

fast-secure-contact-form-labels-inside-field

Click on the following link Two Columns Layout to continue with the next tutorial.

I will be updating this tutorial from time to time so keep coming back for the latest. If you have any questions please let me know.

Enjoy

Go Back To WordPress Fast Secure Contact Form Plugin List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

  5 Responses to “Fast Secure Contact Form Label Inside Field”

  1. I need to change the color of the placeholder text. I have changed the color of the fields and now you can’t see the color of the placeholder.
    Also I have made the form two columned and I would like to get rid of the white line between the Welcome Introduction and the Fields.

    • Hi Karen, thank you for your question. It is going to be a bit challenging because you have a background image. What you can try on one field first is to remove the background-color and add opacity: 0.18 !important;. Play around with the opacity value until you find what you want.

      Let me know if you need more help.

      • Hi Karen, disregard my previous solution, because if you set field text color to white then the opacity will make it invisible. Unless you change the text color to a different color then you might be able to use the opacity value.

        If it doesn’t work then you might have to remove the inline text placeholder altogether. If not it will be very challenging to make it work.

        Regards

  2. Hi! Thanks for this flexible contact form. I have just one question. How can I add a placeholder to an input field that uses the date picker?

    • Hi Alexander, the placeholder currently does not function with the date field. You might like to make a request in the plugin forum.

      Kind regards

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

seven + 10 =