Sign up form - field order

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Sign up form - field order

Post by Agalassi1792 »

Hello,

I just built out a fairly large sign up form, using all the regular inputs except for the country field, so I'm using:

Name
Email
Company
Phone
Address
City
State
Zip

And on top of that, I have two custom fields.

This is going on an APWT website, but I really do not want to use the little short code - I need to use the HTML code. I need to reposition the fields, to have one of my custom inputs underneath the 'company field' but above the 'phone field' I also really want to do some other custom stying to the field.

However... when I tested the form with all of my edits... the front end of the form froze - meaning that I was not taken to the thank you page that I set up, it just simply seemed to hang. But in the backend, I'd get the entry (most of the time). Yet when I use the shortcode, it works perfectly. But like I mentioned, I need to use the HTML code, and I need to get it working soon.

Can you please help me to get the HTML code working? The code for the site is c3127 and the form I'm attempting to work has the ID of 13.

Thank you.
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Post by JohnB »

It is best to use the Widget code, and then to add styling CSS to the stylesheet under Settings->Administrator

What exactly do you need to do that can not be achieved with the Widget and CSS? If it is simply reordering the input fields, that can be achieved with CSS using the order property documented here.

You can also view this example CSS I have, that reorders how the Name and Email would normally be shown, for a Sign-Up Box id #1.

Code: Select all

.leadbox1 > form {
  display: flex;
  flex-direction:column;
}

.leadbox1 > form > .Name {order:2;}
.leadbox1 > form > .email {order:1;}
.leadbox1 > form > .leadbox-submit {order:3;}
Make sure to include the ".leadbox-submit" and order it last, otherwise it will appear at the top of the form.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

Hi John,

I mean, there's a few different things I want to do - I want the label to show on only one field, not all of them, then like I mentioned I need to re order the fields, then I need to make the last field look like a actual message box, so I need to make that wider and potentially longer than the rest of the fields...

I can try to do this in CSS, but realize that, on my end, this is in a way doubling the amount of work that I need to do in order to create just one form. Can you please tell me if you plan on better integrating the HTML code into APWT sites? This would give developers like us far more flexibility when creating forms - or, when you plan on releasing the changes that you plan on making to the contact form (the real message box and other items we talked about in this thread: http://www.allprowebtools.com/forum/vie ... +box#p7672) will you be restructuring the sign up boxes completely, so then will it be easier for me to do these edits and changes in your new sign up form builder?

But I'll try and go off to edit CSS when I get a chance today and let you know how it goes for me and if I need any other help.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

So this is what I've attempted to add to CSS and I don't see it working as I need it to. I turned off Caching so i don't believe that's an issue and I'm doing a hard refresh on my browser as well. So can you please tell me if this looks right, and if not, what do I need to do to fix this?

.leadbox13 > form {
display: flex;
flex-direction:column;
}


.leadbox13 > form > .name {order:1;}
.leadbox13 > form > .name.label {display:none!important;}
.leadbox13 > form > .email {order:2;}
.leadbox13 > form > .email.label {display:none!important;}
.leadbox13 > form > .company {order:3;}
.leadbox13 > form > .company.label {display:none;}
.leadbox13 > form > #C17 {order:4;}
.leadbox13 > form > #C17.label {display:none;}
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Post by JohnB »

The reason we encourage using the Sign-Up Boxes with the Widget codes, and the Wordpress plugin, instead of using HTML code, is that it helps guarantee that your Sign-Up Boxes will be forward compatible with future version of AllProWebTools.

If the raw HTML code for a Sign-Up Box is used, and altered, it opens up the possibility that future updates of AllProWebTools will cause the Sign-Up Box to no longer work. This is a problem you will not have if you use the Widget codes, or the most recent version of the AllProWebTools Leadbox Wordpress Plugin.

As for the updates to the Sign-Up Boxes, you can view what will be updated, and when it is expected to be released on this forum post.

As for the CSS you posted, if you are using the Widget code, you should be seeing different class name selectors, and selecting the labels differently, using something more like this:

Code: Select all

.leadbox13 > form > .Name {order:1;}
.leadbox13 > form > .Name > label {display:none!important;}
.leadbox13 > form > .email {order:2;}
.leadbox13 > form > .email > label {display:none!important;}
.leadbox13 > form > .Company {order:3;}
.leadbox13 > form > .Company > label {display:none;}
.leadbox13 > form > .Custom17 {order:4;}
.leadbox13 > form > .Custom17 > label {display:none;}
Also, note that this sample CSS won't alter the original default order of the input fields, it is declaring them to be in the same order that AllProWebTools puts them in by default. You will also want to add the piece from my earlier example about the ".leadbox-submit" like so:

Code: Select all

.leadbox13 > form > .leadbox-submit {order:5;}
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

Okay thanks for a bit more clarification on this CSS and on the updates.

Just so you know - what was throwing me off was the capitalization on the classes - how email is not capitalized, but Name, Company etc are... but now that I have the proper capitalization, its working for me.

Thanks.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

Hi again,

I need help with one final piece - and that is hiding all the labels for this form except for the one I need, this is what I've attempted to add:

.leadbox13 > form > .email .label {display:none!important;}
.leadbox13 > form > label > .email {display:none!important;}
.leadbox13 > label > .email {display:none!important;}

and none of those examples are working... any other ideas on how to do this? Thanks.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

Okay one other piece now I believe this is the last piece:

How do I make one field taller in height vs the other fields?

here are my current attempts..

.leadbox13 > form > .Custom18 .form-control {height:50px;}
.leadbox13 > form-control > .Custom18 {height:50px;}
.leadbox13 > input > .Custom18 {height:50px;}

thanks again
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Post by JohnB »

As for the label, did you try what I posted in the example above?

Code: Select all

.leadbox13 > form > .email > label {display:none!important;}
As for making the one input taller, could you try this selector:

Code: Select all

.leadbox13 > form > .Custom18 > input {height:50px;}
Let me know if those work for you.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Post by Agalassi1792 »

Hi John,

Okay, thanks for that. I did not actually see your initial label code, but thanks for that clarification. Everything is how I want it to be, for the most part.

Thanks again for your help today!
User avatar
JohnB
Support Team
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Post by JohnB »

Awesome! Glad you got it to work!
User avatar
Dave
Support Team
Support Team
Posts: 1221
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: I need help with a sign up form

Post by Dave »

[tags] leadbox order signup box order sign up box order
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Sign up form - field order

Post by Agalassi1792 »

Hello,

Is there a better way to go about reordering the form fields yet? It would be very helpful if there was a much simpler way to go about doing this.

Let me know, thanks!
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 117
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Sign up form - field order

Post by NoahBaldwin »

This is one of the many items that is on our list to release improvement to. You can keep up with all of our new versions and features currently being worked on here: https://www.allprowebtools.com/forum/viewforum.php?f=5
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Sign up form - field order

Post by Agalassi1792 »

Okay great, sounds good.

Thanks!
User avatar
Dave
Support Team
Support Team
Posts: 1221
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: Sign up form - field order

Post by Dave »

This feature is now available in version 5.5, as shown here: viewtopic.php?f=5&t=4224&p=9277
Post Reply