-
aspirebrokersAsked on April 5, 2016 at 10:12 PM
Hi Guys,
In relation to my last question. I see that the data does export in separate fields however when I integrate with Zapier it shows as one field. If this a question for them?
-
Chriistian Jotform SupportReplied on April 6, 2016 at 12:36 AM
Unfortunately it is not possible to split the Full Name field into separate fields with the Zapier integration. A possible workaround would be to use two plain text-boxes and label them as First Name and Last Name fields.
If you need further assistance, please let us know.
Regards. -
aspirebrokersReplied on April 6, 2016 at 12:38 AM
This is a real pain. The user interface on the full name is really nice. Is there a way to recreates the "full name" look and feel while having two separate fields?
-
Chriistian Jotform SupportReplied on April 6, 2016 at 2:23 AM
You can shrink the two fields together and use css to modify their appearance and make them similar to the Full Name field.
1. Add a text field as the label.
2. Shrink the two text-boxes.
3. Add sub-labels "First" and "Last"
4. Then inject the custom css below.
#id_392 {
padding-right: 0px;
}
#id_393 {
padding-left: 0px;
}
#input_393, #input_392 {
width: 150px;
}
The field should now look like the screenshot below.
You can check out this cloned form where I injected the css: https://form.jotform.com/60960823676969. You can also clone it to your account if you like.
If you need further assistance, please let us know.
Regards. -
aspirebrokersReplied on April 6, 2016 at 2:47 AM
This is brilliant. Thanks. It goes a bit strange when the screen size changes though
The full name version says nice an compact - http://snag.gy/sRtmO.jpg
Maybe I am better to just split it?
-
Chriistian Jotform SupportReplied on April 6, 2016 at 4:04 AM
You can inject the additional code below to make the field responsive on mobile:
@media only screen and (max-width: 500px){
#id_394 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#id_394 p{
margin: 0px;
}
#id_392, #id_393 {
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
width: 200px;
}#id_392{width:190px}
}
Here's the link to the form where I tested the css: https://form.jotform.com/60960823676969
If you need further assistance, please let us know.
Regards.