Forcing Fields to a new line

Apologies if this has been covered before, I did a quick search with no luck.
I’m wanting to understand how I can force fields to appear on a new line — when the fields are not full width.
So far I’ve tried using hidden Section Breaks, but that doesn’t have the desired effect.

Ultimately I’d like to be able to have a field that is 1/3 of the width, with blank space across the other 2/3, followed by the next field on a new line? Make sense.

I’m assuming the solution is simple and something I have either muddled up or totally overlooked.
Thanks in advance.

Hi Paul, can you share a link to the page on your site where we can take a look at your form? Let us know which fields you are trying to present in this way in the form. Thank you.

Hi Chris, sure thing.
www.southlandcreative.org.au/my-home/

The specific field is the “Where did you hear about this project” and the Conditional “Other” text box.
I’d like to force the “Where did you hear …” on a new line so the “Other” entry field has sufficient room.
I’ve currently used gf_left_half and gf_right half but it still flows on from the previous fields.

Thanks.

Hi Paul. If you want the field “How did you hear about this project?” on a new line, and then the “Other” conditional text field on a new line, why would you have gf_left_third class on the “How did you hear about this project?” dropdown?

The left and right classes are designed to be used all together, in sequence, with no skips. Using right and left half classes with thirds will give unpredictable results. And when used with conditional logic, things really start looking messy.

Can you take the custom CSS class off “How did you hear about this project?” so that it is displayed below “Any existing film or storytelling stuff you’ve done? Include a link here. (No worries if you don’t have anything.)” and then the “Other” text field will be below that,.

Thanks Chris, I think the use of _third was my mistake (brainfart). I was attempting to make them halves. The idea is that ‘Other’ appears on the same line as the “How did you hear …” question — that’s what I’m struggling to make work.

Updated form is at this/previous link —

The text input when you select “Other” in the “How did you hear about this project?” dropdown is stacked, underneath the other two drop downs. It looks like this for me:

Is that what you want, or do you want “Other” next to the “How did you hear about this project?” dropdown when it shows up conditionally?

Yeah I’d like to have the ‘Other’ text box appear NEXT to the “How did you hear about this project” dropdown. I thought the gf_left/right_half would handle this … but seems it’s not that straight forward. Does the conditional logic affect this?

Thanks for bearing with me.

Hi Paul. Yes, the conditional logic affects this. If you give the “How did you hear about this project?” drop down a gf_left_half class, you would not have a matching gf_right_half until “Other” is selected in the dropdown. That will not look correct, until you are conditionally showing the “Other” text box.

What I have done in the past is added an HTML field, also using gf_right_half, and show that when other is NOT selected. So that will be replaced by the Other text box when “Other” is selected in the dropdown. In theory, the html field will be showing (you can have just a <br /> or HTML comment <!-- I think --> so that it takes up the space until the Other text box is shown. Will that work for you? If you have difficulty with that, please export the form and send the JSON file via email to chris@rocketgenius.com

Thank you.

1 Like

Makes sense. I’ll give that a go.
Thanks legend.

1 Like