How to change Clear Form and Print Form button defaults?

I included a Clear Form button and Print Form button on my form. However, by default they  try to appear off-center to the right of the Submit button. And, the Print Form button automatically separates the label into two lines on my monitor, but not on mobile screens.

How can I force these buttons onto their own line, by default? And, how can I insure that the button labels remain on one line?

 

- Thanks for your help

To increase the Print button width and fix the view on a mobile device please copy and paste the below CSS in your Custom CSS Field:

Please let us know how it worked.

Thank you!

Thanks for your reply Nik, and for your code snippet! (Sorry it took me a week to respond. I had another project that needed my attention.) I added the code you provided to the Custom CSS Field, which forced the standard "Clear Form" and "Print" buttons onto the same line as my custom "Test" button. And, they're so far to the right that they're both off the screen on mobile devices. They also turned from light gray to a dark color. The resulting code is listed below.

Did I add your snippet correctly? What else can I do to force these two buttons onto a separate line from my custom button (by default) on both PCs and mobile devices?

Thanks again for your input!

 

 

 

Resulting lines of code after adding your snippet:

.form-all:before {

    background-size: 75% auto;

    background-position: center;

    }

img {

    max-width: 100%;

    height: auto;

    }

 

 

#input_print_7 {

    width: 100px;

    }

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) { 

   #input_reset_7 {

 

   width: 107px!important;

 

   }

#input_print_7 {

   width: 100px;

   }

}

Ok, first please let's replace the image for your button since it is too big, you can use this URL:

https://www.jotform.com/uploads/Nik_C/form_files/Blue%20Input%20Buttons%20(cropped,%20Lg.)%20v.2%20TEST-75H.586.971.jpg

Just remove the existing one and add the URL above.

Then please replace the CSS code above with this one:

.form-all:before {

    background-size: 75% auto;

    background-position: center;

    }

img {

    max-width: 100%;

    height: auto;

    }

#input_print_7 {

    position: relative;

    width: 102px;

    top: 28px;

    left:80px;

}

#input_7 {

    top: -15px;

    left: 250px;

    position: relative;

}

#input_reset_7 {

    position: relative;

    top: 28px;

    left:80px;

}

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px){

  

    #input_reset_7 {

    position: relative;

    top: 28px;

    left: -380px;

    width: 110px;

}

    #input_7 {

    top: -15px;

    left: 0px;

    position: relative;

    }

   #input_print_7 {

    position: relative;

    width: 102px;

    height: 52px;

    top: 28px;

    left: -233px;

}

}

That should make your form look like this:

And like this on mobile:

Please let us know how that worked.

Thank you!

Nik -
Thanks for your prompt response. The results of the changes you suggested are as follows:
Results:
1. The new button image is significantly smaller, but installed OK.
2. The new CSS code forces the button grouping flush-left (Shrink set to ON).
3. [PCs] All three buttons are visible, roughly the same size, and centered to each other, all though not to the form.
4. [Mobile Devices - Portrait] The button grouping is totally off-screen on some devices with Shrink set to ON.
5. [Mobile Devices - Portrait] The button grouping is only partially visible with Shrink set to OFF
(Note: all but the right 1/4 of the "Clear Form" button is visible, and the top half of the ""Print" button; the custom "Test" button is off-screen).
6. [Mobile Devices - Portrait] The "Clear Form" button bounces up above the "Print" button on responsive mobile devices, rather than sliding below it.
7. [Mobile Devices - Landscape] The "Test" button is fully visible, as is the "Print" button; the "Clear Form" button is totally missing.
I checked the Button Alignment setting, and it was set at "Center" (see screenshot #1, attached). So, I switched it to "Auto", and the entire grouping slid to the center. But the buttons on each row are still aligned flush-left to each other. Collectively they're centered to the form (seen screenshot #2, attached). The other three Alignment settings (Left, Center and Right) seemed to have no impact on the button placement. All three settings move the group to the far Left.
I noticed that the "Shrink" Advanced Button setting was set to ON. So, I turned it OFF. And, the settings began shifting the grouping left-to-right on the form (see screenshots #3-6). The two button rows maintain their flush-left to each other alignment on the JotForm Build page, no matter what setting I select! But, they appear to be centered to each other, and nearly centered on the webpage!?! Very strange! I also notice some serious alignment problems with responsive screen adjustments for mobile devices (see Results #4-7, above).
I'm not sure what else I need to tweak in order to get the two rows to actually center on the screen, and adjust correctly on mobile devices?
Also, why is the "Print" button so much larger than the "Clear Form" button? Is there a way to force them to be the same size?
- Thanks
...

Thank you for the detailed response.

We didn't receive any of your images, unfortunately, but I'm pretty sure what you meant.

I would work on this issue further, I just need some additional info.

1) I assume it doesn't matter to you, but do you want to have buttons fields shrunk or not?

2) On which mobile devices did you test the form?

We'll wait for your response.

Thank you!

Nik -
Sorry you didn't receive the screenshots. Does your email server strip attachments? (I don't see where/how we attach files to our posts in the online Forum.) I'll send them again with this email, and attach them as a .ZIP file, just in case it was a fluke that you didn't get them the last time.
I'm not exactly sure what the "Shrink" feature does, other than to allow some elements to co-exist on the same line. Am I missing something there? No, I don't think they have to be in Shrink mode otherwise, unless it serves some purpose for responsiveness!?! I originally turned it on to try and get the buttons to align correctly.
As for the mobile devices I've tested the form with, I use the mobile simulator on Weebly's build site (which is where I'm building my web pages), an HTC one m8 cell phone (Android), and an Ellipse 8" tablet (also Android). The tablet, by the way shows the "Test" button across the entire width of the page, and the "Print" button is to the far left of the form when in portrait mode. And, all three buttons are centered to each other, but the grouping is entirely in the right half of the form.
Thanks for your continued support.....
...

Can you please test this form version in mobile and desktop or Laptop device? https://form.jotformpro.com/72138763180962 

If that is what you want, you can clone it and use it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

The CSS code used was the following: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

.form-buttons-wrapper button {

    width: 100%;

}

#input_print_7{

    margin-left: 0px !important;

}

