Matching Field Boxes of Widget fields with rest of the form Fields

Hi JotForm Team,

First, let me admire the work of your fantastic support team.

My query is, how to make the Fields of widgets that I'm using (Autocompleted Address & SMS Confirmation) to look like same as the others fields (which are set by the theme that I'm using). I want the widget fields to look like same in terms of height, border colour, width etc). I hope you understood my question.

The form on which I'm working has the name "Membership Registration Form".

Looking forward to your quick response.

Thank you!

Please inject the CSS Code below to autocomplete address widget:

input[type=text] {

  outline: medium none;

  padding: 20px 3px 2px 3px;

  border-radius: 5px;

  display: block;

  width: 100%;

  box-sizing: border-box;

  box-shadow: 0 1px 2px #eee inset;

  border: 1px solid #ccc;

  font-size: 14px;

}

Here's the CSS code for the SMS confirmation widget:

.intl-tel-input.inside input[type=tel], .intl-tel-input.inside input[type=text] {

  padding-left: 44px;

  margin-left: 0;

  padding: 20px 3px 2px 3px;

  border-radius: 5px;

}

Guide: How-to-inject-css-codes-to-widgets

Please give it a try and let us know how it goes.

Dear Thank you for your quick response. I have added your code and here's the result:

"Autocompleted Address", the first field has small font size w.r.t others and its not in the centre of the box. And I can't say about the rest of the boxes as I can't type in.

"Cell Phone", As you can see the +1 is below the flag, which is a very inappropriate place and the "confirm" button is also not in line with the others as the box is not similar to others.

Looking forward to fixing these too.

Hi there,

Please allow me some time to check your form and figure out what CSS to add that'll meet your requirement. I'll get back to you on this ticket with an update.

Thank you.

Hi there,

Kindly inject the following codes into your widgets.

Autocomplete Address widget:

.address-input input[type=text], .grid input[type=text]{

padding: 12px 10px;

  margin: 12px 4px;

  border-radius: 3px;

  position: relative;

  width: 100%;

  transition: background-color .15s;

}

SMS confirmation widget:

#phone{

padding: 12px 10px;

  margin: 12px 4px;

  border-radius: 3px;

  position: relative;

  width: 100%;

  transition: background-color .15s;

border:1px solid #777;

}

.translatable{

padding: 12px 10px;

  margin: 12px 4px;

}

Guide: https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets

Please do add the codes and let us know if that'll meet your requirements.

Looking forward to your response.

Thank you for sending this code. I have applied to code and results are:

Autocomplete Address widget: is looking good now.

The SMS confirmation widget: is showing this:

You can see the dropdown arrow and 1 are merged into eachother.

When I click the drop-down arrow this is happening:

As you can see the full box is not showing ( the right side).

Looking forward to your response.

Hi there - Kindly allow me some time to check your form. I will be back shortly.

Thanks for patiently waiting. Kindly inject the below CSS code into your SMS Confirmation widget to fix the phone prefix and dropdown.

div.flag-dropdown{

margin-left: 50px;

}

.intl-tel-input .flag-dropdown .country-list {

width: 330px ! important;

z-index: -2 ! important;

}

Guide: How-to-inject-css-codes-to-widgets

RESULT:

As for your suggestion, I have moved it to a separate ticket so I can forward it to our developers as a Feature Request. Kindly expect a reply from me here.

Dear thank you for the code, it worked.

Highly appreciated.