How can I add a button to an external page?

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 ?

 

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.

 

Thank you for your reply.
It keep adding code.

target="_blank" 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?
...

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. 

 

Can we make it look like a 3D button without the blue fonts?
...

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.

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.
...

Here you go:
https://form.jotform.us/70857513432153
...

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:

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.
...

thank you is there a way to make the button look like in the button options.
In color and 3D?
...

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.

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.
...

It still shows up as see pic.
what am i doing wrong?
...

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" href="https://app.hellosign.com/s/310726cf" target="_blank" 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;

}

...

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.