Responsive and Right Justified Form

[MarkyB]

Hey,

I am trying to set up a custom quform on my website and I am running into some issues. I am trying to make the quform look have a custom design so it will look like the image I have attached. I am running into a few issues. First I don’t know if it is possible to make the submit button go to the right of the form. Also, I am having some CSS issues as there is some weird shadow that is showing up when the form is live, but not in the preview (white shadow on form fill area and submit button). I also am having trouble getting the button to match the design. Finally, a major issue is I have noticed the form isn’t responsive, as it remains the same size as go into larger windows. Any help with these issues would be incredible!

Thanks,

Mark

Attachments:

You must be logged in to view attached files.

[MarkyB]

Sorry you can check out what I am currently seeing at pureseo. org

Thanks

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MarkyB]

Allan,

Thank you so much for the response. Here is what I have found so far:

1. I downloaded and imported the new form and created it, it looks great when I use the preview within WordPress and the button is on the right. However, when I put it live on pureseo.org it reverts back to putting the button below the form fill area (see pureseo.org). Any suggestions on how to fix or what I did wrong?

2. Thanks for the code I added it to the custom.css file and it removed the shadow on the button, however there is still a shadow on the form fill area, do you have any code to remove that?

3. Still pretty confused on how to style the button there seems to be custom styling within the advanced options as well as just coding the custom.css file. I am trying to make it look like the attachment in the first message in this string above.

4. I added the responsive code as in the link that you sent into my custom.css file and it doesn’t seem to be doing any thing. I have attached the custom.css file I created here. Do you know what I am doing wrong?

Thanks for all your help on this!

Attachments:

You must be logged in to view attached files.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Attachments:

You must be logged in to view attached files.

[MarkyB]

Hey Allen,

Thanks for all your help on this. I am still experiencening some issues that I have outlined below:

1. The button on my form is still displaying under the form instead of to the right. You can see the updated version on the Homepage of PureSEO.org. I have noticed if I make the screen smaller the button will go to the right, but on any normal screen the button stays under the form.

2. Thanks for adding the code to remove the shadow it looks great!

3. Thanks for adding the styling, it looks really good. I wanted to adjust one thing on the styling, but I am assuming with the custom code I can no longer use the form builder to make these changes. If you look at the design of the button (attached on the first message in this message string) you will notice there is a small lip at the bottom of the button where it changes color to add a small dimension to the button. The majority of the button is the color (r:28, g:121, b:202) #1C79CA, but the small bottom lip changes to r:26, G:110, B:183 #1A6EB7. Do you know how I can make this change in the custom code?

4. I can see the responsive code working on the contact us page, but my major concern is the Homepage. I work on a 13′ screen, but if I enlarge the homepage to a large screen the form size stays the same size, I am hoping I can allow it to scale up for large screens if that makes sense. If doesn’t seem to change size much unless I am moving the screen smaller but even then it looks out of place with the rest of the design because the sizing gets messed up.

Thanks for all you help on this I really appreciate it!

– Mark

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Attachments:

You must be logged in to view attached files.

[MarkyB]

Allan,

Sorry for the delay, I put everything up on the site and removed the form builder styles.

1. Thanks for the fix.

2. However, it looks like the form still has a couple style problems. It looks like the submit form area is larger than the submit button, and now there is not a space between the submit button and the form fill area. Any help to solve that design would be awesome!

4. I am not finding exactly where in the slider I can make the can set a width for the shortcode or put in multiple shortcodes. I am using the Revolution Slider plugin that works with my theme, if you have any insights that would be great!

Thanks for all your help on this it has been a nightmare to figure out!

Thanks,

Mark

[MarkyB]

Allan,

Another thing I just noticed on the styling that I was having a hard changing before is I really want to remove any hovering effects on both the form fill area and the submit button. I also just want the text in the form fill area to disappear when someone clicks in the both, so they can just immediately start typing. Currently, pureseo.org has your most recent updated CSS changes. If you could make those small changes as well you would be a lifesaver!

Thanks,

Mark

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Attachments:

You must be logged in to view attached files.

[MarkyB]

Allan,

Thanks a lot the styling looks much better! I have reached out to the theme author to see if he has any insights on potentially using different sizes of the form for different devices within the slider. I will circle back if I need anymore help on that. In the meantime, I want to get this new form to communicate with my form on the contact us page like I did with the previous form that was on the homepage. When someone would complete the form on the homepage it would forward them to the contact page and fill the “Website” portion of the form on that page. There is some documentation somewhere on how to do it, but I can’t seem to find it anymore, could you give me the link. That would be great!

Thanks Again for all your help!

– Mark

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

• This reply was modified 9 years, 8 months ago by Ally.

[MarkyB]

Allan,

Thanks this was exactly what I was looking for. I made the change so now the new form is communicating with the form on the contact page. However, there is one little issue. I used to be able to fill out the form on the homepage and when the form forward to the form on the contact page it would automatically scroll down to the entry on the page. Now it fills the area of the form on the contact page but it doesn’t scroll down to the entry. Is there a way to fix this?

Thanks Again,

Mark

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts