Form Pro - single field only?

Any way to use Form Pro to collect just ONE piece of user info (a phone number?). I’m hoping to build something like this.

Not possible with Form or Form Pro. These stacks require a reply to email, name, and subject line for the sent email that lands in your inbox. These are collected via the form and are why you can’t disable those fields.

AFAIK you can close with Form Pro. That allows you to have a predefined subject that is not editable by the user. In that case, it is hidden when rendered in the UI. But the name field is always shown. So you can have what you want in your mockup, so long as you are happy to have the name field as well (no bad thing).

1 Like

Update:

You can indeed get what you want in your mockup. That is, an email field and nothing else.Here goes…

A DIV is generated in the PHP with the class:

fullname-form-group

This DIV holds both the label and the input field.

So all you need to do is use JQuery to get rid of it. In the Javascript tab in the Inspector, enter:

$(".fullname-form-group").hide().css("visibility", "hidden");

Boom. It’s gone. But remember to set in the Form Pro stack that the full name is not required.

By the way. If you wanted to hide the label for the email address field, but keep the field itself, just add the code:

$(".email-form-group label").hide().css("visibility", "hidden");

Cin cin

1 Like

You don’t need to use JQuery to do this. Just use plain CSS. It’s best to just use CSS when you can.

Add the following to the page’s CSS field:

.fullname-form-group {
	visibility: hidden;
	position: absolute;
}

I added the position absolute, so that the hidden field does not take up any space in the layout.

2 Likes

Yep, much more elegant that way!

As an aside, do you know how to use CSS to target the 1st and 2nd of two radio buttons? I want to make the accent colour of the 1st red, and the 2nd green. But I can’t see, to get first-child working.

Cheers.

If you want to publish a test page, I’ll take a look. Much easier when I have something to look at.

Hey. Can’t really do that right now, but here’s a screen grab.

radios

Just want the unsubscribe to be in red, but the subscribe to be in green. Having a devil’s own job trying to select them. Cheers.

As you likely know, trying to figure something like that out without a working page to look at is harder to do. If you get to the point where you have a test page published somewhere, post back.

If you’re trying to color the actual radio dot versus the label, that’s significantly more difficult. The label is relatively easy.

Screen Shot 2022-04-15 at 11.36.53 PM

Yep, that’s it. All I wanted to know is how to select them. first-child doesn’t work, so what did you use? :thinking:

I only have two radio buttons in this test form. You may have issues if you have more than that. Again, that’s why I always ask for a live page.

Here’s what I used:

.form-check:first-of-type label {
	color:red;
}
.form-check:nth-of-type(2) label {
	color:green;
}
3 Likes

Oh blimey, I missed the form-check style. Thanks for that. :beers:

You can also just put the text of the radio option in a span in the radio option’s setting in the stacks panel. It saves trying to figure out the correct selectors.

<span style='color:purple'>Radio Option 3</span>

You do need to use single quotes to enclose the style attribute. You could also just assign a class to the span and use CSS to set the color. That would make it easier to adjust down the road.

Screen Shot 2022-04-16 at 9.22.49 PM

Display as:
Screen Shot 2022-04-16 at 9.23.02 PM

1 Like

Doh. I forgot about that one as well. And I have actually used that trick on other stacks.