Mis-aligned name and phone number fields

Hi. On our form (Elite Building Services (Mobile)), the form is working well with the exception of the alignment of the name and phone number fields in the cell phone format. For the name, the input fields are shifted down a bit, and for the phone number fields, the fields are shifted down and the entry field labels are off seemingly because of the dash between "Area Code" and "Phone Number" fields. 

Thanks!

Hi,

I am currently checking your form and have confirmed that the name and phone number fields are misaligned. I will check this issue further and get back to you once I have some possible solutions for you.

Regards. 

Hi,

Can you try to inject this custom CSS code in your form to fix the issue?

@media screen and (max-width: 480px){

input#input_5_area {

    width: 80%;

}

div#cid_3 {

    height: 50px;

}

div#cid_5 {

    height: 50px;

}

}

To inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

Do let us know if you need further assistance,
Regards.

So this doesn't seem to work. There is already CSS code in the form, so I tried injecting the code you provided both before and after the existing code, but this doesn't resolve the problem.

I have cloned your form and added the CSS code provided by my colleague.

https://form.jotform.com/53545889532973

As you will notice. I placed the CSS code inside the CSS of the theme. You may clone the form if you like.

If you have any additional question or issue, please do not hesitate contacting us. We will be glad to help.

Hi,

I'm not sure if the CSS is still in the form, but it appears that the name and phone number fields are misaligned, but only on iPhones. Any help would be appreciated!

Thanks!

https://form.jotform.com/53547773403964

Could you please indicate if you are still having issues. I have just tested your form on my personal android phone and could not replicate the issue. Unfortunately, I do not have an iphone. But have tested on phone emulators. I was also not able to replicate the issue.

Please let us know if you require our assistance.

Yes, we are still having the problem. We never did have a problem on Android. And we tested the app on both an iPhone and iPad in portrait mode and they both have the same problem with the misaligned fields. 

If you are referring to your form Elite Maintenance Request (Mobile) - v2.0, that is looking good on mobile view:

However if you are referring to your form Elite Maintenance Request (Mobile):

That one is not display good, so please inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

@media only screen and (max-width: 480px) {

 #cid_3,#cid_5{

    height: 50px !important;

 }

#sublabel_area{

    margin-top: -15px;

}

}

Let us know if you need more help.

This still isn't working. We tried it on both an iPad and an iPhone and the fields are still misaligned. Below is a screen shot of the iPad. We're trying to resolve it with the form, Elite Maintenance Request (Mobile) - v2.0, the one you said is displaying correctly.

And the phone being used is an iPhone 6, 5, and 4, and the iPads are an iPad 1 and iPad 2 Air.

Thanks!

Hi,

I tested the form in an iPhone 6 and 5 emulator and it appears to be a bit misaligned.

I was also able to recreate the issue in an iPad air 2 simulator.

Allow me to investigate this issue further and I will get back to you once I have a possible solution.

Regards.

Hi,

From the code that my colleague gave you, simply increase the amount of the height from 50px to 60px as seen in the highlighted area of the code below:

@media only screen and (max-width: 480px) {

  #cid_3,#cid_5{

   height: 60px !important;

  }

  #sublabel_area{

    margin-top: -15px;

  }

}

Then to fix the display in iPad, inject the following css:

@media screen and (max-width: 768px){

  #cid_3,#cid_5{

  height:100px!important;

  }

  #input_5_area{

  width: 98%!important;

  }

  #input_5_phone{

  width: 98%!important;

  }

}

Please make sure that you inject the css above the /* | *//*__INSPECT_SEPERATOR__*/ as it may be mistaken as a comment if added below and will thus not apply the changes.

Do inform us if you need further assistance,
Regards.

Hi Chriistian, there is a LOT of CSS code in the form and I'm having a problem locating the exact line(s) you're referencing. Could you assist in updating the CSS, please?

After reviewing your form, I did not see any off the CSS code provided by my colleagues. If you enter the DESIGNER, you will be able to inject the CSS code.

In the CSS tab, you will see a text area. You can just copy and paste the code provided here.

If you are still having issues, please let us know. We will be glad to insert the code for you.

It turns out that I was not in the designer when I tried to inject the CSS code. However....when I tried to copy and paste the code you provided above the INSPECT SEPARATOR, I have an error and I don't see the INSPECT SEPARATOR anymore.

I thought for sure that I was careful about pasting the provided code in the correct place because I didn't want to screw up the CSS code, but apparently I dd something incorrectly...

Could you please let us know what is the form in question? You can always revert your form by using the revision history: http://www.jotform.com/help/294-How-to-View-Form-Revision-History

Once you revert it, you can include the provided CSS code at the Designer, or Preference as explain o this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

You simply scroll down to the last line of code, do an "enter" and paste the provided code, example:

The form name is Elite Maintenance Request (Mobile) - v2.0. So here's what happened when I tried to inject the CSS code. I first followed the instructions to inject it in Developer mode.

However, the changes don't do anything and when I come back to the CSS code, this is what is not at the bottom of the code:

So when this doesn't work, I revert to the previous version and try your second recommendation to inject the CSS code in the builder. The process I use is below:

I save this, however, when I come back to this code, it is gone.

I think I've followed both your suggestions, but am still not having any luck. Please help!

Hi,

I previously made a clone of Elite Maintenance Request (Mobile) - v2.0 where I applied the css changes. If you are having trouble applying the css on your own form, you can instead clone this form where the css are already injected so you don't need to make any more changes.

Here's the link to the cloned form: https://form.jotform.com/60170656297965 

This guide can help you on how to clone a form: How to Clone an Existing Form from a URL

Do inform us if you need further assistance,
Regards.

Thank you for cloning the form! I appreciate it. This form is used in an app that has been published on Google Play and the App Store. Since the form ID is in the app, I would like to be able to use the cloned form so that I don't have to resubmit the app to Google Play or the App Store. Is there a way to change the form ID of this new form to the ID of the form that is currently in the app?

For example, the form in the apps is https://form.jotform.com/53547773403964

Is it possible to have the new form use this ID to avoid having to resubmit the app?

Hi,

What method did you use to embed the form to your app? If you used the source code to embed it, you will unfortunately have to re-embed the new form into your app.

I will wait for your reply,
Regards.

I didn't use source code to embed it. The form is called by the app by using the direct URL https://form.jotform.com/53547773403964.

Than you for the update. If your app is using the URL directly, the only option you have would be.

1) adjust your app so the it is pointing to the correct form

2) adjust your original form with the proper code so the form opens correctly in you app

This would be the only option you have, since you are not embedding it in your app.

If you require our assistance, please let us know.