Sign up form - field order

Need help? Please give a detailed explanation of your problem.
User avatar
Agalassi1792
AllPro Expert
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Sign up form - field order

Postby Agalassi1792 » Tue Oct 24, 2017 10:35 am

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
Posts: 1026
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Postby JohnB » Tue Oct 24, 2017 12:14 pm

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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 1:52 pm

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/viewtopic.php?f=4&t=3778&p=7672&hilit=message+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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 2:24 pm

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
Posts: 1026
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Postby JohnB » Tue Oct 24, 2017 2:44 pm

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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 2:57 pm

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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 3:02 pm

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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 3:11 pm

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
Posts: 1026
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Postby JohnB » Tue Oct 24, 2017 3:24 pm

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
Posts: 419
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: I need help with a sign up form

Postby Agalassi1792 » Tue Oct 24, 2017 3:48 pm

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
Posts: 1026
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: I need help with a sign up form

Postby JohnB » Tue Oct 24, 2017 4:05 pm

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

Re: I need help with a sign up form

Postby Dave » Fri May 17, 2019 10:51 am

[tags] leadbox order signup box order sign up box order

Return to “Help / How to use AllProWebTools”



Who is online

Users browsing this forum: No registered users and 7 guests

cron