Swap two text field values

User needs to be able to swap two input values (first name and last name) so that for example John becomes Doe and vice-versa. There is a button which swaps the values, but I'm not sure where to put it. The swap function is expected not to be used very often.

I was thinking something like this:

enter image description here

But perhaps button is too conspicuous then (not sure if that's problem because it's possible to swap back anyway)? Ditto if button is between text-fields. Also it breaks alignment with other text-fields(e.g. City) a bit, but perhaps I can align those fields accordingly?

Or if we put it right:

enter image description here

but it looks a bit off, maybe if it would be better if button is lower then, and not in the middle?

On larger screens I guess I could put text-fields in same line(something like google translate) and button between them so it wouldn't break style too much, but then I'd be unsure what to do on mobile design.

What would be the best position for a button, and how should I style it (and fields if needed)?

Tags: