Adding a Middle Initial field to the full name field

Hello, I would like to add a middle initial box to the Full Name Form Element. Is there a way to do that?

Yes, you can do that by setting the Middle Name option in the field's properties to ON.

Demo: https://form.jotform.com/81115930048956

Is there a way to change the name of the field to "Middle Initial" as opposed to "Middle Name" and to make the actual box smaller?

If there is an additional cost associated with this request, please advise as our client would like these two changes incorporated

The sub-labels for each part of the full name field can be changed to whatever you'd like:

For the width of the middle name portion, adding the following code to the form would adjust it:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

#middle_9, #sublabel_middle {
    width : 40px;
}

When making the middle name box smaller, a gap is created because "Middle Initial" is longer than the box.

Is there a code to create a line break in the middle name sublabel so that it appears as

Middle
Initial

and gets rid of the extra space in between the middle name box and Last name box?

I've found the below code but it puts "initial" under every field and I just need it under the Middle Name fields. 

#cid_9 .form-sub-label:after {
display:flex;
content: "Initial";
}

The code I suggested does something similar:

#middle_9, #sublabel_middle {
    width : 40px;
}

The #sublabel_middle portion targets the sub-label for the middle initial field and makes it the same width as the input.  When that is shorter than the actual text, the text is wrapped similar to your example.

I want to create a line break in the word "Middle Initial" so that the space (marked with an x in the below image) is no longer visible.

The code you provided only allows me to make the box smaller, the text does not wrap.

Is there a code that can achieve this? I want ...

Middle Initial to be

Middle
Initial

I have checked your form and the middle name is appearing as you have requested.

The following code should be sufficient.

#middle_9, #sublabel_middle {
    width : 50px;
}

Let us know if you need further assistance.

you are correct. i did not check the "preview mode" of the form. THANK YOU!