Create a button to open a new page for an inline form

[sh617]

Hi there,

I'm trying to create a button on a page that opens up a new page to an inline form.  I am using Dawn Theme 15.0.2.  Any suggestions would be most appreciated.  Here is the page I'd like to create the button on:

https://studioaccomplice.com/pages/custom-work

Thanks in advance!

[TheUntechnickle]

Hello!

To create a button on your Custom Work page that opens a new page with an inline form, you can do the following:

Step 1: Add the Button to Your Page

You can edit the Custom Work page via the Shopify admin. Here's how to add the button:

1. Go to your Shopify Admin > Online Store > Pages.
2. Select the Custom Work page and click Edit.
3. In the HTML editor, add the following code for your button:

<a href="/pages/your-form-page" class="custom-form-button">Fill Out Custom Work Form</a>

Make sure to replace "/pages/your-form-page" with the actual URL of the form page you want to link to.

Step 2: Style the Button

You can style the button using CSS to make it look consistent with the rest of your site. If your Dawn theme already has a button class, this should apply automatically. However, if you want to customize it further, you can add this CSS to your base.css file:

.custom-form-button {
  background-color: #000; /* Customize the background color */
  color: #fff; /* Customize the text color */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.custom-form-button:hover {
  background-color: #555; /* Hover state color */
}

Step 3: Create the Form Page

Now, you'll need to create a new page with the inline form. To do this:

1. Go to Online Store > Pages in your Shopify admin.
2. Click Add Page and name it (e.g., "Custom Work Form").
3. In the HTML editor for that page, add your form code, or use Shopify's built-in contact form option. If you're embedding an external form, you can place the form's HTML in the editor.

For example:

<form action="/your-form-submission-url" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Details:</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Submit</button>
</form>

Step 4: Link the Button to the Form Page

Make sure that the link in the button's HTML matches the page where your form is hosted.

That’s it! You now have a button on your Custom Work page that opens a new page with your inline form. Let me know if you run into any issues or need further help!

Cheers!

Shubham | Untechnickle

[sh617]

Hi Shubham,

Thanks so much for your help.  I was able to create the button, but it is currently in the form of underlined text.  I put in the code you suggested to the base.css to style the button but it did not seem to have an effect.  Do you know how I can make the underlined text into a black button with white text?

https://studioaccomplice.com/pages/custom-work

[sh617]

Actually, I think it created the button!  But the button text is black so I'm unable to read the text.  How do I fix this?  Thanks again!

[TheUntechnickle · Accepted solution]

It seems some other code is overriding the button text color. I'll give you the updated CSS, please add that and it should work 🙂

.custom-form-button {
  background-color: #000; /* Customize the background color */
  color: #ffffff !important; /* Customize the text color */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.custom-form-button:hover {
  background-color: #555; /* Hover state color */
}

This should work like a charm 😄

[sh617]

It worked!  Thanks so much!