Hi everyone,
I come from no background or knowledge in html/css. In fact, I am a marketing specialist just trying to embed a mailchimp sign up form on my website. It requires some coding and I used chatgpt for it but I can’t fix an issue despite trying everything.
There is a gap between the form and the text preceding it.
Here is the code of the webpage on wordpress:
Our monthly e-newsletter is a fun recap of what the D Center has been up to over the past month, as well as happenings around the Disability and Deaf communities, interviews, and other creative content.
To opt-in to our Monthly Email Newsletter, just click the link below! You can opt-out at anytime
<div class="form-container" style="text-align: center; margin-top: 5px;">
[mc4wp_form id=2452]
</div>
<strong><a href="https://washington.us12.list-manage.com/subscribe?u=9ee63125ba31c7618818ed203&id=1d20316389">Click here to sign up for our Monthly Email Newsletter!</a></strong>
To opt-out of this subscription, open one of the emails newsletters you received and scroll to the bottom. You should see a small hyperlink that allows you to unsubscribe from our emails. Click the link and confirm that you would like to unsubscribe. If you are unable to access this link, please email us at <a href="mailto:Dcenter@uw.edu">Dcenter@uw.edu</a>, state your subscribed email address, and ask to be unsubscribed from the Monthly Email Newsletter.
If you accidentally unsubscribed or would like to opt back in to the emails, return to this webpage and click the sign-up link again.
<h3>Past Newsletters</h3>
If you want to read through some of our past newsletters, we have compiled a list of links to those here.
<strong>May 2024: <a href="https://www.canva.com/design/DAGBZAHgewo/weDGVyJpMLvJX86h0nC-NA/view?utm_content=DAGBZAHgewo&utm_campaign=designshare&utm_medium=link&utm_source=editor">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/aa84587d-359c-4527-9fa6-93b436a91fd9/D_CENTER_MAY_NEWSLETTER_PLAIN_TEXT.pdf">Plain Text Version</a></strong>
<strong>April 2024: <a href="https://www.canva.com/design/DAF6X9hvBAQ/_lsbZFPNIzDq0Q1sFEgo2Q/view?utm_content=DAF6X9hvBAQ&utm_campaign=designshare&utm_medium=link&utm_source=editor&mc_cid=4937236aad&mc_eid=1d703ed5fc#1">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/ddc54a2d-00d1-b17d-0940-b3e4764f62c2/D_CENTER_NEWSLETTER.pdf?mc_cid=4937236aad&mc_eid=1d703ed5fc">Plain Text Version</a></strong>
<strong>January 2024: <a href="https://www.canva.com/design/DAF2VVfzPbY/2GAPVWpUbzly1Z6g4jLN1w/view?utm_content=DAF2VVfzPbY&utm_campaign=designshare&utm_medium=link&utm_source=editor&mc_cid=76eee9dd88&mc_eid=bf5fe48823">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/acc9215b-cfee-3e9f-c8dc-d9aebe7e68d2/D_CENTER_NEWSLETTER_plain_text_version_JAN_24.pdf?mc_cid=76eee9dd88&mc_eid=UNIQID">Plain Text Version</a></strong>
<strong>December 2023: <a href="https://www.canva.com/design/DAF0vCEry6I/XnTV0O-_k87NNDSFrDc2FA/view?utm_content=DAF0vCEry6I&utm_campaign=designshare&utm_medium=link&utm_source=editor&mc_cid=9a604bbbe4&mc_eid=e85e780d38">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/b793e8fb-1f5f-9439-cd3e-7ac567612dd2/D_CENTER_NEWSLETTER_Plain_Text_Version_December_2023.pdf?mc_cid=9a604bbbe4&mc_eid=e85e780d38">Plain Text Version</a></strong>
<strong>November 2023: <a href="https://www.canva.com/design/DAFzbOrJMt4/oL1IegVlPv7CmB_EpQdGwQ/view?mc_cid=09c0a9a714&mc_eid=e85e780d38">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/7092a426-fd8d-f4ad-d10b-c9d94c4f4ab2/D_CENTER_NEWSLETTER_NOVEMBER_2023.pdf?mc_cid=09c0a9a714&mc_eid=e85e780d38">Plain Text Version</a></strong>
<strong>October 2023: <a href="https://www.canva.com/design/DAFfQBvA_ZM/Nr2UCE9QIOG4KX4TyR9EIw/view?utm_content=DAFfQBvA_ZM&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink">Graphic Version</a> | <a href="https://mcusercontent.com/9ee63125ba31c7618818ed203/files/68f1390b-a89c-2c8a-231a-735b5e47eeac/10_23_Plain_Text_Newsletter.pdf?mc_cid=ff58c76052&mc_eid=UNIQID">Plain Text Version</a></strong>
<hr />
<p style="text-align: left;"><b>The D Center, its programming, and amenities are all sponsored by the Husky Union Building, Services and Activities Fee, and the Student Tech Fee.</b></p>
<img class="size-full wp-image-2001 alignleft" src="http://depts.washington.edu/dcenter/wordpress/wp-content/uploads/2023/11/HUB-Logo.png" alt="Purple circular HUB logo" width="150" height="150" /><img class="wp-image-2003 alignleft" src="http://depts.washington.edu/dcenter/wordpress/wp-content/uploads/2023/11/SAF-Logo.png" alt="Purple square S+AF logo with text "Services + Activities Fee"" width="125" height="179" />
<img class="wp-image-2002 alignleft" src="http://depts.washington.edu/dcenter/wordpress/wp-content/uploads/2023/11/STF-Logo.png" alt="Black text "STF" with Student Tech Fee below" width="186" height="91" />
And here is the code of the form itself:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.form-container {
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
margin-top: 0px;
}
.form-container img {
max-width: 120px;
height: auto;
margin: 0 auto 15px auto;
display: block;
margin-top: 5px;
}
h3 {
font-size: 14px; /* Reduced text size */
margin: 10px 0;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
font-size: 14px; /* Reduced text size for labels */
}
input[type="email"],
input[type="text"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 25px; /* Increased padding */
font-size: 18px; /* Increased font size */
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<!-- Newspaper GIF -->
<img src="https://media.giphy.com/media/VeT5jhseHD0W3dI7de/giphy.gif?cid=ecf05e475snqnsg5cesynmmjhevicsw3i7e11y04gfdycphr&ep=v1_gifs_search&rid=giphy.gif&ct=g" alt="Newspaper GIF">
<!-- Form Structure -->
<p>
<label for="email">Email Address</label>
<input type="email" id="email" name="EMAIL" placeholder="Your email address" required>
</p>
<p>
<label for="fname">First Name</label>
<input type="text" id="fname" name="FNAME" placeholder="Your first name">
</p>
<p>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="LNAME" placeholder="Your last name">
</p>
<H4>
<input type="submit" value="Subscribe">
</H4>
</div>
</body>
</html>
PLEASE HELP, thank you :")
Ps, This is the screenshot
