Horizontal Layout

User 411894 Photo


Registered User
6 posts
Online Now

How do I make the form have a horizontal layout...I can order the fields horizontally but I can't make the submit button go where I want it to. Also lots of people mention to use a logic expression instead of the recaptcha - something like 2 plus 2 =4 however noone actually includes the code...do I have to use the number field or can I make this a reg expression one.

User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Is this what your looking for?
http://progrower.coffeecup.com/forms/submit-move/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 411894 Photo


Registered User
6 posts
Online Now

Yes, that is exactly what I would like to do...is there a theme layout for this....what I am hoping is not to go into the css cause then if I update the form, I have to go change the css again. If the only way is to fool with the css then Oh well.
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

This is easily achieved without hacking the html.:) And no JQuery.:lol:
Make your form and preview it. Now look at the source code near the bottom you should see something like this.

<div id="fb-submit-button-div" style="padding-left: 13px; min-height: 1px;">
<input class="fb-button-special" id="fb-submit-button" style="background-image: url('theme/default/images/btn_submit.png');" type="submit" data-regular="url('file:///C:/Users/User/AppData/Local/Temp/FormBuilder/theme/default/images/btn_submit.png')" value="Submit"></input>
</div>

Copy the source code into an html element on your form. Then paste the code I have below above it in the html element.

<style type="text/css"><!--
.fb-item-alignment-left {
visibility:hidden;
}
-->
</style>

So you end up with this in the final html element.

<style type="text/css"><!--
.fb-item-alignment-left {
visibility:hidden;
}
-->
</style>

<div id="fb-submit-button-div" style="padding-left: 13px; min-height: 1px;">
<input class="fb-button-special" id="fb-submit-button" style="background-image: url('theme/default/images/btn_submit.png');" type="submit" data-regular="url('file:///C:/Users/User/AppData/Local/Temp/FormBuilder/theme/default/images/btn_submit.png')" value="Submit"></input>
</div>

What were doing is adding the code that will hide the original button and removing the holding div that has that class from our custom code so it will always show. The best part is that you can now have a submit button anywhere you want.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.