What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Customizing Stripe tool through the source code

    Asked by kauseway on January 16, 2015 at 01:28 PM

    If I use the source code instead of script or I-frame can I customize the look of the stripe widget. For example it asks for the first name and last name, but we already ask that higher up in the form. I assume that stripe widget needs the name but can we just hide those fields?  Also the look of the expiration date has always looked bad.  Just want to know what if anything we can customize as far as the look if we use just source code.

     

    https://secure.jotformpro.com/form/50005155818954

    Page URL:
    https://secure.jotformpro.com/form/50005155818954

    source name first name expiration date
  • Profile Image

    Answered by Ben on January 16, 2015 at 02:43 PM

    Hi,

    I believe that if you remove those fields you would either not be able to submit to Stripe, or you would have the captcha shown on each submission.

    Unfortunately I think that you can only have these fields removed if you add the Full Name tool instead of the text box tool that you already have, but would need to check and follow up on that.

    Can you please tell us in the mean time what you do not like about the expiration fields so that we might be able to find a solution for that.

    Best Regards,
    Ben

  • Profile Image

    Answered by kauseway on January 16, 2015 at 02:52 PM

    Thanks!
    I understand that this widget needs the name fields. From a previous support question I was told I could use a script to duplicate fields. So If I ask for someones name in the first form, I can populate the stripe widget name fields as they are required. Correct?

    If so, I dont want to remove those fields but hide them. So the user doesnt have to enter their name again!  Can they just be hide?

    And how much styling can we do in source code to the field.

     

    Thanks and let me know.

  • Profile Image

    Answered by kauseway on January 16, 2015 at 02:54 PM

    I posted a sample of another form. Very clean and clear. Here is mine. Not bad but there is a random dash to the right of the cc field. The month and year only need to take up so much width but they stretch across the entire row. Again there is a dash but it doesnt look right the way the form is displaying.  And I dont need the name. I dont mind having another field pass the name to the stripe widget and then just hide it. Need to know if that can be done?

  • Profile Image

    Answered by Ben on January 16, 2015 at 03:48 PM

    Hi,

    OK. You can make a change to hide the name field through the source code. To do that just add

    type="hidden"

    in the HTML code for the input.

    It would then look like this:

    <input type="text" id="input_14_cc_firstName" size="20" name="q14_myProducts14[cc_firstName]" class="form-textbox validate[required] cc_firstName" type="hidden">

    The month and year only need to take up so much width but they stretch across the entire row. Again there is a dash but it doesnt look right the way the form is displaying.

    The reason for this is that the jotform is as wide as the mobile screen would be, activating the mobile responsive option. The same is for credit card field.

    The credit card field should look like this [credit card number] - [security code], but as it is taking the entire width it will no longer look like that, showing the dash on the right.

    Now this code will restore the fields as they should be:

    #cid_14 .form-address-table .form-sub-label-container {
        color: transparent;
    }
    #cid_14 .form-address-table tr:last-child .form-sub-label-container {
        margin: 2%;
        width: 46%;
    }

    You can see here how to inject this CSS code to your jotform: Inject Custom CSS Codes.

    Do let us know if that helps.

    Also, I would suggest making all the tweeks that you need and can inside of the jotform builder so that you can then only do the parts that you can not do in the builder itself through the source code.

    Also, passing the first name and last name should be possible and should work. You can do that through a bit of javascript.

    Best Regards,
    Ben

  • Profile Image

    Answered by kauseway on January 23, 2015 at 10:58 AM

    So just to follow up. I want to build my own Credit card fields. Can I just create my own fields and hide the jotform creditcard section. All information would be copied to jotform creditcard field. Will that work?

  • Profile Image

    Answered by Ben on January 23, 2015 at 12:05 PM

    That depends on the fields. You could do that with name section, but not with the credit card number and security codes as that would be against our terms of use, unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

  • Profile Image

    Answered by kauseway on January 24, 2015 at 09:25 AM

    Can you clarify this point:

     

    unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

     

    I do want to use the source code. I am trying to get full control of the form to make it look exactly like I need it to.  So is there a way to have my own card number, expiration and security code field.  It copies into the jotform widget but those custom fields dont get sent to the database? Is that how it would work?

  • Profile Image
    JotForm Support

    Answered by jonathan on January 24, 2015 at 05:09 PM

    unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

    Our colleague Ben meant that you can do this and might work for you.

    BUT I would also like to emphasize that when using the source code on your own website and capturing data to your own database, will still be detected as a type of phishing, if you will be capturing sensitive or confidential information like CC account names, numbers, and or security code. You can should check the JotForm Terms of Use also.

    Let me also tell you that the form's source code are all plain text and never encrypted.

    So its very open for any user with enough knowledge to read programming code, and check the source code of your form. And then be able to compromise whatever sensitive/confidential data the application is getting.

    If you will instead use the Stripe integration tool, not only it will be secured on jotform side, but the data will be secured and encrypted also as the transactions will all be processed by the payment process Stripe.

    Hope this help. Let us know if you have further inquiry.

    Thanks.

     

     

  • Profile Image

    Answered by kauseway on January 24, 2015 at 08:38 PM

    Ok. Let me try again since i am not able to get a yes or no here.

    I am not trying to use my own database. I am trying to control the look of the form. I was told I can make the form look anyway I want if using source code?  YES or NO?

     

    Can I make the stripe widget look anyway I want using source code? YES or NO?

     

     

  • Profile Image

    Answered by Ben on January 25, 2015 at 02:52 AM

    I am not trying to use my own database. I am trying to control the look of the form. I was told I can make the form look anyway I want if using source code?  YES or NO?

    Yes, you can make it look any way you want using source code.

    Can I make the stripe widget look anyway I want using source code? YES or NO?

    Yes, that is correct.

    So is there a way to have my own card number, expiration and security code field.  It copies into the jotform widget but those custom fields dont get sent to the database? Is that how it would work?

    Yes, that is correct as well.

    How to do that:

    1. The extra fields in your source code, should not be present in the jotform as well (in your JotForm Builder), or the data in them would be sent to our data centers and as such would be breaking the terms of use.

    2. the data in the jotform fields, must be filled out by the required values (credit card details, security code, etc)

    * You can make entire Stripe integration hidden if that is what you want, as long as it gets filled out and the fields with the sensitive data is not sent to us, everything should be working properly

    * In regards to security, it is true what my colleague Jonathan had mentioned, and I would suggest using HTTPS on your website to make the transactions safer.

    I hope that this helps answer all of your questions, however if you are still not 100% sure about something do let us know.