How can I add a button to an external page?

  • Profile Image
    Therapy24x7
    Asked on March 29, 2017 at 10:56 AM

    Hi I would like to do the following:

     

    1. I have a link on the form would like to create a button. How do I do that?

    2. The link from the form is not working please your assistance with that.

    3. When client click submit where is the info going too ?

     

  • Profile Image
    Safaa
    Answered on March 29, 2017 at 12:36 PM

    Hi, 

    Thank you for contacting JotForm Support.

    1. I have a link on the form would like to create a button. How do I do that?

    A workaround for this, is to add your own HTML code into the TEXT element in the form builder, to do so, please follow the following steps:

    1. Open your form builder, Click on Form Elements, then select BASIC, scroll down to QUICK ELEMENTS, and select TEXT

    2. In the body of the TEXT element, add the following HTML code:

    <button><a target="_blank" href="YOUR_LINK" rel="nofollow"> YOUR TEXT </a>/button>

    Make sure to replace YOUR_LINK with the URL to your external link that you want to redirect the user to, and YOUR TEXT to whatever text you would like to appear on the link button.

    3. Save your edit. 

    This should fix your external link issue. 

     

    2. The link from the form is not working please your assistance with that

    I checked the external link on the URL you provided, it seems to be working fine, please check again and make sure that your URL is working.

    If you're asking about something else, please post your question in a new thread so we can assist you further. 

     

    3. When client click submit where is the info going too ?

    The submission data will be submitted to our servers, and stored under your account. You can view your submission data by following this guide:

    How to View Form Submissions

     

    Please don't hesitate to contact us if you have any further issues.

     

  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 02:45 PM
    Thank you for your reply.
    It keep adding code.

    rel="nofollow noopener noreferrer"> SUBMIT
    /button>


    And as a result it looks like this. See picture. Also can I make it look
    Like a 3D push button ? With choosing the color of the font?
    ...
  • Profile Image
    Safaa
    Answered on March 29, 2017 at 04:05 PM

    Hi, 

    I apologize for this mistake, the code i provided is missing a closing "<"

    please replace it with this code, and it should fix the issue:

    <button><a target="_blank" href="YOUR_LINK" rel="nofollow"> YOUR TEXT</a></button>

     

    You can change the font color, you can also add an image to act as a hyperlink button. 

     

  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 04:45 PM
    Can we make it look like a 3D button without the blue fonts?
    ...
  • Profile Image
    AIDAN
    Answered on March 29, 2017 at 06:13 PM

    Could you please point me to the form ID or URL that you're working on, so that I could assist you further with the styling? I can't find a form in the webpage URL you mentioned in your request.

    Thank you in advance. We are awaiting your reply.

  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 06:45 PM
    Our apologies, we are currently out of office. We are checking our
    email's during administrative business hours, Monday trough Thursday 9
    am to 5pm EST. We are closed on weekend. * Please note that due to
    high volume you might experience a delay in response *. We will get
    back to you shortly. Thank you for your patience.
    ...
  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 06:45 PM
    Here you go:
    https://form.jotform.us/70857513432153
    ...
  • Profile Image
    Chriistian
    Answered on March 29, 2017 at 09:53 PM

    Hi,

    To remove the blue fonts on the button, please inject this custom CSS on your form:

    a:-webkit-any-link {

          color: black !important;

          text-decoration: none !important;

    }

    Here's a guide on How to Inject Custom CSS Codes

    Result:

  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 10:45 PM
    Our apologies, we are currently out of office. We are checking our
    email's during administrative business hours, Monday trough Thursday 9
    am to 5pm EST. We are closed on weekend. * Please note that due to
    high volume you might experience a delay in response *. We will get
    back to you shortly. Thank you for your patience.
    ...
  • Profile Image
    Therapy24x7
    Answered on March 29, 2017 at 10:45 PM
    thank you is there a way to make the button look like in the button options.
    In color and 3D?
    ...
  • Profile Image
    Chriistian
    Answered on March 30, 2017 at 12:00 AM

    Yes, you can customize the button to make it look like according to your preference. 

    For example:

    a:-webkit-any-link {

    background: #0066A2;

    color: white;

    border-style: outset;

    border-color: #0066A2;

    height: 50px;

    width: 100px;

    font: bold 15px arial, sans-serif;

    }

    To know more about styling the button on your form, you can check out this guide: Submit Button CSS & CSS3

    Regards.

  • Profile Image
    Therapy24x7
    Answered on March 30, 2017 at 12:45 AM
    Our apologies, we are currently out of office. We are checking our
    email's during administrative business hours, Monday trough Thursday 9
    am to 5pm EST. We are closed on weekend. * Please note that due to
    high volume you might experience a delay in response *. We will get
    back to you shortly. Thank you for your patience.
    ...
  • Profile Image
    Therapy24x7
    Answered on March 31, 2017 at 06:45 AM
    It still shows up as see pic.
    what am i doing wrong?
    ...
  • Profile Image
    Jim_R
    Answered on March 31, 2017 at 10:40 AM

    Looks like you are replying via email and attached a screenshot. Our Forum doesn't accept email attachments. But I'm assuming this is what you're hoping to send:

    (That's how I'm seeing the link/button right now on your form)

    To keep things simpler, let's just use a regular <a> tag (no <button> tags this time). Please do the following:

    1. On the Text Field you added, remove the codes and replace them with:

    <p><a class="customButton" target="_blank" href="https://app.hellosign.com/s/310726cf" rel="nofollow noopener" rel="noopener noreferrer"> CLICK HERE TO FILL SECURE CARD</a></p>

    2. Then inject the following CSS codes to your Form Builder:

    .customButton {

        text-decoration: none;

        margin : 0;

        border : 1px solid #ccc;

        padding : 8px 16px;

        color : #666;

        text-shadow : 0 1px #fff;

        cursor : pointer;

        -moz-border-radius : 3px 3px;

        -webkit-border-radius : 3px 3px;

        border-radius : 3px 3px;

        -moz-box-shadow : 0 1px #fff inset, 0 1px #ddd;

        -webkit-box-shadow : 0 1px #fff inset, 0 1px #ddd;

        box-shadow : 0 1px #fff inset, 0 1px #ddd;

        background : #f5f5f5;

        background : -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee));

        background : -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%);

        background : -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%);

        background : -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%);

        background : linear-gradient(top, #f5f5f5 0%,#eeeeee 100%);

        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 );

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    Result: 70893737837978 

    You can take this up a notch by adding :hover and :active states to the link if you want to. I'll just add the codes here in case you want to use them.

    .customButton:hover {

        background : #ffffff;

        background : -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));

        background : -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);

        background : -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);

        background : -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);

        background : linear-gradient(top, #ffffff 0%,#f5f5f5 100%);

        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );

    }

     

    .customButton:active {

        background : #eeeeee;

        background : -moz-linear-gradient(top, #eeeeee 0%, #f5f5f5 100%);

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f5f5f5));

        background : -webkit-linear-gradient(top, #eeeeee 0%,#f5f5f5 100%);

        background : -o-linear-gradient(top, #eeeeee 0%,#f5f5f5 100%);

        background : -ms-linear-gradient(top, #eeeeee 0%,#f5f5f5 100%);

        background : linear-gradient(top, #eeeeee 0%,#f5f5f5 100%);

        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f5f5f5',GradientType=0 );

        -moz-box-shadow : 0 1px #fff inset;

        -webkit-box-shadow : 0 1px #fff inset;

        box-shadow : 0 1px #fff inset;

    }

  • Profile Image
    Therapy24x7
    Answered on April 09, 2017 at 03:44 AM
    I have a few other questions.
    I set up the forms to synch with google sheets.
    For some reason the names and emails don't get filled although they are
    part of the form.
    See attached picture.
    Please advise.

    ...
  • Profile Image
    Jim_R
    Answered on April 09, 2017 at 04:16 AM

    We strive to stick with 1 question/topic per thread so if you have a few more questions aside from this, we strongly urge you to create separate threads for each of them here https://www.jotform.com/contact/

    For now, I moved your last question about Google Spreadsheet to a separate thread https://www.jotform.com/answers/1114925 

    We'll have it addressed there shortly.