Build Your Own Business Website header image

How to Add a Custom Javascript to a Post or Page – Part 2 Use Shortcoder to insert the form

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.

This is Part 2 of How to Add a Custom Javascript to a Post or Page series. In this session, we install the Shortcoder plugin and then show how to insert and style the form using Shortcodes and a bit of CSS.

Video Transcript

Rick: So the next step then is to add this J short code… I’m sorry, Shortcoder plugin. Now I do have some videos on the site about how to use Shortcoder but I’m just going to do this again here real quickly. We’re going to add a new plugin and search for Shortcoder.

Now for… as an aside, Shortcoder is not the most sophisticated or the most flexible way to do this and a more sophisticated, flexible plugin to do this would be Shortcodes Pro. Now the problem with it is that it is more complicated to use also. And so, I’m going to go ahead and stick with Shortcoder but if you find yourself in the position where you want to do a lot of… where you’re going to do a lot of shortcodes, you might actually look for some tutorials of mine on Shortcodes Pro which don’t exist today but they will exist in the future because I like this little plugin.

Anyway, we’ll install this now and we’ll activate it. And then we’re just going to come down here to Settings in Shortcoder and we’re going to create our first shortcode. Oh great, it remembered when I made it last time. So what we’re going to do is we’re going to create a new one and we’re going to… instead of calling it calculate, we’ll call it… let’s see, euros. And then in this section right here, we’re going to paste that HTML code again. So if we look at our… let’s see, let’s just close that up. We’ll come back over here to that source and we’ll copy this again and we paste it here. And instead of h1, we’ll make it an h3 and an h3 and then we’ll just save this.

And now what you do is in order to insert this in the post… okay, let’s go ahead and spell it correctly, you’re right. Euros, let’s save it. There we go. Now in order to save this, use this in the post, we need this shortcode so it’s scname=euros… the whole thing. So all you do is just grab it all, copy it, and then we’re going to come back over to our post and we’ll cut out the old HTML that we placed in there and we’ll paste this shortcode, scname=euros and we’ll hit update. And then view the post.

Okay so now we have the labels sitting beside the input fields and the input fields are still too big, obviously, but we have something to work with now. Again, it’s still going to work, right? 45 and 67, calculate. So that system still works. But now we need to add styling to this. And the easiest way to do this styling would be to add a div inside of this. So if we add a div and give it a class, div class equals… oh not class. Let’s give it an id. Id = calculator so div id = calculator and then we come down here under the button. We do the same thing, /div so we give it the closing div. So we’ve created a div and we’ve given it a handle called calculator. Now we’ve got something we can style. And so… yeah, we’ve got something we can style here so we’re just going to go ahead and hit update.

And actually, I think the other thing we’re going to do is instead of using these br tags to separate it, what we’re going to do is we’re going to wrap this label and the input value in a p tag. So if we just select the whole thing and come over here and select P for p tag and do that again here, select p for p tag, that will give us the spacing in between each one of these that we want and I think we’re going to like the way it turns out. So we hit update and then we come back over here and refresh it.

Okay so now we’re getting someplace. Now these things are separated a bit and it still works. So now what we want to do is we want to add some custom CSS to this. So I’m going to open this up now in Firefox and go to custom CSS, inspect this element, and we are looking at our div id calculator so that’s where we’ll start. Say .custom #calculator and then the first thing we want to do is affix the label so label and we want to… let’s increase the font size a little bit… colon 16 px. And then notice how because this line is a little bit longer than this line, these 2 things don’t line up, we want to make this field or this label the same length so that these 2 things will line up together. So what we’re going to do then is we are going to give those things a width, that is, we’re going to give this label a width of say, 250 pixels. Notice how that didn’t change? That didn’t change because labels are not block level elements and therefore, without an additional setting, they don’t take a width. So we have to give it additional setting and that additional setting is display: inline. Notice how now, they exactly line up.

In fact, if you go to 280… okay. It was working before. What did I do wrong here? 250, display inline… how embarrassing. I know it’s not blocked because that makes it drop down, inline… am I misspelling something here? Am I making an error? Let’s see. Let’s just look at the label. Oh well, isn’t that interesting.

Let’s see if I can… if adding the p to it changes that. It does not. Okay, so much for that and that little bit of that answer. We’d have to come back to how to fix this part of it because we do want those… even though it’s like a pixel off, we still want that stuff to line up exactly the way we want it to line up. So I’m going to have to figure that one out. I thought I had that one nailed.

The next thing though then is to reduce the size of these and the way that we do that is we’re just going to address ourselves to the input field. And so again, we’ll just copy this .custom instead of label, we’ll call it input and instead of 250 pixels width we’ll make it say, 50 pixels width so we don’t need to adjust the font size. Okay and so… and then if we want to give ourselves just a little bit more space here, we can give ourselves a margin left and say, give it 10 pixels. There we go so now we’ve set this off to the side a little bit and we have this exactly the same size. Much to my chagrin, not exactly in the location but I’ll figure that out before I post this code back.

So we’re going to come back over here to Christian for a second. Okay so does that look similar to what you want to accomplish there, Christian?

Christian: Yeah, it’s absolutely marvelous. Thank you. And I have to say, I’ve got so much respect for the fact that you can do this stuff live and you know, please don’t worry that it’s not exactly right. We can sort that out later but yes, that’s absolutely what I had in mind. Thank you.

Rick: Okay you’re welcome. And so, what I’m… I’ll post this CSS on the forum after this so you can just you know, you can see it again, okay?

Christian: Thank you. And will there be a copy of this video tutorial posted on the website as well?

Rick: There will be probably not until the first part of next week.

Christian: Okay.

Rick: Yeah, it takes us a little over a week or so from recording to publishing so… but yes, it will be there.

Christian: Great, thank you. Well, I’ve been making notes and I think I get a bit about the plugin. I understand about inserting the javascript lower down the page, adding that plugin you were talking about, Shortcoder, and so yeah. If I can get a copy of the CSS code, I should be there hopefully.

Rick: Perfect, okay.

Christian: Many thanks, Rick.

Rick: You’re absolutely welcome and I think it was a fun little exercise so I was glad to do it.

Christian: I can think up some more fun little exercises if you’d like.

Rick: Perfect. Let’s do one next week. Okay, thanks a lot Christian.

Christian: Thank you.

0 Comments… add one
0 comments… add one

Leave a Comment