Each button should be displayed in one line. Let us know if you need more help.

BDavid -
Thanks for working on this for me! I tested your code on my three mobile devices. And, technically, it seems to work okay (at this point). All though I must admit, its not the prettiest solution. Am I to assume you weren't able to figure a way to center the 3 buttons on two lines while keeping them looking like normal buttons? You solution seems to been make them so large it forces them onto separate lines, which isn't exactly centering the three buttons like I asked. Are you saying its impossible to achieve what I'm looking for with Weebly?
Thanks for your response,
- Robert

...

So, for desktop view, you want the three buttons to appear in two lines, so the submit button is shown in the first line, and the Reset and Print button in the second line. All of them center aligned, correct? 

If that is the case, please remove all the CSS code, and inject this one instead: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

#input_print_7{

    margin-left: 0px !important;

}

#id_7{

    text-align: center !important;

    margin: auto !important;

    width: 270px !important;

}

#input_7{

    box-shadow: none !important;

}

Result: https://form.jotformpro.com/72138763180962 

Desktop view:

Let us know if you need more help.

Hi BDavid -
Thanks for all your hard work on this difficult case! I think we're getting close. Your test example looks great on my PC monitor, as does your code when installed in Form Designer. It accomplishes all my objectives, other than being able to use my large Submit ("Test") button. However, after I deleted the previous CSS code from the page and loaded your latest code, I got mixed results on my mobile devices, as follows:
1. On my Android phone and tablet (in portrait mode), all three buttons line up vertically, which I suppose is okay, considering responsiveness.
2 All three buttons are an "acceptable" size (in portrait mode), if that's the best we can do, all though significantly wider than on the PC monitor.
[Note: the buttons are as wide as the entire form on my phone, and about 1/3 the width of my tablet's viewing area.]
3. In landscape mode on my phone, the buttons continue to line up vertically, and their size is roughly 1/3 the width of the viewing area.
4. In landscape mode on my tablet, the "Clear Form" button jumps up to the right of the "Test" button, leaving the "Print" button on the 2nd line by itself; all three buttons are centered on the form.
5. The Mobile layout is identical to my phone's form and button layout on the online Weebly.com simulator.
I don't understand why this is so difficult!?! Must be some underlying code in your template that's causing these conflicts. But, I appreciate your continued support, and that of your team to help me resolve this issue!
Thanks again for your continued help,
- Robert
...

Hello again!

 

I know we've been wrestling with this for some time. I took a break to work on something else. But, I've been experimenting with it again recently and think I've found a solution to the problem. If you remember, my original objective was to use a large-sized (184 px) custom Submit button as a "call to action". But, I couldn't get it to render on a separate line. The Clear Form button kept appearing on the same line, instead of its own line or the next line down beside the Print button.

Several of your techs told me I needed to reduce my button size, which I did, to no avail. I was also told I needed to add some custom CSS code (see BDAVID's code, above), which I did. Unfortunately, that didn't completely resolve the problem either. It worked okay in desktop mode, but was only responsive on some mobile devices.

 

However, I was able to force all three buttons onto separate lines without increasing the Clear Form and Print buttons to page-width as one tech suggested. I discovered that by simply increasing the margin size of the Clear Form button to a large number (>20 px), it bounced down to its own line. It looked great in Form Builder (see top half of screenshot, below)! But, when I published it and opened the form in Chrome, it looked totally different (see bottom half of screenshot).

 

I remembered a similar support problem on this project where the button wouldn't show up on the page at all. It appeared as a broken link. Turned out the problem was a Windows filename issue. So, I renamed this custom image (eliminating the spaces and some special characters), and voila! The form loaded in the browser correctly and the buttons are formatted exactly as they look in Form Builder.

 

Apparently, JotForm is very touchy about spaces and special characters in filenames. It might be helpful in the future to add this fact to your staff's toolbox and suggest that customers check that first when dealing with custom image problems.　

 

Thanks again for all your help! And, I hope this post provides some insight for other form developers experiencing similar issues. [Note: BDAVID's CSS code is still embedded, and I left the larger Clear Form button margins in place. I could do further troubleshooting to see which one is actually fixing the problem. Maybe its a combination of all three. But, its working. And, I don't feel like wasting anymore time on troubleshooting it. So for now, I'll take it!]

 

:-)

 

 

 

 

 

Dear Robert,

I am glad that your issue has been solved and your buttons on your form looks prettier. I have also cloned the form in order to see the results and seen that there is not any issue on mobile devices and desktop (especially on Google Chrome) as seen below:

(Google Chrome)

(Safari, iPhone 6S Plus.)

Please let us know if you need any assistance. We will be glad to help you.

Thank you for informing again.