Build Your Own Business Website header image

How to Build a Free Membership Site – Part 19 – Customize the Registration Form Submit Button

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We just created a registration form that can be filled out as part of the automated registration for the Free Membership site in WordPress that we are building. Next I’d like to show how to customize the submit button fo the form so it looks similar to one already on the site.

Styling Depends on the Theme You’re Using

In this case, it’s a link and this is an input. Let’s go look at our submit button and the code is input type=”submit”. So I think we can add a class name to this button input type=”submit”. We’re going to add this styling information in the Thesis 2 Theme because that is the WordPress theme that Joanna’s 24 Days 2 Skinny site is using.

Configure Form Settings

Anyway, we’re going to add this class to this and in the skin that she’s using we can go ahead and use that class. I believe that we can just come over back to our form and add that class to the form itself. So let’s try that.

Let’s come over to Forms and look at Settings. So under Settings, Form Layout is fine, Form Button, Button Text. I think instead of “Submit” what we’ll do is say “Register Now”. We’re also going to enable anti-spam honeypot here. We’ll animate our transitions and then update those form settings.

We can come over here to Confirmations if we wish and edit the default confirmation and we can change the content here to the extent that we want to.

Add Styling in Thesis 2 Custom CSS

Let’s come back over to Gravity Form Editor and see if I can add a class name to that Submit button. I thought I could. Let’s see if there’s something else we can do instead. I guess I was mistaken about that. I thought I could add a class to that.

Let’s come back over to Settings for a second, let’s turn off the CSS and see what happens. Say no, don’t output CSS. We’ll go ahead and output CSS for the time being on this and save our settings.

We can live with the way that looks. We can always style this in Thesis using Custom CSS. So for example, we are looking for “button gform_button” so we could come over then to Thesis and Custom CSS and we’ll say “button gform_button”.

We’re going to save this and come back over to my Skin Editor. Then go to that CSS and we’re looking for .input_text: focus, .input_submit. So we’ll just come along here and copy that font family. That doesn’t quite get it though, does it? There’s a couple of other things here that it has besides that we might be missing.

Let’s put that code here for a second, .input_submit and the Thesis email signup which is .thesis_email_form, .input_text, .input_submit. I don’t think that’s it. Well, I’m going afield here, where is that getting that color from, “post_edit”. It says .input_submit right there, 253.

Button styles, I just missed that, that’s what I was really looking for, is the button styles. So, let’s come back up and look for button. Here’s button styles and we’ll copy this. Then we’ll come back over to our Custom CSS and now what we want to do add is “button gform_button” and we’re going to get rid of all of that and just paste that there.

Then we’re going to do the same thing with everything here except we’ll have the gform_button:hover and now this button will take exactly the same style as the other buttons that are on the site hopefully.

Well, not quite, .button.gform_button:hover and that is .button.gform_button, let’s just add input to that. There we go, we’re getting something closer to that style there.

0 Comments… add one
0 comments… add one