Create a contract and payment check out with Stripe

  • Sybares
    Asked on November 26, 2019 at 1:58 PM

    Hi guys,

    it would be great if I could create a form to collect my clients contact details when they want to buy one of our services and on the same to generate a contract with their own input. 

    I read that this is possible with your PDF form, could you please help me on how building it?

    The idea is to send my clients one form where they will :

    1. fill in their contact & legal details,
    2. choose a service
    3. create a contract with their input and sign it
    4. pay at the end for the service they have chosen 

    Is this possible??

    Thanks in advance

    Aggelos

  • John Support Team Lead
    Replied on November 26, 2019 at 4:56 PM

    Hi Aggelos,

    Yes, this is possible with Jotform.

    You can start by building the form first. You may want to refer to these TEMPLATES and may use one of them.

    You can then customize the PDF Report and attach it to the email autoresponder\notifications that you and your user will receive after form submission.

    GUIDES:

    How-to-Customize-PDF-Submissions-Report

    How-To-Include-Submissions-As-PDF-Attachment-In-The-Email-Notifications 

    After that, you can add a STRIPE payment field to the form. Please see this guide on How-to-Integrate-Stripe-with-your-Form.

    Let us know if you need further assistance.

  • Sybares
    Replied on December 18, 2019 at 8:10 AM

    Hi again JohnRex, 

    so I finished my contract form and
    I modified its PDF Report output to suit my needs. 

    I still have a couple of questions though:


    1. In order to be more apprehensible in my greyish form background, could you please help me how to set the "Clear" button of your Signature and Initials widgets in this brighter colour "#e6cfcf " ?
    Here's my form >>  https://form.jotform.com/Sybares/Placement 

    I tried using the following CSS in vain: 
    .clearButton { color : #e6cfcf; font-weight : 900;}
    or 
    .sigNavImage a:visited { color : #e6cfcf; font-weight : 900;}



    2. If I wanted to include the e-signing into the contract form, what could be the optimal UX path?

    The master idea is to have the user auto-create and validate his mission:

    So firstly the user (our client) adds its contact and legal details to the web form.
    Then how to integrate the e-signature part? 

    One thought I had is that
    - he could afterwards preview a blank (not filled) version of the contract using your pdf widget (I have it in the actual form)
    - then he signs it with your signature & initials widgets
    - then he receives the signed contract (by email I imagine)
    and at the end he pays the advance (a standard amount we ask for every mission) via Stripe

    --> mission is then validated !

    What do you think?? :)



    3. The Stripe widget is in English. Is there a way to translate the card details input fields ("First name", "Expiring date" etc) into another language (French) ? My form is for french users and

    I'm afraid that if they see at the very end a payment widget in English they'll find it strange and they'll avoid it...



    4. Thus I created a Pdf version of my form (Titled:"SYBARES CONTRACT") which corresponds nicely to my desired "contract" outcome.

    Is it normal that I see only the pre-filled version of the pdf ? I mean if a new form submission is sent, I get to see that a new version is added (Submission 1, Submission 2, etc) listed by date.  But I can only visualise every new "pdf form version" submission if i download it as a pdf. 

    a. Is this normal? I mean normally you are supposed to see the pdf form version filled with submission input, no?
    b. Also, for every new submission there's no title, only "Submission n" "Submission n2" etc. But normally it should have the form's first field input as a name/title, no?

    1576673488Screen Shot 2019 12 18 at 13 Screenshot 10


    That's all for the moment,
    Thanks a lot for helping me out !

  • jherwin
    Replied on December 18, 2019 at 8:41 AM

    1.) Here's the correct CSS code, please inject it in the widget:

    a.clearButton {
    color:#e6cfcf!important ; 
    font-weight : 900!important;
    }

    Guide: How-to-Inject-CSS-Codes-to-Widgets

    Please give it a try and let us know how it goes.

    As for your other questions, I have moved it to a new thread to better assist you.

    2.) https://www.jotform.com/answers/2084273
    3.) https://www.jotform.com/answers/2084274
    4.) https://www.jotform.com/answers/2084275

    Please refer to that thread links for any related questions and/or follow-ups.

    Thank you.

  • Sybares
    Replied on December 18, 2019 at 10:49 AM

    Hey,

    thanks, I added the css code but it didn't work out :(

    Any ideas?

  • AndrewHag
    Replied on December 18, 2019 at 11:19 AM

    I see that you have added the code under the Styles tab.

    Please click on the wand icon > Custom CSS and add the code below:

    a{

    color: #e6cfcf !important;

    font-weight : 900!important;

    }

    Guide: How-to-Inject-CSS-Codes-to-Widgets

    Do note that you will have to add the code under both Initial and Smooth Signature widgets.

    And to change the color of the Signature field, add the code below under the Styles tab:

    span.clear-pad-btn{

       color : #e6cfcf!important;

       font-weight : 900!important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes