Foundry Button to run HTML code


#1

I’m requesting some suggestions to perform a task.

I have some hidden form post data that I wish to pass to a URL. The HTML is something like this:

form action=“https://url” method=“post”
input type=“hidden” name=“user” value=“name” /
input type=“hidden” name=“pwd” value=“password” /
input type=“submit” value=“submit”

Obviously, I’ve hidden the actual page, name, password, etc. (and removed the < > as it was rendering the code) but this DOES give me a button and everything WORKS as expected. However, the button is not drawn, etc. like the rest of my Foundry page. Using the Foundry Button stack or the Flat Button stack only offers me the option of selecting a link.

Does anyone have any ideas of how I can get a proper Foundry style button run this POST function?

Thank you!


#2

A quick follow up . . . I’m able to actually HIDE the button and make it a link instead using a class and some CSS. Perhaps if I could locate the CSS that Foundry uses for it’s button I could just replace the custom CSS with the Foundry CSS to attempt to replicate the button format. Of course, if the Foundry theme were to change (or Bootstrap for that matter), the button wouldn’t match.

Again, all suggestions appreciated. Thank you.


#3

You’ll not be able to achieve that with the Button stacks that come with Foundry. You could inspect the buttons that the Button stack makes and see what classes it uses and you may be able to deduce what classes you’d need to add to your button code to get the results you’re looking for. :wink:


#4

Thanks, Adam. It’s a start. I was able to find a class that makes it LOOK like a button, but there is no control for the button or text color. I’ve scoured my test page after creating just a test button and I don’t see anything else in the ACTUAL button besides one class. As this is a Foundry page, all the CSS should be available so I’m at a bit of a standstill. I’ll see what else I can find.

Jason


#5

@jthawke It takes multiple classes for a button in Foundry. There’s one for size, one for style and one just to tell the link or button element that it is a button.

Also, your code above omits some necessary code for a form button. Here’s your code fixed to be a proper form button:

<form action=“https://url” method=“post”
input type=“hidden” name=“user” value=“name” /
input type=“hidden” name=“pwd” value=“password” /
input type=“submit” value=“submit”>BUTTON LABEL</form>

Add some classes to that form button and you’re good to go. :wink:


#6

I guess I found the one for size but didn’t see the class for style. Again, I’ll dig through the page a little more to see if I can find it. I essentially just put the Foundry button inside of a container but the only class I saw for the button was the size one.

I’ll keep looking, and I know you don’t want to give instructions that go beyond how simple to use Foundry should be but if anyone else has a suggestion, please send me an example.

As for the code, I am aware it looks “wrong” but I couldn’t figure out how to add the exact code without it rendering in the comments so that it could be seen. :slight_smile:


#7

I’m going to just close this out for now.

I finally decided to just make my own CSS class and manually set the CSS to the desired outcome. I know this is beyond the scope of what Foundry users should be doing, and I am learning a lot more than I intended, but at least I’m able to build the site 99% in Foundry and then tweak a few things as needed.

Adam, this is a GREAT product.


#8

I sent you a direct message about this topic yesterday morning. If you didn’t get it, let me know.


#9

Adam -

I did get the direct message . . . and I did try to locate the other class ids, etc. for Foundry, but I could seem to figure it out.

I just set a class called “button” and then used this CSS on the page :

.button {
background-color: #0274D8;
border: 2px #0274D8;
border-radius: 5px;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

It makes a very similar button to the Foundry button stack.

Jason