PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Making this form

  1. tanksalot
    Member

    I would like to make a form like the subscription form at http://www.projectrev2012.com/ There is a placeholder and the send button looks to be inside the text field. I've gotten to the point that I have a text field, "Enter your email here" above the field, and a subscribe button below it. I've also put an HTML box beneath the field for the "You can also Subscribe to our RSS feed" bit. I know HTML 5 allows for placeholders and GF is not yet supporting that. As far as I can tell either is that form. How is it done? Can it be done with GF? Can someone walk me through the process of making that form (short of using that other plugin). If so, what need to be done?

    Posted 8 years ago on Friday January 27, 2012 | Permalink
  2. This should help you out with your placeholder text:

    http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

    You should also be able to position your submit button via CSS.

    Here is a reference: http://www.gravityhelp.com/resources/cssguide/css_guide.html

    Posted 8 years ago on Friday January 27, 2012 | Permalink
  3. tanksalot
    Member

    Thanks Rob.
    I was hoping I didn't have to use that first tutorial because I really don't know how to implement it within Headway Theme v.3. I've made a child theme with just the basic files needed to do so ( functions.php, images folder, and styles.css). Do I need to create a header.php now?

    I figured CSS would be the ticket for moving the .button inline. I just haven't figured out how to move it into the field. Any thoughts?

    Posted 8 years ago on Friday January 27, 2012 | Permalink
  4. tanksalot
    Member

    I got some help over at Headway. There is no need to add a header.php as there is a place to add the script in the back end. That part is done.

    Question 1: Where can I target the placeholder text (only) to change its color. I am not seeing it in the CSS without it changing the text color of what the user would enter.

    Question 2: Is this working correctly? The text does not disappear. It did the first few times but no longer, and it never did with iOS hardware.

    Question 3: I'm still having trouble getting the button next to and inside the border with the placeholder text (and for some reason I have forgotten how to add a link here). Are we sure this can be done?

    Question 4: If I find that Q.3 cannot be done the next option is to allow the person to enter their email address in the field and just hit the enter button on their keyboard. The placeholder text would read: "Enter your email, the press enter". Is this possible and if so, how?

    Posted 8 years ago on Saturday January 28, 2012 | Permalink
  5. Anyway you can post a link to your form?

    Posted 8 years ago on Saturday January 28, 2012 | Permalink
  6. You could always position the submit button with a float and a negative margin, or you could position it absolutely, this was just a quick test in chrome dev tools:

    [css]
    .gform_footer.top_label {
    float: right;
    margin-top: -46px;
    }

    You can get more specific on that selector if you don't want it to take place on all forms, the above is a more generic selector.

    I viewed your source and see the JS snippet for the value clear, but don't see any reference to a jquery file itself, which you will need in tandem.

    As far as the input goes, you can target the input to have a color (right now the placeholder is using that same input color because there is no difference HTML/CSS-wise between the two). There are some techniques out there that will allow you to place the label in the input as placeholder text and then you could try clearing that and using the input color for a different style. Seems like an awful-lot of trouble for that, but if that's what you'd like to do - go for it my friend.

    Must have had a dead brain moment, you should be able to target the input {} and then input:focus {}

    [css]
    body.custom #block-2 input#input_1_1.large {
    color: red;
    }
    body.custom #block-2 input#input_1_1.large:focus {
    color: green;
    }
    Posted 8 years ago on Saturday January 28, 2012 | Permalink