How can I add a text input box on step 2 of 2step order form

1

I have products that come in many colors, I give discount if people buy more than 1. In my current setup people pick 1 color using the @yassine script I found here (Thanks for that btw!) In some cases, customers might want to have more than 1 color. Say they order 3 they might want 1 blue, 1 red and 1 yellow. I don’t want 1 field per number of items (I have 10 packs also, it would look weird) but maybe a text input form above the One-time offer where they can put (I want 1 blue, 1 red, 1 yellow) in case they don’t want 3 of the same color. Can you help?

Thanks,

1 Like
2

So there are two way to do that, as shown on that thread, you can use the Fancify App and create as many complex variants as you need… and get a decently looking result like this:

You can also have, multi-quantity or multi-checkout if needed (to allow purchasing multiple variants).

OR:

If you insist on adding the text input, I modified the code from the same thread to this:

<script>
var option_name = 'leave_us_a_comment';
var label = 'Leave us a comment';

$('.o2step_step1').prepend('<hr style="margin-top: 3px;margin-bottom: 15px;">');
input = $('<input type="custom_type" data-custom-type="'+option_name+'" name="custom_type" class="elS1Fullname elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required1 elInputStyle1 elInputSmall elInputBG2 garlic-auto-save" data-type="extra" style="margin-top: 0px !important;margin-bottom: 10px !important; border-color: rgb(74, 137, 32); border-width: 3px;"></input>');
$('.o2step_step1').prepend(input);
$('.o2step_step1').prepend('<label>'+label+'</label>');
</script>

Again copy/paste that into your footer code box.

It should produce something like:
image

Hope that helps,

Best,
– @yassine

1 Like
3

@yassine Thanks a lot, would you mind telling me how to display it on step 2 above the credit card form and not mandatory. Right now it forces you to write something when really it isn’t necessary all the time. I really appreciate your help. Is there a way to send you a little something to show gratitude?

1 Like
4

Here you go @David_Foster, an updated version:

<script>
    var option_name = 'leave_us_a_comment';
    var label = 'Leave us a comment';
    var mandatory = false;

    input = $('<input type="custom_type" data-custom-type="'+option_name+'" name="custom_type" class="elS1Fullname elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight elInputStyle1 elInputSmall elInputBG2 garlic-auto-save" data-type="extra" style="margin-top: 0px !important;margin-bottom: 10px !important; border-color: rgb(74, 137, 32); border-width: 3px;"></input>').addClass(mandatory ? 'required1' : '');
    $('.o2step_step2 #order-declined-message').before('<label>'+label+'</label>');
    $('.o2step_step2 #order-declined-message').before(input);
    $('.o2step_step2 #order-declined-message').before('<hr style="margin-top: 3px;margin-bottom: 15px;">');
</script>

  • Change mandatory from false to true at line four, if need to have a mandatory field.

  • That code should produce something like this:

    image
    image402×580 12.9 KB

  • Re-use the same code if need to add more fields as needed.

There is no need for that :wink: but you may join our Funnelish affiliate program if you want to contribute to the growth of our platform :slight_smile:

Hope that helps,

Best,
– @yassine