Creating singlefield form submitted with Return/Enter

  • giusti
    Asked on August 2, 2015 at 1:55 PM

    Hello Jot Form Support.

    For Newsletter : I just need a Textfield where I can add my eMail Address an press Enter to send (no send button). Is it maybe possible?

    Thanks for your help.

    Best regards.

    Giustino

  • Ben
    Replied on August 2, 2015 at 5:22 PM

    To do that Giustino, you will need 2 fields:

    1. one that will accept email
    2. submit button

    Now, it might seem strange to say that you need two buttons for a single field form, but go with me for now :)

    1. field that will capture email as input

    For this I recommend using E-Mail field for several reasons, but the most important being email validation, quickly followed by ease of mapping with integrations (if you decide to connect it to an integration such as MailChimp).

    You can find this field under Quick Tools:

    Creating singlefield form submitted with Return/Enter Image 1 Screenshot 20

    2. leave Submit button

    As you have added your email button, the submit button was created for you, and we should leave it. With it on the form, we can submit the form by pressing enter/return. This is so because button and input elements are 'natural' submission elements of the form and we need them if we want the form to be submitted, so as soon as you have it and press Enter/Return, the browser will use this button to submit the form.

    If we remove it on the other hand, the form will not be a true form any more and as such it will simply not work.

    Now we may need it, but there is no reason that you must see it, so we can just go ahead and add the following code to our jotform:

    .form-line[data-type="control_button"] {
        display: none;
    }

    That makes sure that submit button on your form is no longer seen nor taking space and as such it gives us the functionality that we need, while letting us have one field form.

    You can see and test it all out on this quick demo form here: http://form.jotformpro.com/form/52136322379959

    or you can simply clone to form to your own account by following these steps: How to Clone an Existing Form from a URL

    Do let us know how it goes :)